Source

Sistema sa grid

Gamita ang among kusgan nga mobile-first flexbox grid aron magtukod 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 guide para sa background, terminolohiya, giya, ug code snippet.

Usa sa tulo ka kolum

<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 pahalang ang mga sulud sa imong site. Gamita .containerpara sa responsive nga pixel width o .container-fluidpara width: 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. Dayon paddingkini 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 widthnga awtomatik nga pag-layout ingon nga managsama nga gilapdon nga mga kolum. Pananglitan, upat ka mga higayon sa .col-smmatag usa awtomatikong 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.
Gipakita sa mga klase sa kolum ang gidaghanon sa mga kolum nga gusto nimong gamiton gikan sa posible nga 12 matag laray. Mao nga, kung gusto nimo ang tulo nga managsama nga gilapdon nga mga kolum, mahimo nimong gamiton ang .col-4.
Ang mga kolum widthgitakda 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 paddingaron mahimo ang mga kanal taliwala sa indibidwal nga mga kolum, bisan pa, mahimo nimong tangtangon ang margingikan sa mga laray ug paddinggikan sa mga kolum nga adunay .no-gutterssa .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-4magamit sa gagmay, medium, dako, ug mas dako nga mga himan, apan dili ang unang xsbreakpoint).
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 ems o rems para sa pagdeterminar sa kadaghanang gidak-on, pxs 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 xssa xl. Idugang ang bisan unsang gidaghanon sa mga klase nga wala’y yunit alang sa matag breakpoint nga imong kinahanglan ug ang matag kolum parehas ang gilapdon.

1 sa 2

2 sa 2

1 sa 3

2 sa 3

3 sa 3

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

Ang parehas nga gilapdon nga mga kolum mahimong mabuak sa daghang mga linya, apan adunay usa ka Safari flexbox bug nga nagpugong niini sa pagtrabaho nga wala’y klaro flex-basiso border. Adunay mga solusyon alang sa mas daan nga mga bersyon sa browser, apan dili kini kinahanglan kung ikaw labing bag-o.

Kolum

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Pagbutang sa usa ka kolum nga gilapdon

Ang auto-layout para sa flexbox grid columns nagpasabot usab nga mahimo nimong itakda ang gilapdon sa usa ka column ug ang mga igsoon nga column awtomatik nga mag-resize sa palibot niini. Mahimo nimong gamiton ang predefined grid classes (sama sa gipakita sa ubos), grid mixins, o inline widths. Timan-i nga ang ubang mga kolum magbag-o bisan unsa pa ang gilapdon sa tunga nga kolum.

1 sa 3

2 sa 3 (mas lapad)

3 sa 3

1 sa 3

2 sa 3 (mas lapad)

3 sa 3

<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}-autoang mga klase sa pagsukod sa mga kolum base sa natural nga gilapdon sa ilang sulod.

1 sa 3

Variable gilapdon sa sulod

3 sa 3

1 sa 3

Variable gilapdon sa sulod

3 sa 3

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

Parehas nga gilapdon nga multi-row

Paghimo og managsama nga gilapdon nga mga kolum nga nagsangkad sa daghang mga laray pinaagi sa pagsal-ot sa .w-100kung diin nimo gusto ang mga kolum nga mabuak sa usa ka bag-ong linya. Himoa nga ang mga break responsive pinaagi sa pagsagol sa .w-100uban sa pipila ka responsive display utilities .

col

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

Responsive nga mga klase

Ang grid sa Bootstrap naglakip sa lima ka hut-ong sa gitakda nang daan nga mga klase alang sa pagtukod og mga komplikadong responsive nga mga layout. Ipasibo ang gidak-on sa imong mga column sa sobra nga gamay, gamay, medium, dako, o sobra ka dako nga mga device bisan unsa ang imong nakita nga angay.

Tanan nga breakpoints

Para sa mga grid nga parehas gikan sa pinakagamay nga device hangtod sa kinadak-an, gamita ang .colug .col-*mga klase. Ipiho ang usa ka 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.

col

col-8

col-4

<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).

col-sm-8

col-sm-4

col-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.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-12 col-md-8">.col-12 .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 .rowug pagpares sa padding utilities sa .cols. Ang .containero .container-fluidginikanan 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 .colpadding sa .px-lg-5, gikontra kana sa .mx-lg-n5sa ginikanan .rowug dayon gi-adjust ang .containerwrapper sa .px-lg-5.

Custom nga column padding

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

Pag-align

Gamita ang flexbox alignment utilities sa vertical ug horizontally align nga mga column.

Bertikal nga paglinya

Usa sa tulo ka kolum

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

Usa sa tulo ka kolum

<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

Usa sa duha ka kolum

<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 margins gikan sa .rowug ang pinahigda paddinggikan sa tanan nga mga kolum sa mga bata.

Ania ang source code sa paghimo niini nga mga estilo. Timan-i nga ang mga override sa kolum gisakupan 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 .containero .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).

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .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.

.col-9

.col-4
Sukad sa 9 + 4 = 13 > 12, kining 4-kolum nga gilapdon nga div maputos sa bag-ong linya isip usa ka magkadugtong nga yunit.

.col-6
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 &gt; 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 .rowmga s, apan dili tanan nga pamaagi sa pagpatuman makatubag niini.

.col-6 .col-sm-3

<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 .

.col-6 .col-sm-4

<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 orderby breakpoint (pananglitan, .order-1.order-md-2). Naglakip sa suporta alang 1sa 12tibuuk nga lima ka mga lebel sa grid.

Una, apan wala ma-order

Ikaduha, pero katapusan

Ikatulo, apan una

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

Adunay usab mga responsive .order-firstug .order-lastmga klase nga nagbag-o ordersa usa ka elemento pinaagi sa pag-apply order: -1ug order: 13( order: $columns + 1), matag usa. Kini nga mga klase mahimo usab nga isagol sa gi-numero nga .order-*mga klase kung gikinahanglan.

Una, pero kataposan

Ikaduha, pero dili ma-order

Ikatulo, apan una

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but 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 magkatugma 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-4naglihok .col-md-4sa upat ka mga kolum.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<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 .

.col-sm-5 .col-md-6

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

.col-sm-6 .col-md-5 .col-lg-6

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

<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-autosa pagpugos sa mga kolum sa igsoon nga layo sa usag usa.

.col-md-4

.col-md-4 .ml-awto

.col-md-3 .ml-md-awto

.col-auto .mr-auto

.col-awto

<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 .rowug 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).

Level 1: .col-sm-9

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

<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 {
  width: 800px;
  @include make-container();
}

.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);
  }
}

Pangunang sulod

Ikaduha nga sulod

<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-columnsgigamit sa paghimo sa mga gilapdon (sa porsyento) sa matag indibidwal nga kolum samtang $grid-gutter-widthnagtakda 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-breakpointsug $container-max-widthssa 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 %).