Bootstrap kadriyaj egzanp

Dispozisyon griy debaz pou fè w abitye ak bilding nan sistèm kadriyaj 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-sm-4

.col-md-4

.col-lg-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

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

Melanje: mobil ak Desktop

Sistèm kadriyaj Bootstrap v4 la gen senk nivo klas: xs (sipleman ti), sm (ti), md (mwayen), lg (gwo), ak xl (siplemantè). 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 xs ak sm, ou sèlman bezwen presize xs.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

Melanje: mobil, tablèt, ak Desktop

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

.col-6 .col-lg-4

.col-6 .col-sm-4