Bootstrap kadriyaj egzanp

Dispozisyon griy debaz pou fè w abitye ak bilding nan sistèm griy Bootstrap la.

Nan egzanp sa yo, .themed-grid-colyo ajoute klas la nan kolòn yo pou ajoute kèk tèm. Sa a se pa yon klas ki disponib nan Bootstrap pa default.

Senk nivo kadriyaj

Gen senk nivo nan sistèm kadriyaj Bootstrap la, youn pou chak seri aparèy nou sipòte. Chak nivo kòmanse nan yon gwosè Viewport minimòm epi otomatikman aplike nan pi gwo aparèy yo sof si yo chanje.

.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

Twa kolòn egal

Jwenn twa kolòn egal-lajè kòmanse nan Desktop yo epi monte nan gwo Desktop . Sou aparèy mobil, tablèt ak anba a, kolòn yo pral otomatikman anpile.

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

Twa kolòn inegal

Jwenn twa kolòn kòmanse nan Desktop yo ak dekale nan gwo Desktop nan divès lajè. Sonje byen, kolòn kadriyaj yo ta dwe ajoute jiska douz pou yon sèl blòk orizontal. Plis pase sa, ak kolòn kòmanse anpile kèlkeswa vi a.

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

De kolòn

Jwenn de kolòn kòmanse nan Desktop yo epi monte nan gwo Desktop .

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

Tout lajè, yon sèl kolòn

Pa gen klas gri ki nesesè pou eleman plen lajè.

De kolòn ak de kolòn enbrike

Dapre dokiman an, nidifikasyon se fasil-jis mete yon ranje kolòn nan yon kolòn ki deja egziste. Sa a ba ou de kolòn kòmanse nan biwo ak dekale nan biwo gwo , ak yon lòt de (egal lajè) nan kolòn nan pi gwo.

Nan gwosè aparèy mobil, tablèt ak desann, kolòn sa yo ak kolòn enbrike yo pral pile.

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

Melanje: mobil ak Desktop

Sistèm kadriyaj Bootstrap v4 la gen senk nivo klas: xs (siplis ti, klas sa a pa itilize), sm (ti), md (mwayen), lg (gwo), ak xl (sipleman gwo). Ou ka itilize prèske nenpòt konbinezon klas sa yo pou kreye layouts ki pi dinamik ak fleksib.

Chak nivo klas ogmante, sa vle di si w gen plan pou mete menm lajè pou md, lg ak xl, ou sèlman bezwen presize md.

.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

Melanje: mobil, tablèt, ak Desktop

.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

Kontenè

Lòt klas ki te ajoute nan Bootstrap v4.4 pèmèt resipyan ki gen 100% lajè jiskaske yon pwen an patikilye.

.resipyan
.veenè-sm
.container-md
.veenè-lg
.veenè-xl
.kontenè-likid