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-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-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
.col-md-4
.col-md-4

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-6
.col-md-4

Campuran: mudah alih dan desktop

Sistem grid Bootstrap v4 mempunyai lima peringkat kelas: xs (lebih kecil), 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 xs dan sm, anda hanya perlu menentukan xs.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Campuran: mudah alih, tablet dan desktop

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4