Contoh grid Bootstrap

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

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 3 mempunyai empat peringkat kelas: xs (telefon), sm (tablet), md (desktop) dan lg (desktop yang 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-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Campuran: mudah alih, tablet dan desktop

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

Pembersihan lajur

Jelas terapung pada titik putus tertentu untuk mengelakkan pembalut janggal dengan kandungan yang tidak rata.

.col-xs-6 .col-sm-3
Saiz semula port pandangan anda atau lihat pada telefon anda untuk contoh.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offset, tolak, dan tarik tetapan semula

Tetapkan semula offset, tolak dan tarik pada titik putus tertentu.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0