Sistema sa grid
Gamita ang among kusgan nga mobile-first flexbox grid aron maghimo mga layout sa tanan nga mga porma ug gidak-on salamat sa usa ka dose ka sistema sa kolum, lima ka mga default nga responsive nga lebel, mga variable ug mix sa Sass, ug dosena sa mga predefined nga klase.
Giunsa kini paglihok
Ang sistema sa grid sa Bootstrap naggamit sa usa ka serye sa mga sudlanan, mga laray, ug mga kolum sa paghan-ay ug pag-align sa sulod. Gitukod kini gamit ang flexbox ug hingpit nga mosanong. Sa ubos mao ang usa ka pananglitan ug usa ka lawom nga pagtan-aw kung giunsa ang grid nagkahiusa.
Bag-o o dili pamilyar sa flexbox? Basaha kini nga CSS Tricks flexbox nga giya alang sa background, terminolohiya, mga giya, ug mga snippet sa code.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Ang pananglitan sa ibabaw nagmugna og tulo nga managsama nga gilapdon nga mga kolum sa gagmay, medium, dako, ug labi ka dako nga mga aparato gamit ang among gitakda nang daan nga mga klase sa grid. Kadtong mga kolum gisentro sa panid sa ginikanan .container
.
Ang pagbungkag niini, ania kung giunsa kini paglihok:
- Ang mga sudlanan naghatag usa ka paagi aron masentro ug pahigda ang sulud sa imong site. Gamita
.container
para sa responsive nga pixel width o.container-fluid
parawidth: 100%
sa tanang viewport ug device sizes. - Ang mga laray maoy mga wrapper alang sa mga kolum. Ang matag kolum adunay pinahigda
padding
(gitawag nga gutter) aron makontrol ang luna tali kanila. Dayonpadding
kini gikontra sa mga laray nga adunay negatibo nga mga margin. Niining paagiha, ang tanan nga sulud sa imong mga kolum biswal nga gipahiangay sa wala nga bahin. - Sa layout sa grid, ang sulod kinahanglang ibutang sulod sa mga kolum ug ang mga kolum lang ang mahimong mga anak sa mga laray.
- Salamat sa flexbox, ang mga kolum sa grid nga wala’y piho
width
nga awtomatik nga pag-layout ingon nga managsama nga gilapdon nga mga kolum. Pananglitan, upat ka mga higayon sa.col-sm
matag usa awtomatik nga mahimong 25% ang gilapdon gikan sa gamay nga breakpoint ug pataas. Tan-awa ang seksyon sa mga kolum sa auto-layout alang sa dugang nga mga pananglitan. - Ang mga klase sa kolum nagpakita sa gidaghanon sa mga kolum nga gusto nimong gamiton gikan sa posible nga 12 kada laray. Busa, kung gusto nimo ang tulo nga managsama nga gilapdon nga mga kolum, mahimo nimong gamiton ang
.col-4
. - Ang mga kolum
width
gitakda sa mga porsyento, mao nga kini kanunay nga likido ug gidak-on nga may kalabotan sa ilang ginikanan nga elemento. - Ang mga kolum adunay pinahigda
padding
aron mahimo ang mga kanal taliwala sa indibidwal nga mga kolum, bisan pa, mahimo nimong tangtangon angmargin
gikan sa mga laray ugpadding
gikan sa mga kolum nga adunay.no-gutters
sa.row
. - Aron mahimong responsive ang grid, adunay lima ka grid breakpoints, usa alang sa matag responsive breakpoint : tanang breakpoints (sobrang gamay), gamay, medium, dako, ug sobra nga dako.
- Ang mga breakpoint sa grid gibase sa minimum nga gilapdon sa media nga mga pangutana, nagpasabot nga kini magamit sa usa ka breakpoint ug sa tanan nga anaa sa ibabaw niini (pananglitan,
.col-sm-4
magamit sa gagmay, medium, dako, ug mas dako nga mga himan, apan dili ang unangxs
breakpoint). - Mahimo nimong gamiton ang predefined grid classes (sama sa
.col-4
) o Sass mixins para sa dugang semantic markup.
Pagmatngon sa mga limitasyon ug mga bug sa palibot sa flexbox , sama sa kawalay katakus sa paggamit sa pipila ka mga elemento sa HTML isip flex container .
Mga kapilian sa grid
Samtang ang Bootstrap naggamit ug em
s o rem
s para sa pagdeterminar sa kadaghanang gidak-on, px
s kay gigamit para sa grid breakpoints ug container widths. Kini tungod kay ang gilapdon sa viewport anaa sa mga pixel ug dili mausab sa gidak-on sa font .
Tan-awa kung giunsa ang mga aspeto sa Bootstrap grid system nga nagtrabaho sa daghang mga aparato nga adunay usa ka magamit nga lamesa.
Mas gamay <576px |
Gamay nga ≥576px |
Medium ≥768px |
Dako ≥992px |
Labaw nga dako ≥1200px |
|
---|---|---|---|---|---|
Max gilapdon sa sudlanan | Wala (awtomatik) | 540px | 720px | 960px | 1140 px |
Prefix sa klase | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# sa mga kolum | 12 | ||||
Lapad sa kanal | 30px (15px sa matag kilid sa kolum) | ||||
Nestable | Oo | ||||
Pag-order sa kolum | Oo |
Auto-layout nga mga kolum
Gamita ang mga klase sa kolum nga espesipiko sa breakpoint alang sa sayon nga pagsukod sa kolum nga walay klaro nga numero nga klase sama sa .col-sm-6
.
Parehas nga gilapdon
Pananglitan, aniay duha ka grid layout nga magamit sa matag device ug viewport, gikan xs
sa xl
. Pagdugang bisan unsang gidaghanon sa mga klase nga wala’y yunit alang sa matag breakpoint nga imong kinahanglan ug ang matag kolum parehas ang gilapdon.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Parehas nga gilapdon nga daghang linya
Paghimo og managsama nga gilapdon nga mga kolum nga nagsangkad sa daghang mga linya pinaagi sa pagsal-ot .w-100
kung diin nimo gusto ang mga kolum nga mabuak sa usa ka bag-ong linya. Himoa nga ang mga break responsive pinaagi sa pagsagol .w-100
sa pipila ka responsive display utilities .
Adunay usa ka Safari flexbox bug nga nagpugong niini sa pagtrabaho nga walay klaro flex-basis
o border
. Adunay mga solusyon alang sa mas daan nga mga bersyon sa browser, apan dili kini kinahanglan kung ang imong target nga mga browser dili mahulog sa mga buggy nga bersyon.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
Pagbutang sa usa ka kolum nga gilapdon
Ang auto-layout para sa mga kolum sa flexbox grid nagpasabot usab nga mahimo nimong itakda ang gilapdon sa usa ka kolum ug ang mga kolum sa mga igsoon awtomatik nga magbag-o sa palibot niini. Mahimo nimong gamiton ang predefined grid classes (sama sa gipakita sa ubos), grid mixins, o inline nga gilapdon. Timan-i nga ang ubang mga kolum magbag-o bisan unsa pa ang gilapdon sa tunga nga kolum.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Variable gilapdon sa sulod
Gamita col-{breakpoint}-auto
ang mga klase sa pagsukod sa mga kolum base sa natural nga gilapdon sa ilang sulod.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Responsive nga mga klase
Ang grid sa Bootstrap naglakip sa lima ka hut-ong sa mga predefined nga mga klase alang sa pagtukod og mga komplikadong responsive nga mga layout. Ipasibo ang gidak-on sa imong mga kolum sa sobra ka gamay, gamay, medium, dako, o sobra ka dako nga mga himan bisan unsa ang imong nakita nga angay.
Tanan nga breakpoints
Para sa mga grids nga parehas gikan sa pinakagamay nga device hangtod sa kinadak-an, gamita ang .col
ug .col-*
mga klase. Ipiho ang usa ka gi-numero nga klase kung kinahanglan nimo ang usa ka partikular nga gidak-on nga kolum; kay kon dili, mobati nga gawasnon nga magpabilin sa .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
Gipatong ngadto sa pinahigda
Gamit ang usa ka hugpong sa .col-sm-*
mga klase, makahimo ka og usa ka batakang sistema sa grid nga nagsugod sa stacked ug mahimong pinahigda sa gamay nga breakpoint ( sm
).
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Mix ug match
Dili gusto nga ang imong mga kolum mag-stack lang sa pipila ka mga grid tier? Paggamit og kombinasyon sa lain-laing mga klase alang sa matag ang-ang kon gikinahanglan. Tan-awa ang panig-ingnan sa ubos alang sa usa ka mas maayo nga ideya kung giunsa kini tanan molihok.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Mga kanal
Ang mga kanal mahimong tubagon nga i-adjust pinaagi sa breakpoint-specific padding ug negatibo nga margin utility classes. Aron mausab ang mga kanal sa usa ka linya, ipares ang usa ka negatibo nga margin utility sa .row
ug pagpares sa padding utilities sa .col
s. Ang .container
o .container-fluid
ginikanan mahimo nga kinahanglan nga i-adjust usab aron malikayan ang dili gusto nga pag-awas, gamit ang pag-usab nga pagpares sa padding utility.
Ania ang usa ka pananglitan sa pag-customize sa Bootstrap grid sa dako nga ( lg
) breakpoint ug sa ibabaw. Gidugangan namo ang .col
padding sa .px-lg-5
, gikontra kana sa .mx-lg-n5
sa ginikanan .row
ug dayon gi-adjust ang .container
wrapper sa .px-lg-5
.
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
</div>
</div>
Mga kolum sa linya
Gamita ang mga responsive .row-cols-*
nga mga klase aron dali nga mabutang ang gidaghanon sa mga kolum nga labing maayo nga maghatag sa imong sulud ug layout. Samtang ang normal nga .col-*
mga klase magamit sa indibidwal nga mga kolum (pananglitan, .col-md-4
), ang mga row column nga mga klase gibutang sa ginikanan .row
ingon usa ka shortcut.
Gamita kini nga mga row column nga mga klase aron dali nga makahimo og sukaranan nga mga layout sa grid o aron makontrol ang imong mga layout sa kard.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Mahimo usab nimo gamiton ang kauban nga Sass mixin row-cols()
,:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
Pag-align
Gamita ang flexbox alignment utilities sa vertical ug horizontally align nga mga column. Ang Internet Explorer 10-11 wala nagsuporta sa bertikal nga pag-align sa mga butang nga flex kung ang flex nga sudlanan adunay min-height
sama sa gipakita sa ubos. Tan-awa ang Flexbugs #3 para sa dugang nga mga detalye.
Bertikal nga paglinya
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
Horizontal nga pag-align
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Walay mga kanal
Ang mga kanal taliwala sa mga kolum sa among gitakda nang daan nga mga klase sa grid mahimong matangtang gamit ang .no-gutters
. Gikuha niini ang negatibo nga margin
s gikan sa .row
ug ang pinahigda padding
gikan sa tanan nga mga kolum sa mga bata.
Ania ang source code sa paghimo niini nga mga estilo. Timan-i nga ang mga pag-override sa kolum gisakupan lamang sa unang mga kolum sa mga bata ug gipunting pinaagi sa tigpili sa hiyas . Samtang nagmugna kini og usa ka mas espesipikong tigpili, ang column padding mahimo pa nga ipasibo sa mga spacing utilities .
Kinahanglan ang usa ka sulud sa sulud nga disenyo? Ihulog ang ginikanan .container
o .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
Sa praktis, ania ang hitsura niini. Timan-i nga mahimo nimong ipadayon ang paggamit niini sa tanan nga uban pang gitakda nang daan nga mga klase sa grid (lakip ang mga gilapdon sa kolum, mga responsive nga lebel, pag-order usab, ug uban pa).
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Pagputos sa kolum
Kung labaw pa sa 12 ka mga kolum ang ibutang sa sulod sa usa ka laray, ang matag grupo sa dugang nga mga kolum, isip usa ka yunit, ibutang sa usa ka bag-ong linya.
Sukad sa 9 + 4 = 13 > 12, kining 4-kolum nga gilapdon nga div maputos sa bag-ong linya isip usa ka magkadugtong nga yunit.
Ang sunod nga mga kolum nagpadayon sa bag-ong linya.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>
Mga guba sa kolum
Ang pagbuak sa mga kolum sa bag-ong linya sa flexbox nanginahanglan usa ka gamay nga hack: pagdugang usa ka elemento width: 100%
kung diin nimo gusto nga ibalot ang imong mga kolum sa usa ka bag-ong linya. Kasagaran kini nahimo nga adunay daghang .row
mga s, apan dili tanan nga pamaagi sa pagpatuman makatubag niini.
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
Mahimo usab nimo nga i-apply kini nga break sa piho nga mga breakpoint gamit ang among responsive display utilities .
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>
Pag-order pag-usab
Pag-order sa mga klase
Gamita .order-
ang mga klase alang sa pagkontrolar sa biswal nga han-ay sa imong sulod. Kini nga mga klase responsive, aron mahimo nimong itakda ang order
by breakpoint (pananglitan, .order-1.order-md-2
). Naglakip sa suporta alang 1
sa 12
tanan nga lima ka mga lebel sa grid.
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-12">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
Adunay usab mga responsive .order-first
ug .order-last
mga klase nga nagbag-o order
sa usa ka elemento pinaagi sa paggamit order: -1
ug order: 13
( order: $columns + 1
), matag usa. Kini nga mga klase mahimo usab nga isagol sa gi-numero nga .order-*
mga klase kung gikinahanglan.
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>
Pag-offset sa mga kolum
Mahimo nimong i-offset ang mga column sa grid sa duha ka paagi: ang among responsive .offset-
grid classes ug among margin utilities . Ang mga klase sa grid gisukod aron mohaum sa mga kolum samtang ang mga margin mas mapuslanon alang sa dali nga mga layout diin ang gilapdon sa offset variable.
Offset nga mga klase
Ibalhin ang mga kolum sa tuo gamit ang .offset-md-*
mga klase. Kini nga mga klase nagdugang sa wala nga margin sa usa ka kolum pinaagi sa *
mga kolum. Pananglitan, .offset-md-4
naglihok .col-md-4
sa upat ka mga kolum.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
Agi og dugang sa paghawan sa kolum sa mga responsive nga breakpoints, kinahanglan nimo nga i-reset ang mga offset. Tan-awa kini sa aksyon sa pananglitan sa grid .
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>
Mga gamit sa margin
Sa paglihok sa flexbox sa v4, mahimo nimong gamiton ang mga margin utilities sama .mr-auto
sa pagpugos sa mga kolum sa igsoon nga layo sa usag usa.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
Nagsalag
Aron ibutang ang imong sulod sa default grid, pagdugang og bag-o .row
ug set sa .col-sm-*
mga column sulod sa kasamtangan nga .col-sm-*
column. Ang mga nested row kinahanglang maglakip ug set sa mga column nga modugang hangtod sa 12 o mas gamay pa (dili kinahanglan nga gamiton nimo ang tanang 12 ka available nga column).
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
Sass mixins
Kung gigamit ang gigikanan sa Bootstrap nga mga file nga Sass, adunay ka kapilian sa paggamit sa mga variable ug mix sa Sass aron makahimo og kostumbre, semantiko, ug responsive nga mga layout sa panid. Ang among gitakda nang daan nga mga klase sa grid naggamit niining parehas nga mga variable ug mixin aron mahatagan ang usa ka tibuuk nga hugpong sa andam nga gamiton nga mga klase alang sa paspas nga pagtubag nga mga layout.
Mga variable
Ang mga variable ug mga mapa nagtino sa gidaghanon sa mga kolum, ang gilapdon sa gutter, ug ang punto sa pangutana sa media diin magsugod ang naglutaw nga mga kolum. Gigamit namo kini aron makamugna ang mga predefined grid classes nga nadokumento sa ibabaw, ingon man para sa custom mixins nga gilista sa ubos.
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
Mixins
Ang mga mixin gigamit kauban ang mga variable sa grid aron makamugna og semantic CSS alang sa indibidwal nga mga kolum sa grid.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
Pananglitan sa paggamit
Mahimo nimong usbon ang mga variable sa imong kaugalingon nga naandan nga mga kantidad, o gamita lang ang mga mixin sa ilang mga default nga kantidad. Ania ang usa ka pananglitan sa paggamit sa default nga mga setting aron makahimo og duha ka kolum nga layout nga adunay gintang tali.
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
Pag-customize sa grid
Gamit ang among built-in nga grid nga Sass nga mga variable ug mapa, posible nga hingpit nga ipasibo ang gitakda nang daan nga mga klase sa grid. Usba ang gidaghanon sa mga hut-ong, ang mga dimensyon sa pangutana sa media, ug ang gilapdon sa sudlanan—dayon i-compile pag-usab.
Mga kolum ug kanal
Ang gidaghanon sa mga kolum sa grid mahimong usbon pinaagi sa Sass variables. $grid-columns
gigamit sa paghimo sa mga gilapdon (sa porsyento) sa matag indibidwal nga kolum samtang $grid-gutter-width
nagtakda sa gilapdon alang sa mga gutter sa kolum.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Mga hut-ong sa grid
Ang paglihok lapas sa mga kolum mismo, mahimo usab nimo ipasibo ang gidaghanon sa mga tier sa grid. Kung gusto nimo upat ra nga grid tier, imong i-update ang $grid-breakpoints
ug $container-max-widths
sa usa ka butang nga sama niini:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Kung maghimo ug bisan unsang mga pagbag-o sa mga variable o mapa sa Sass, kinahanglan nimo nga i-save ang imong mga pagbag-o ug i-compile pag-usab. Ang pagbuhat sa ingon magpagawas usa ka bag-ong set sa gitakda nang daan nga mga klase sa grid alang sa mga gilapdon sa kolum, mga offset, ug pag-order. Ang responsive visibility utilities ma-update usab aron magamit ang custom breakpoints. Siguruha nga ibutang ang mga kantidad sa grid sa px
(dili rem
, em
, o %
).