conto grid Bootstrap

Tata perenah grid dasar pikeun ngajantenkeun anjeun wawuh sareng ngawangun dina sistem grid Bootstrap.

Tilu kolom sarua

Kéngingkeun tilu kolom lebar anu sami dimimitian dina desktop sareng skala kana desktop ageung . Dina alat sélulér, tablet sareng handap, kolom bakal otomatis tumpukan.

.col-md-4
.col-md-4
.col-md-4

Tilu kolom unequal

Kéngingkeun tilu kolom dimimitian dina desktop sareng skala kana desktop ageung tina rupa-rupa lebar. Inget, kolom grid kudu nambahan nepi ka dua belas pikeun blok horizontal tunggal. Leuwih ti éta, sarta kolom mimiti stacking euweuh urusan viewport nu.

.col-md-3
.col-md-6
.col-md-3

Dua kolom

Kéngingkeun dua kolom dimimitian dina desktop sareng skala kana desktop ageung .

.col-md-8
.col-md-4

Lebar pinuh, kolom tunggal

Taya kelas grid diperlukeun pikeun elemen full-lebar.

Dua kolom kalawan dua kolom nested

Per dokuméntasi, nyarang gampang - ngan nempatkeun barisan kolom dina kolom anu tos aya. Ieu masihan anjeun dua kolom dimimitian dina desktop sareng skala ka desktop ageung , sareng dua deui (lebar anu sami) dina kolom anu langkung ageung.

Dina ukuran alat mobile, tablet jeung handap, kolom ieu sareng kolom nested maranéhanana baris tumpukan.

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

Campuran: mobile sareng desktop

Sistem grid Bootstrap 3 ngagaduhan opat tingkatan kelas: xs (telepon), sm (tablet), md (desktop), sareng lg (desktop anu langkung ageung). Anjeun tiasa make ampir sagala kombinasi kelas ieu nyieun layouts leuwih dinamis sarta fléksibel.

Unggal tingkatan kelas skala na, hartina lamun rencana pikeun nyetel lebar sarua pikeun xs jeung sm, Anjeun ngan perlu nangtukeun 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: mobile, tablet, sareng 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

Ngabersihan kolom

Jelas floats di breakpoints husus pikeun nyegah wrapping kagok jeung eusi henteu rata.

.col-xs-6 .col-sm-3
Ganti ukuran viewport Anjeun atawa pariksa kaluar dina telepon Anjeun pikeun conto.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offset, push, jeung resets tarik

Reset offsets, push, jeung narik dina breakpoints husus.

.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