Kan mobile-first flexbox grid chak tak hmangin column sawm leh pahnih system, default responsive tier panga, Sass variable leh mixin, leh class ruat lawk tam tak avangin layout chi hrang hrang leh a lian zawng zawng siam rawh.
A hnathawh dan
Bootstrap-a grid system hian container, row leh column hrang hrang hmangin content layout leh align a siam a. Flexbox hmanga siam a ni a, fully responsive a ni. A hnuaia tarlan te hi entirnan leh grid inzawmkhawm dan thuk taka thlir a ni.
A chunga entirnan hian kan predefined grid class hmangin device tenau, lian, lian leh extra large-ah column zau zawng inang pathum a siam a. Chu column te chu page chhungah a laiah a awm a parent nen .container.
Breaking it down, hetiang hian a hnathawh dan chu hetiang hi a ni:
Container hian i site chhunga thil awmte chu center leh horizontal-a pad theihna tur kawng a pe a. .containerResponsive pixel width .container-fluidatan emaw width: 100%viewport leh device size zawng zawngah emaw hmang ang che .
Rows hi column hrang hranga wrapper a ni. Column tin hian paddingan inkar space control nan horizontal (gutter an tih) an nei vek a. Chu paddingchu negative margin nei row-ah te counteract a ni. Chutiang chuan i column-a thu awm zawng zawng chu veilam sir hnuaiah hmuh theihin a inrem vek a ni.
Grid layout-ah chuan content chu column chhungah dah tur a ni a, column chauh chu rows fate nghal thei a ni.
Flexbox vang hian grid column tarlan loh widthchuan automatic in equal width column angin a layout ang. Entirnan, instance pali of .col-smwill each automatically chu breakpoint te tak te atanga a chung lam atanga 25% zau a ni ang. Entirna dang chu auto-layout columns section -ah en rawh .
Column class-ah hian row khata column 12 awm thei zinga i hman duh zat a tarlang a. Chuvangin, equal-width column pathum across i duh chuan .col-4.
Column widths te hi percentage-a dah a nih avangin an parent element nena khaikhin chuan fluid leh size an nei reng a ni.
paddingColumn te hian column hrang hrang inkar gutter siam turin horizontal an nei a , mahse, marginfrom rows leh paddingfrom columns te chu .no-gutterson the hmangin i paih thei a .rowni.
Grid responsive tur chuan grid breakpoint panga a awm a, responsive breakpoint tin atan pakhat : breakpoint zawng zawng (extra small), small, medium, large, leh extra large.
Grid breakpoints hi minimum width media query-a innghat a ni a, chu breakpoint pakhat leh a chunga awm zawng zawngah hman a ni tihna a ni (eg, .col-sm-4device tenau, lian, lian, leh extra large-ah hman a ni a, mahse xsbreakpoint hmasa ber erawh a ni lo).
Bootstrap hian size tam zawk definite nan ems emaw s emaw a hmang laiin, s hi grid breakpoint leh container width atan hman a ni thung. Hei hi a chhan chu viewport width hi pixels a nih avangin font size nen a danglam lo .rempx
Bootstrap grid system aspect hrang hrangte chu device tam takah handy table hmanga hnathawh dan en rawh.
A tlem zawk <576px
A te ≥576px a ni
A laihawl ≥768px a ni
A lian ≥992px a ni
A lian zawk ≥1200px
Max container zau zawng
A awm lo (auto) .
540px a ni
720px a ni
960px a ni
1140px a ni
Class hmasa ber a ni
.col-
.col-sm-
.col-md-
.col-lg-
.col-xl-
# of column hrang hrang a awm
12 a ni
Gutter zau zawng
30px (column sir lehlamah 15px)
Nestable a ni
Awle
Column order tur a ni
Awle
Auto-layout theih a ni
.col-sm-6. _
A zau zawng inang vek
Entirnan, hetah hian grid layout pahnih kan rawn tarlang a, chu chu device leh viewport tinah hman theih a ni a, from xsto xl. Breakpoint i mamawh apiang atan unit-less class engzat pawh dah la, column tin chu a zau zawng inang vek a ni ang.
1 of 2 a ni
2 of 2 a ni
1 of 3 a ni
2 of 3 a ni
3 atanga 3 a ni
Equal-width column te hi line tam takah then theih a ni a, mahse Safari flexbox bug a awm a , hei hian explicit flex-basisor border. Browser version hlui zawk tan chuan workaround a awm a, mahse i up-to-date chuan a tul tur a ni lo.
Ban
Ban
Ban
Ban
Column pakhat zau zawng setting
Flexbox grid column-te tana auto-layout hian column pakhat zau zawng i set thei a, a chhehvela unau column-te chu automatic-in a size i siamsak thei bawk. Grid class ruat lawk (a hnuaia tarlan ang hian), grid mixin, emaw inline width emaw i hmang thei bawk. Column dangte chu center column zau zawng engzat pawhin an size an thlak ang tih hre reng ang che.
1 of 3 a ni
2 of 3 (a zau zawk) .
3 atanga 3 a ni
1 of 3 a ni
2 of 3 (a zau zawk) .
3 atanga 3 a ni
A zau zawng danglam thei content
Class hmangin col-{breakpoint}-autocolumn te chu an content awm dan natural width atanga size tur a ni.
1 of 3 a ni
A zau zawng danglam thei content
3 atanga 3 a ni
1 of 3 a ni
A zau zawng danglam thei content
3 atanga 3 a ni
A zau zawng inang vek multi-row
.w-100Column te chu line thara break i duhna hmunah dahin row tam tak huam thei column zau zawng inang vek siam rawh . Break te chu responsive takin siam la , chu chu responsive display utilities.w-100 thenkhat nen mix la .
col
col
col
col
Responsive class hrang hrang neih a ni
Bootstrap-a grid-ah hian complex responsive layout siamna tur predefined class tier panga a awm a. I column te size chu extra small, small, medium, large, or extra large device ah i duh angin customize rawh.
Breakpoint zawng zawng
Device te ber atanga a lian ber thlenga grid inang tak tak tan chuan .coland .col-*class te hi hmang ang che. Column lian bik i mamawh hunah number nei class tarlang rawh; chutiang a nih loh chuan, zalen takin .col.
col
col
col
col
col-8 a ni
col-4 a ni
Stack a ni a, horizontal a ni
Class set khat hmangin .col-sm-*basic grid system i siam thei a, chu chu stack-a tan a ni a, breakpoint te tak te ( sm)-ah chuan horizontal-ah a chang thei a ni.
col-sm-8 a ni
col-sm-4 a ni
col-sm a ni
col-sm a ni
col-sm a ni
Mix leh match
I column te chu grid tier thenkhatah stack mai mai turin i duh lo em ni? A tul angin tier tin tan class hrang hrang inzawmkhawm hmang ang che. A hnathawh zawng zawng hriatna tha zawk hriat duh chuan a hnuaia entîrna hi en rawh.
Kan grid class ruat lawk tawha column inkar gutter awmte chu .no-gutters. Hei hian immediate children column zawng zawng atanga negative margins .rowleh horizontal te chu a paih chhuak vek a ni.padding
Edge-to-edge design i mamawh em? Nu leh pa .containeremaw .container-fluid.
Practice-ah chuan hetiang hian a lang. Hriat tur chu hei hi predefined grid class dang zawng zawng (column zau zawng, responsive tiers, reorder, leh a dangte pawh tel) nen i hmang chhunzawm thei ang.
.col-12 .col-sm-6 .col-md-8 tih a ni
.col-6 .col-md-4 tih a ni
Column a hrual a
Row khat chhunga column 12 aia tam dah a nih chuan, extra column group tinte chu unit pakhat angin line tharah an khuh ang.
.col-9 a ni
.col-4
9 + 4 = 13 > 12 a nih avangin he 4-column-wide div hi line tharah contiguous unit pakhat angin a wrapped a.
.col-6
A hnuaia column te chu line thar zawh hian an chhunzawm zel a.
Column a break a
Flexbox-a line thara column break tur chuan hack tlemte a ngai a: width: 100%i column te chu line thara wrap duhna hmun apiangah element dah la. A tlangpuiin hei hi multiple .rows hmanga tihhlawhtlin a ni a, mahse implementation method zawng zawng hian hei hi a account thei lo.
I thu awmte hmuh theiha awm dan.order- tur control nan class hmang ang che . Heng class te hi responsive an nih avangin by breakpoint (eg, ) te chu i set thei a ni. Grid tier panga zawng zawngah through support a huam vek.order.order-1.order-md-2112
Pakhatna, mahse order loh
Pahnihna, mahse a hnuhnung ber
Pathumna, mahse pakhatna
Responsive .order-firstleh .order-lastclass te pawh orderelement pakhat apply order: -1leh order: 13( order: $columns + 1) hmanga thlak danglam thei class te pawh a awm bawk. .order-*Heng class te hi a tul angin number pek class te nen pawh intermix theih a ni bawk .
Pakhatna, mahse a hnuhnung ber
Pahnihna, mahse order loh
Pathumna, mahse pakhatna
Column offset dan tur
Grid column te hi kawng hnih in offset theih a ni: kan responsive .offset-grid class te leh kan margin utilities te . Grid class te hi column nena inmil turin size an siam a, margin erawh chu offset zau zawng danglam theihna hmuna quick layout atan a tangkai zawk thung.
Offset class hrang hrang a awm
.offset-md-*Class hmangin column te chu dinglamah sawn rawh . Heng class te hian column pakhat veilam margin chu column hrang hrangin an tipung a *. Entirnan, column pali chungah .offset-md-4a kal thei..col-md-4
.col-md-4 tih a ni
.col-md-4 .offset-md-4 tih a ni
.col-md-3 .offset-md-3 tih a ni
.col-md-3 .offset-md-3 tih a ni
.col-md-6 .offset-md-3 tih a ni
Responsive breakpoint-a column clearing bakah hian offsets reset a ngai mai thei. Hei hi grid entirnan action-ah en rawh .
.col-sm-5 .col-md-6 tih a ni
A rilru a buai em em a, a rilru a hah em em bawk a. .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col-md-5 .col-lg-6. A rilru a hah lutuk chuan a rilru a buai em em a
A rilru a buai em em a, a rilru a hah em em bawk a. .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
Margin utilities te pawh a awm
v4-a flexbox-a kal hian margin utilities i hmang thei ang .mr-auto, chu chu sibling column-te chu pakhat leh pakhat inkara inhlat tir ang chi hi a ni.
.col-md-4 tih a ni
.col-md-4 .ml-a hman tur a ni
.col-md-3 .ml-md-auto hmanga siam a ni
.col-md-3 .ml-md-auto hmanga siam a ni
.col-auto .mr-auto tih a ni
.col-auto hmanga tih a ni
Nesting tih a ni
Default grid hmanga i content nest tur chuan column awmsa chhungah column thar .rowleh set dah la . Nested row-ah hian column set 12 emaw a aia tlem emaw add tur a awm tur a ni (column awm 12 awm zawng zawng hman vek a ngai lo)..col-sm-*.col-sm-*
Level 1: .col-sm-9 ah hian a awm a
Level 2: .col-8 .col-sm-6 ah hian a awm a
Level 2: .col-4 .col-sm-6 ah hian a awm a
Sass mixin te a awm
Bootstrap-a source Sass files i hman hian Sass variable leh mixins hmangin custom, semantic, leh responsive page layout siam theihna option i nei a ni. Kan predefined grid class te hian heng variable leh mixin ang chiah te hi hmangin fast responsive layouts atan ready-to-use class suite pum pui an pe thin.
Variables te pawh a awm
Variables leh maps hian column awm zat, gutter zau zawng, leh floating column tanna tur media query point a tichiang a ni. Hengte hi a chunga kan document tawh predefined grid class te siam nan kan hmang a, chubakah a hnuaia custom mixins tarlan te tan pawh kan hmang bawk.
Mixins te a awm
Mixins te hi grid variable te nen inzawmin grid column hrang hrang tan semantic CSS siam nan hman a ni.
Entirna hman dan
Variable te chu i custom value ah i siam danglam thei a, a nih loh leh mixins te chu an default value nen i hmang mai thei bawk. Hetah hian default settings hmanga two-column layout siam dan tur entirnan kan rawn tarlang e, a inkarah gap awmin.
Thupui ber
Secondary thupui
Grid chu a customize a
Kan built-in grid Sass variable leh maps hmang hian grid class ruahman lawk te chu a pumin kan customize theih a ni. Tier awm zat, media query dimension leh container zau zawng te thlak rawh—chutah recompile leh rawh.
Column leh gutter te a awm bawk
Grid column awm zat hi Sass variable hmangin siam danglam theih a ni. $grid-columnschu column pakhat zel zau zawng (za zela 10-a chhut) siam nan hman a ni a $grid-gutter-width, column gutter-te tan zau zawng a set thung.
Grid tiers te a awm
Column ngei pawh kal pelin grid tier awm zat pawh i duh angin i siam thei bawk. Grid tier pali chauh i duh chuan $grid-breakpointsand $container-max-widthschu hetiang hian i update ang:
Sass variable emaw maps emaw i tihdanglam dawnin i tihdanglam chu i save a ngai ang a, i recompile a ngai ang. Chutianga tih chuan column width, offset, leh ordering atan predefined grid class set thar tak a output ang. Responsive visibility utilities te pawh custom breakpoints te hman theih turin update a ni bawk ang. Grid value te chu px(not rem, em, or %) ah set ngei ngei tur a ni.