Contoh grid Bootstrap

Reka letak grid asas untuk membiasakan anda membina dalam sistem grid Bootstrap.

Dalam contoh ini .themed-grid-colkelas 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.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

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.

.col-md-4

Tiga alternatif lajur yang sama

Dengan menggunakan .row-cols-*kelas, anda boleh membuat grid dengan lajur yang sama dengan mudah.

.colanak 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.

.col-md-3

.col-md-6

.col-md-3

Dua lajur

Dapatkan dua lajur bermula pada desktop dan skala ke desktop yang besar .

.col-md-8

.col-md-4

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.

.col-md-8

.col-md-6

.col-md-4

Campuran: mudah alih dan desktop

Sistem grid Bootstrap v5 mempunyai enam peringkat kelas: xs (lebih kecil, infix kelas ini tidak digunakan), sm (kecil), md (sederhana), lg (besar), xl (x-besar), dan xxl (xx -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, xl dan xxl, anda hanya perlu menentukan md.

.col-md-8

.col-6 .col-md-4

.col-6

Campuran: mudah alih, tablet dan desktop

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

longkang

Dengan .gx-*kelas, longkang mendatar boleh dilaraskan.

.coldengan .gx-4longkang

Gunakan .gy-*kelas untuk mengawal longkang menegak.

.coldengan .gy-4longkang

Dengan .g-*kelas, longkang di kedua-dua arah boleh dilaraskan.

.coldengan .g-3longkang

Bekas

Kelas tambahan yang ditambahkan dalam Bootstrap v4.4 membenarkan bekas yang 100% lebar sehingga titik putus tertentu. v5 menambah xxltitik putus baharu.

.bekas

.bekas-sm

.container-md

.kontena-lg

.bekas-xl

.bekas-xxl

.bekas bekas