Sistem grid dalam kerangka bootstrap membagi wadah menjadi 12 buah. Saat menggunakannya, Anda dapat mengkompilasi ulang kode sumber yang lebih sedikit/sass sesuai dengan situasi aktual untuk memodifikasi nilai 12. Bagaimana cara kerja sistem mesh dalam kerangka bootstrap:
1. Baris Data (.ROWS) harus dimasukkan dalam wadah sehingga mereka dapat memberikan kesejajaran dan bantalan yang tepat
<div> <div> </div> </div>
2. Anda dapat menambahkan kolom (.column) dalam baris (.row), tetapi jumlah kolom tidak dapat melebihi jumlah total kolom yang dibagi dua (seperti: 12)
<div> <div> <div> </div> <viv> </div> </div>
3. Konten spesifik harus ditempatkan di wadah kolom (.column), dan hanya kolom (.column) yang dapat digunakan sebagai elemen anak langsung dari wadah baris (.row).
4. Buat jarak antar kolom dengan mengatur jarak dalam (padding), dan kemudian mengimbangi pengaruh bantalan dengan mengatur nilai negatif untuk kolom pertama dan tumpukan terakhir.
Ada efek responsif dalam sistem grid bootstrap, yang memiliki empat jenis browser, (layar ultra-kecil, layar kecil, layar sedang dan layar besar), dan breakpointnya adalah 768px, 992px, 1220px
Wadah (.container), untuk resolusi browser yang berbeda, memiliki lebar yang berbeda: otomatis, 760px, 970px, 1170px;
.container {padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; @media (min-width: 768px) {.container {width: 750px;} media (min-width: 992px) {.cont. (min-lebar: 1200px) {.container {width: 1170px;}Wadah baris (.row), membagi baris wadah menjadi 12 bagian yang sama, yaitu kolom. Setiap kolom memiliki padding-kiri: 15px dan Padding-Right: 15px; Ini juga menyebabkan padding-kiri di kolom pertama dan patah-kanan di kolom terakhir untuk menempati 30px lebar medium.
.COL-XS-1, .COL-MD-1, .COL-LG-1, .COL-XS-2, .COL-MD-2, .COL-MD-2, .COL-LG-2, .COL-XS-3, .COL-SM-3, .COL-MD-3, .COL-MD-3, .COL-MD-3, .COL-MD-3, .COL-3, .COL-MD-MD-3, .COL-3, .COL-MD-4, .COL-LG-4, .COL-XS-5, .COL-MD-5, .COL-MD-5, .COL-LG-5, .COL-XS-6, .COL-MD-6, .COL-LG-6, .COL-MD-6, .COL-LG-6, .COL-LG-6, .COL-MD-6, .COL-LG-6, .COL-SSO-SSS-SS-MD-MD-MD-MD-6, .COL-XS-8, .COL-MD-8, .COL-MD-8, .COL-LG-8, .COL-XS-9, .COL-SM-9, .COL-MD-9, .COL-MD-9, .COL-LG-9, .COL-XS-10, .COL-MD-MD-10, .COL-10, .COL-9 .COL-XS-11, .COL-MD-11, .COL-MD-11, .COL-MD-11, .COL-LG-11, .COL-XS-12, .COL-MD-12, .COL-MD-12, .COL-LG-12 {Posisi: Relatif; Min-HEIGHT: 1PX; Padding-Right: 15px: POSISI;Wadah baris (.row) mendefinisikan nilai margin-kiri dan margin-kanan -15px, yang digunakan untuk mengimbangi jarak bagian dalam kiri kolom pertama dan jarak dalam kanan kolom terakhir, sehingga tidak ada jarak antara kolom pertama dan kolom terakhir dan wadah (.container).
.row {margin -right: -15px; margin -left: -15px;}Penggunaan dasar
Karena kerangka kerja Bootstrap menggunakan gaya grid yang berbeda untuk ukuran layar yang berbeda, mari kita ambil layar tengah (970px) sebagai contoh.
1. Kombinasi kolom
Kombinasi kolom adalah untuk mengubah angka untuk menggabungkan kolom (jumlah total kolom tidak dapat melebihi 12), yang agak mirip dengan atribut colspan tabel; Metode kombinasi kolom hanya melibatkan dua karakteristik: mengambang persentase lebar
<div> <div> <div> col-md-4 </div> <div> col-md-8 </div> </div> <div> <div> col-md-4 </div> <div> col-md-4 </div> <div> col-md-4 </div> <di V> col-md-4 </div> </div> <div> <div> col-md-4 </div> </div> <div> <div> col-md-3 </div> <div> col-md-6 </div> <div> col-md-3 </div> </div>
Efeknya adalah sebagai berikut:
Pastikan semua kolom melayang ke kiri
.COL-MD-1, .COL-MD-2, .COL-MD-3, .COL-MD-4, .COL-MD-5, .COL-MD-6, .COL-MD-7, .COL-MD-8, .COL-MD-9, .COL-MD-10, .COL-MD-11, .COL-MD-1 {COL-MD-10, .COL-MD-11, .COL-MD-MD-12 {COL-12 {COL-MD-MD-12 {COL-MD-12 {COL-MD-MD-12 {COL-MD-MD-MD-12;Tentukan lebar setiap kombinasi kolom
.col-md-12 {width: 100%;}. col-md-11 {width: 91.666666667%;}. col-md-10 {width: 83.3333333333%;}. Col-md-9 {width: 75%;}. 66.6666667%;}. Col-MD-7 {Lebar: 58.3333333333%;}. Col-MD-6 {Lebar: 50%;}. Col-MD-5 {Lebar: 41.66666667%;}. Col-MD-5 {width: width: width: 33.33333667%;}. Col-MD-4 {width: width: 33.3333333667%;}. COL-MD-4 {wid {width: 25%;}. col-md-2 {width: 16.66666667%;}. col-md-1 {lebar: 8.333333333%;}Offset kolom
Terkadang, kami tidak ingin dua kolom yang berdekatan berdekatan, tetapi kami tidak ingin menggunakan margin atau cara teknis lainnya. Ini dapat dicapai dengan menggunakan offset kolom. Menggunakan kolom offset, cukup tambahkan nama kelas.col-md-offset-* pada elemen kolom (tanda bintang mewakili jumlah kombinasi kolom yang akan diimbangi). Kolom dengan nama kelas ini akan diimbangi, seperti: Tambahkan .col-md-offset-4 pada elemen kolom, menunjukkan bahwa kolom diimbangi ke kanan dengan lebar 4 kolom.
<dv> <div> <div> 1111 </div> <div> 1111 </div> <div> 333 </div> </div> <div> <div> Kolom offset </div> <div> col-md-2 </div> <div> col-md-2 </div> </Div> </Div> </Div>
Efeknya adalah sebagai berikut:
Prinsip Implementasi:
Menggunakan satu dua belas margin-kiri, sebanyak margin-kiri seperti ada offset, Anda bisa mendapatkan margin-kiri sebanyak yang ada.
.col-md-offset-12 {margin-left: 100%;}. col-md-offset-11 {margin-left: 91.66666667%;}. col-md-offset-10 {margin-left: 83.33333333%;}. Col-md-offset-9 {margin-9 {margin-m-9-m-m-m-m-m-9%; {margin-left: 66.66666667%;}. Col-md-offset-7 {margin-left: 58.33333333%;}. Col-md-offset-6 {margin-left: 50%;}. Col-md-offset-5 {margin-left: 41.41.666666666666666666666666666666666666666666 {margin-left: 33.333333333%;}. col-md-offset-3 {margin-left: 25%;}. col-md-offset-2 {margin-left: 16.6666667%;}. col-md-offset-1 {margin-left: 8.33333333333333333333333333333333333 0;}Perlu dicatat bahwa ketika menggunakan col-md-offset-* untuk mengimbangi kolom, perlu untuk memastikan bahwa jumlah total kolom dan kolom offset tidak melebihi 12, jika tidak itu akan menyebabkan kolom ditampilkan di luar baris.
Penyortiran kolom
Penyortiran kolom adalah untuk mengubah arah kolom dan mengatur jarak mengambang. Dalam sistem grid Bootstrap, itu dengan menambahkan nama kelas. col-md-push-* dan col-md-pull-*
<div> <div> <div> col-md-4 </div> <div> col-md-8 </div> </div> </div>
Efeknya adalah sebagai berikut:
Col-MD-4 ada di sebelah kiri dan Col-MD-8 di sebelah kanan. Jika Anda ingin bertukar posisi, Anda harus memindahkan COL-MD-4 ke kanan dengan 8 kolom, yaitu, tambahkan nama kelas.col-md-push-8; Pada saat yang sama, Anda perlu memindahkan COL-MD-8 ke kiri dengan 4 kolom, yaitu, tambahkan nama kelas.col-md-pull-4.
Bootstrap mencapai efek posisi hanya dengan mengatur kiri dan kanan.
.col-md-pull-12 {kanan: 100%;}. col-md-pull-11 {kanan: 91.66666667%;}. col-md-pull-10 {kanan: 83.33333333%;}. Col-Md-Pull-9 {kanan: 75%;}. 66.6666667%;}. Col-md-pull-7 {kanan: 58.333333333%;}. Col-md-pull-6 {kanan: 50%;}. Col-md-pull-5 {kanan: 41.66666667%;}. Col-md-p-pup 33.333333333%;}. Col-md-pull-3 {kanan: 25%;}. Col-md-pull-2 {kanan: 16.66666667%;} col-md-pull-1 {kanan: 8.33333333%;}. Col-md-pull-0 {kanan: 0.33333333%;}. 100%;}. Col-md-push-11 {kiri: 91.66666667%;}. Col-md-push-10 {kiri: 83.333333333%;}. Col-md-push-9 {kiri: 75%;}. Col-md-push-8 {66.66.66666666666666666666666 58.333333333%;}. Col-md-push-6 {kiri: 50%;}. Col-md-push-5 {kiri: 41.66666667%;}. Col-md-push-4 {kiri: 33.3333333%; le-md-push-4 {33.33333333333333333333333333333 16.66666667%;}. Col-md-push-1 {kiri: 8.3333333333%;}. Col-md-push-0 {kiri: 0;}Bersarang
Sarang kolom dapat menambahkan satu atau membuat wadah baris dalam kolom, dan kemudian masukkan kolom ke dalam wadah baris ini. Ketika lebar wadah baris (baris) dalam wadah kolom adalah 100%, itu adalah lebar kolom eksternal saat ini.
<div> <div> <div>
Saya telah bersarang di dalam grid di dalamnya
<dv> <div> col-md-6 </div> <div> col-md-6 </div> </div> </div> <div> col-md-4 </div> </div> <div> <div> col-md-4 </div> </div> <div> col-md-4 </div> <dv>
Saya telah bersarang di dalam grid di dalamnya
<div> <div> col-md-4 </div> <div> col-md-4 </div> <div> col-md-4 </div> </div> </div> </div> </div>
Konten di atas adalah sistem grid bootstrap yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu semua orang!