Bootstrap kadriyaj egzanp

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

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 3 la gen kat nivo klas: xs (telefòn), sm (tablèt), md (buryo), ak lg (pi gwo biwo). 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-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Melanje: mobil, tablèt, ak Desktop

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

Netwaye kolòn

Klè flote nan pwen rupture espesifik pou anpeche vlope gòch ak kontni inegal.

.col-xs-6 .col-sm-3
Redimensionner fenèt ou oswa tcheke li sou telefòn ou pou yon egzanp.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offset, pouse, ak rale reset

Reyajiste konpanse, pouse, ak rale nan pwen rupture espesifik.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0