Contoh grid Bootstrap
Reka letak grid asas untuk membiasakan anda membina dalam sistem grid Bootstrap.
Dalam contoh ini .themed-grid-col
kelas ditambah pada lajur untuk menambah beberapa tema. Ini bukan kelas yang tersedia dalam Bootstrap secara lalai.
Lima peringkat grid
Terdapat lima peringkat kepada sistem grid Bootstrap, satu untuk setiap julat peranti yang kami sokong. Setiap peringkat bermula pada saiz port pandangan minimum dan digunakan secara automatik pada peranti yang lebih besar melainkan dibatalkan.
Tiga lajur yang sama
Dapatkan tiga lajur yang sama lebar bermula pada desktop dan skala ke desktop yang besar . Pada peranti mudah alih, tablet dan ke bawah, lajur akan disusun secara automatik.
Tiga alternatif lajur yang sama
Dengan menggunakan .row-cols-*
kelas, anda boleh membuat grid dengan lajur yang sama dengan mudah.
.col
anak kepada
.row-cols-md-3
.col
anak kepada
.row-cols-md-3
.col
anak kepada
.row-cols-md-3
Tiga lajur yang tidak sama rata
Dapatkan tiga lajur bermula pada desktop dan skala ke desktop besar dengan pelbagai lebar. Ingat, lajur grid hendaklah menambah sehingga dua belas untuk satu blok mendatar. Lebih daripada itu, dan lajur mula disusun tidak kira port pandangan.
Dua lajur
Dapatkan dua lajur bermula pada desktop dan skala ke desktop yang besar .
Lebar penuh, lajur tunggal
Tiada kelas grid diperlukan untuk elemen lebar penuh.
Dua lajur dengan dua lajur bersarang
Mengikut dokumentasi, sarang adalah mudah—hanya letakkan baris lajur dalam lajur sedia ada. Ini memberi anda dua lajur bermula pada desktop dan menskalakan kepada desktop besar , dengan dua lagi (lebar yang sama) dalam lajur yang lebih besar.
Pada saiz peranti mudah alih, tablet dan ke bawah, lajur ini dan lajur bersarangnya akan bertindan.
Campuran: mudah alih dan desktop
Sistem grid Bootstrap v4 mempunyai lima peringkat kelas: xs (lebih kecil, infix kelas ini tidak digunakan), sm (kecil), md (sederhana), lg (besar) dan xl (lebih besar). Anda boleh menggunakan hampir mana-mana gabungan kelas ini untuk mencipta reka letak yang lebih dinamik dan fleksibel.
Setiap peringkat kelas meningkat, bermakna jika anda merancang untuk menetapkan lebar yang sama untuk md, lg dan xl, anda hanya perlu menentukan md.
Campuran: mudah alih, tablet dan desktop
longkang
Dengan .gx-*
kelas, longkang mendatar boleh dilaraskan.
.col
dengan
.gx-4
longkang
.col
dengan
.gx-4
longkang
.col
dengan
.gx-4
longkang
.col
dengan
.gx-4
longkang
.col
dengan
.gx-4
longkang
.col
dengan
.gx-4
longkang
Gunakan .gy-*
kelas untuk mengawal longkang menegak.
.col
dengan
.gy-4
longkang
.col
dengan
.gy-4
longkang
.col
dengan
.gy-4
longkang
.col
dengan
.gy-4
longkang
.col
dengan
.gy-4
longkang
.col
dengan
.gy-4
longkang
Dengan .g-*
kelas, longkang di kedua-dua arah boleh dilaraskan.
.col
dengan
.g-3
longkang
.col
dengan
.g-3
longkang
.col
dengan
.g-3
longkang
.col
dengan
.g-3
longkang
.col
dengan
.g-3
longkang
.col
dengan
.g-3
longkang
Bekas
Kelas tambahan yang ditambahkan dalam Bootstrap v4.4 membenarkan bekas yang 100% lebar sehingga titik putus tertentu. v5 menambah xxl
titik putus baharu.