Bootstrap kadriyaj egzanp
Dispozisyon griy debaz pou fè w abitye ak bilding nan sistèm griy Bootstrap la.
Nan egzanp sa yo, .themed-grid-col
yo 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.
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.
Twa kolòn egal altènatif
Lè w itilize .row-cols-*
klas yo, ou ka fasilman kreye yon griy ak kolòn egal.
.col
pitit nan
.row-cols-md-3
.col
pitit nan
.row-cols-md-3
.col
pitit 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.
De kolòn
Jwenn de kolòn kòmanse nan Desktop yo epi monte nan gwo Desktop .
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.
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.
Melanje: mobil, tablèt, ak Desktop
Goutyè yo
Avèk .gx-*
klas yo, goutyè orizontal yo ka ajiste.
.col
ak
.gx-4
goutyè
.col
ak
.gx-4
goutyè
.col
ak
.gx-4
goutyè
.col
ak
.gx-4
goutyè
.col
ak
.gx-4
goutyè
.col
ak
.gx-4
goutyè
Sèvi ak .gy-*
klas yo pou kontwole goutyè vètikal yo.
.col
ak
.gy-4
goutyè
.col
ak
.gy-4
goutyè
.col
ak
.gy-4
goutyè
.col
ak
.gy-4
goutyè
.col
ak
.gy-4
goutyè
.col
ak
.gy-4
goutyè
Avèk .g-*
klas yo, goutyè yo nan toude direksyon yo ka ajiste.
.col
ak
.g-3
goutyè
.col
ak
.g-3
goutyè
.col
ak
.g-3
goutyè
.col
ak
.g-3
goutyè
.col
ak
.g-3
goutyè
.col
ak
.g-3
goutyè
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 xxl
breakpoint.