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

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-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 egal altènatif

Lè w itilize .row-cols-*klas yo, ou ka fasilman kreye yon griy ak kolòn egal.

.colpitit nan .row-cols-md-3

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 v5 la gen sis nivo klas: xs (anplis ti, klas sa a pa itilize), sm (ti), md (mwayen), lg (gwo), xl (x-gwo), ak xxl (xx). -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, xl ak xxl, ou sèlman bezwen presize md.

.col-md-8

.col-6 .col-md-4

.col-6

Melanje: mobil, tablèt, ak Desktop

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

.col-6 .col-lg-4

.col-6 .col-sm-4

Goutyè yo

Avèk .gx-*klas yo, goutyè orizontal yo ka ajiste.

.colak .gx-4goutyè

Sèvi ak .gy-*klas yo pou kontwole goutyè vètikal yo.

.colak .gy-4goutyè

Avèk .g-*klas yo, goutyè yo nan toude direksyon yo ka ajiste.

.colak .g-3goutyè

Kontenè

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

.resipyan

.veenè-sm

.container-md

.veenè-lg

.veenè-xl

.veenè-xxl

.kontenè-likid