conto grid Bootstrap

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

Dina conto ieu .themed-grid-colkelas ditambahkeun kana kolom pikeun nambahkeun sababaraha theming. Ieu sanés kelas anu sayogi dina Bootstrap sacara standar.

Lima tiers grid

Aya lima undakan kana sistem grid Bootstrap, hiji pikeun unggal rentang alat anu kami dukung. Unggal tingkat dimimitian dina ukuran viewport minimum jeung otomatis dilarapkeun ka alat nu leuwih gede iwal overridden.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

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

Tilu kolom sarua alternatif

Ku ngagunakeun .row-cols-*kelas, anjeun bisa kalayan gampang nyieun grid kalawan kolom sarua.

.colanak ti .row-cols-md-3

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-4

Campuran: mobile sareng desktop

Sistem grid Bootstrap v4 ngagaduhan lima tingkatan kelas: xs (ekstra leutik, infiks kelas ieu henteu dianggo), sm (leutik), md (sedeng), lg (ageung), sareng xl (tambahan ageung). Anjeun tiasa make ampir sagala kombinasi kelas ieu nyieun layouts leuwih dinamis sarta fléksibel.

Tiap tingkatan kelas skala, hartina lamun rencana dina netepkeun lebar sarua pikeun md, lg jeung xl, Anjeun ngan perlu nangtukeun md.

.col-md-8

.col-6 .col-md-4

.col-6

Campuran: mobile, tablet, sareng desktop

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

.col-6 .col-lg-4

.col-6 .col-sm-4

talang

Kalayan .gx-*kelas, talang horizontal tiasa disaluyukeun.

.colkalawan .gx-4talang

Anggo .gy-*kelas pikeun ngontrol talang nangtung.

.colkalawan .gy-4talang

Kalayan .g-*kelas, talang dina dua arah tiasa disaluyukeun.

.colkalawan .g-3talang

Wadahna

kelas tambahan ditambahkeun dina Bootstrap v4.4 ngidinan peti anu 100% lega nepi ka breakpoint tinangtu. v5 nambahkeun xxlbreakpoint anyar.

.wadah

.wadah-sm

.wadah-md

.wadah-lg

.wadah-xl

.wadah-xxl

.wadah-cairan