Source

Grid system

Gamitin ang aming makapangyarihang mobile-first flexbox grid upang bumuo ng mga layout ng lahat ng hugis at laki salamat sa labindalawang column system, limang default na tumutugon na tier, Sass variable at mixin, at dose-dosenang mga paunang natukoy na klase.

Paano ito gumagana

Gumagamit ang grid system ng Bootstrap ng isang serye ng mga container, row, at column para mag-layout at mag-align ng content. Ito ay binuo gamit ang flexbox at ganap na tumutugon. Nasa ibaba ang isang halimbawa at isang malalim na pagtingin sa kung paano magkakasama ang grid.

Bago o hindi pamilyar sa flexbox? Basahin itong CSS Tricks flexbox guide para sa background, terminolohiya, mga alituntunin, at mga snippet ng code.

Isa sa tatlong column

<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 halimbawa sa itaas ay lumilikha ng tatlong magkaparehong lapad na mga column sa maliit, katamtaman, malaki, at mas malalaking device gamit ang aming mga paunang natukoy na mga klase sa grid. Nakasentro ang mga column na iyon sa page kasama ang magulang .container.

Kapag pinaghiwa-hiwalay ito, narito kung paano ito gumagana:

Nagbibigay ang mga container ng paraan upang igitna at pahalang na i-pad ang mga nilalaman ng iyong site. Gamitin .containerpara sa isang tumutugon na lapad ng pixel o .container-fluidpara sa width: 100%lahat ng viewport at laki ng device.
Ang mga row ay mga wrapper para sa mga column. Ang bawat column ay may pahalang padding(tinatawag na gutter) para sa pagkontrol sa espasyo sa pagitan nila. Pagkatapos ay kinokontra ito paddingsa mga row na may mga negatibong margin. Sa ganitong paraan, ang lahat ng nilalaman sa iyong mga column ay biswal na nakahanay sa kaliwang bahagi.
Sa layout ng grid, dapat ilagay ang content sa loob ng mga column at ang mga column lang ang maaaring maging agarang mga anak ng mga row.
Salamat sa flexbox, ang mga hanay ng grid na walang tinukoy widthay awtomatikong mag-i-layout bilang mga column na may pantay na lapad. Halimbawa, apat na instance ng .col-smbawat isa ay awtomatikong magiging 25% ang lapad mula sa maliit na breakpoint at pataas. Tingnan ang seksyong mga column ng auto-layout para sa higit pang mga halimbawa.
Isinasaad ng mga klase ng column ang bilang ng mga column na gusto mong gamitin sa posibleng 12 bawat row. Kaya, kung gusto mo ng tatlong magkapantay na lapad na column sa kabuuan, maaari mong gamitin ang .col-4.
Nakatakda ang mga column widthsa mga porsyento, kaya palagi silang tuluy-tuloy at may sukat na nauugnay sa kanilang pangunahing elemento.
Ang mga column ay may pahalang paddingupang lumikha ng mga gutter sa pagitan ng mga indibidwal na column, gayunpaman, maaari mong alisin ang marginmula sa mga row at paddingmula sa mga column na may .no-gutterssa .row.
Upang gawing tumutugon ang grid, mayroong limang grid breakpoint, isa para sa bawat tumutugon na breakpoint : lahat ng breakpoint (sobrang maliit), maliit, katamtaman, malaki, at sobrang laki.
Ang mga breakpoint ng grid ay batay sa mga query sa minimum na lapad ng media, ibig sabihin , nalalapat ang mga ito sa isang breakpoint na iyon at sa lahat ng nasa itaas nito (hal., .col-sm-4nalalapat sa maliit, katamtaman, malaki, at napakalaking device, ngunit hindi sa unang xsbreakpoint).
Maaari kang gumamit ng mga paunang natukoy na klase ng grid (tulad ng .col-4) o Sass mixin para sa higit pang semantic markup.

Magkaroon ng kamalayan sa mga limitasyon at mga bug sa paligid ng flexbox , tulad ng kawalan ng kakayahang gumamit ng ilang elemento ng HTML bilang mga flex container .

Mga pagpipilian sa grid

Habang ang Bootstrap ay gumagamit ng ems o rems para sa pagtukoy ng karamihan sa mga laki, pxang s ay ginagamit para sa mga grid breakpoint at lapad ng lalagyan. Ito ay dahil ang lapad ng viewport ay nasa mga pixel at hindi nagbabago sa laki ng font .

Tingnan kung paano gumagana ang mga aspeto ng Bootstrap grid system sa maraming device na may madaling gamiting talahanayan.

	Napakaliit < 576px	Maliit ≥576px	Katamtaman ≥768px	Malaki ≥992px	Sobrang laki ≥1200px
Max na lapad ng lalagyan	Wala (auto)	540px	720px	960px	1140px
Prefix ng klase	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# ng mga column	12
Lapad ng kanal	30px (15px sa bawat gilid ng column)
Nestable	Oo
Pag-order ng column	Oo

Auto-layout na mga column

Gumamit ng mga klase ng column na tukoy sa breakpoint para sa madaling pag-size ng column nang walang tahasang may bilang na klase tulad ng .col-sm-6.

Pantay na lapad

Halimbawa, narito ang dalawang grid layout na nalalapat sa bawat device at viewport, mula xshanggang xl. Magdagdag ng anumang bilang ng mga unit-less na klase para sa bawat breakpoint na kailangan mo at ang bawat column ay magiging parehong lapad.

1 ng 2

2 ng 2

1 ng 3

2 ng 3

3 ng 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 mga column na pantay-pantay ay maaaring hatiin sa maraming linya, ngunit mayroong Safari flexbox bug na pumigil dito na gumana nang walang tahasang flex-basiso border. Mayroong mga solusyon para sa mga mas lumang bersyon ng browser, ngunit hindi dapat kailanganin ang mga ito kung ikaw ay napapanahon.

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>

Pagtatakda ng isang lapad ng column

Ang auto-layout para sa mga column ng flexbox grid ay nangangahulugan din na maaari mong itakda ang lapad ng isang column at awtomatikong i-resize ang magkapatid na column sa paligid nito. Maaari kang gumamit ng mga paunang natukoy na klase ng grid (tulad ng ipinapakita sa ibaba), grid mixin, o inline na lapad. Tandaan na ang iba pang mga column ay magbabago ng laki anuman ang lapad ng gitnang column.

1 ng 3

2 sa 3 (mas malawak)

3 ng 3

1 ng 3

2 sa 3 (mas malawak)

3 ng 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 na nilalaman ng lapad

Gumamit col-{breakpoint}-autong mga klase sa laki ng mga column batay sa natural na lapad ng kanilang nilalaman.

1 ng 3

Variable na nilalaman ng lapad

3 ng 3

1 ng 3

Variable na nilalaman ng lapad

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

Pantay na lapad ng multi-row

Gumawa ng pantay na lapad na mga column na sumasaklaw sa maraming row sa pamamagitan ng paglalagay ng .w-100kung saan mo gustong masira ang mga column sa isang bagong linya. Gawin ang mga break na tumutugon sa pamamagitan ng paghahalo ng .w-100sa ilang tumutugon na mga kagamitan sa pagpapakita .

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>

Mga klaseng tumutugon

Kasama sa grid ng Bootstrap ang limang tier ng mga paunang natukoy na klase para sa pagbuo ng mga kumplikadong tumutugon na layout. I-customize ang laki ng iyong mga column sa sobrang maliit, maliit, katamtaman, malaki, o napakalaking device gayunpaman sa tingin mo ay angkop.

Lahat ng breakpoints

Para sa mga grid na pareho mula sa pinakamaliit na device hanggang sa pinakamalaki, gamitin ang .colat mga .col-*klase. Tukuyin ang isang may bilang na klase kapag kailangan mo ng partikular na laki ng column; kung hindi, huwag mag-atubiling manatili 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>

Nakasalansan sa pahalang

Gamit ang isang solong hanay ng mga .col-sm-*klase, maaari kang lumikha ng isang pangunahing sistema ng grid na nagsisimula nang nakasalansan at nagiging pahalang sa maliit na 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 and match

Ayaw mo bang mag-stack lang ang iyong mga column sa ilang grid tier? Gumamit ng kumbinasyon ng iba't ibang klase para sa bawat tier kung kinakailangan. Tingnan ang halimbawa sa ibaba para sa isang mas mahusay na ideya kung paano gumagana ang lahat.

.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 ay madaling maisaayos sa pamamagitan ng padding na partikular sa breakpoint at mga klase ng utility sa negatibong margin. Upang baguhin ang mga gutters sa isang partikular na row, ipares ang isang negatibong margin utility sa .rowat tumutugmang padding utility sa .cols. Maaaring kailanganin ding ayusin ang .containero magulang upang maiwasan ang hindi gustong pag-apaw, gamit ang muling pagtutugma ng padding utility..container-fluid

Narito ang isang halimbawa ng pag-customize ng Bootstrap grid sa malaking ( lg) breakpoint at sa itaas. Dinagdagan namin ang .colpadding gamit ang .px-lg-5, kinontra iyon sa .mx-lg-n5magulang .rowat pagkatapos ay inayos ang .containerwrapper gamit ang .px-lg-5.

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

Gumamit ng flexbox alignment utilities para patayo at pahalang na ihanay ang mga column.

Pahalang na linya

Isa sa tatlong column

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

Isa sa tatlong column

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

Pahalang na pagkakahanay

Isa sa dalawang column

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

Walang gutters

Maaaring alisin ang mga gutter sa pagitan ng mga column sa aming mga paunang natukoy na klase ng grid gamit ang .no-gutters. Inaalis nito ang mga negatibong margins mula sa .rowat ang pahalang paddingmula sa lahat ng mga column ng agarang bata.

Narito ang source code para sa paglikha ng mga istilong ito. Tandaan na ang mga override ng column ay nasasakupan sa mga unang column lang ng mga bata at tina-target sa pamamagitan ng attribute selector . Bagama't ito ay bumubuo ng isang mas partikular na tagapili, ang column padding ay maaari pa ring higit pang i-customize gamit ang mga spacing utilities .

Kailangan ng isang gilid-sa-gilid na disenyo? Ihulog ang magulang .containero .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Sa pagsasagawa, narito ang hitsura nito. Tandaan na maaari mong patuloy na gamitin ito sa lahat ng iba pang mga paunang natukoy na klase ng grid (kabilang ang mga lapad ng column, tumutugon na mga tier, muling pagkakaayos, at higit 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>

Pagbabalot ng column

Kung higit sa 12 column ang inilagay sa loob ng iisang row, ang bawat pangkat ng mga karagdagang column ay, bilang isang unit, magbalot sa isang bagong linya.

.col-9

.col-4
Dahil 9 + 4 = 13 > 12, ang 4-column-wide div na ito ay nababalot sa isang bagong linya bilang isang magkadikit na unit.

.col-6 Ang
mga kasunod na column ay nagpapatuloy sa bagong 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 column break

Ang paghahati ng mga column sa isang bagong linya sa flexbox ay nangangailangan ng isang maliit na hack: magdagdag ng elemento kung width: 100%saan mo gustong ibalot ang iyong mga column sa isang bagong linya. Karaniwan ito ay nagagawa sa maraming .rows, ngunit hindi lahat ng paraan ng pagpapatupad ay maaaring isaalang-alang ito.

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

Maaari mo ring ilapat ang break na ito sa mga partikular na breakpoint sa aming mga tumutugon na mga kagamitan sa pagpapakita .

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

Muling pag-aayos

Mag-order ng mga klase

Gumamit .order-ng mga klase para sa pagkontrol sa visual order ng iyong content. Ang mga klase ay tumutugon, kaya maaari mong itakda ang orderby breakpoint (hal., .order-1.order-md-2). May kasamang suporta para sa 1lahat ng 12limang grid tier.

Una, ngunit hindi nakaayos

Pangalawa, pero huli

Pangatlo, pero 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>

Mayroon ding tumutugon .order-firstat .order-lastmga klase na nagbabago orderng isang elemento sa pamamagitan ng paglalapat order: -1at order: 13( order: $columns + 1), ayon sa pagkakabanggit. Ang mga klase na ito ay maaari ding ihalo sa mga may bilang .order-*na klase kung kinakailangan.

Una, ngunit huli

Pangalawa, ngunit hindi nakaayos

Pangatlo, pero 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 ng mga column

Maaari mong i-offset ang mga column ng grid sa dalawang paraan: ang aming mga tumutugon .offset-na klase ng grid at ang aming mga margin utility . Ang mga klase ng grid ay sukat upang tumugma sa mga column habang ang mga margin ay mas kapaki-pakinabang para sa mabilis na mga layout kung saan ang lapad ng offset ay variable.

Offset na mga klase

Ilipat ang mga column sa kanan gamit ang mga .offset-md-*klase. Ang mga klase na ito ay nagdaragdag sa kaliwang margin ng isang column sa pamamagitan ng mga *column. Halimbawa, .offset-md-4gumagalaw .col-md-4sa apat na column.

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

Bilang karagdagan sa pag-clear ng column sa mga tumutugong breakpoint, maaaring kailanganin mong i-reset ang mga offset. Tingnan ito sa pagkilos sa halimbawa ng 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 margin utility

Sa paglipat sa flexbox sa v4, maaari mong gamitin ang mga margin utilities tulad ng .mr-autopuwersahin ang magkapatid na column na palayo sa isa't isa.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

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

Pugad

Upang i-nest ang iyong content sa default na grid, magdagdag ng bago .rowat hanay ng mga .col-sm-*column sa loob ng isang kasalukuyang .col-sm-*column. Ang mga nested row ay dapat na may kasamang hanay ng mga column na nagdaragdag ng hanggang 12 o mas kaunti (hindi kinakailangan na gamitin mo ang lahat ng 12 available na 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

Kapag gumagamit ng pinagmulang Sass file ng Bootstrap, mayroon kang opsyon na gumamit ng mga Sass variable at mixin para gumawa ng custom, semantic, at tumutugon na mga layout ng page. Ginagamit ng aming mga paunang natukoy na mga klase sa grid ang parehong mga variable at mixin upang magbigay ng isang buong hanay ng mga klase na handa nang gamitin para sa mabilis na tumutugon na mga layout.

Mga variable

Tinutukoy ng mga variable at mapa ang bilang ng mga column, ang lapad ng gutter, at ang media query point kung saan sisimulan ang mga lumulutang na column. Ginagamit namin ang mga ito upang bumuo ng mga paunang natukoy na klase ng grid na nakadokumento sa itaas, pati na rin para sa mga custom na mix na nakalista sa ibaba.

$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

Ginagamit ang mga mixin kasabay ng mga variable ng grid upang makabuo ng semantic CSS para sa mga indibidwal na column ng 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);

Halimbawa ng paggamit

Maaari mong baguhin ang mga variable sa sarili mong mga custom na value, o gamitin lang ang mga mixin kasama ng kanilang mga default na value. Narito ang isang halimbawa ng paggamit ng mga default na setting upang lumikha ng layout na may dalawang hanay na may pagitan.

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

Pangunahing nilalaman

Pangalawang nilalaman

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

Gamit ang aming built-in na grid na mga variable at mapa ng Sass, posibleng ganap na i-customize ang mga paunang natukoy na klase ng grid. Baguhin ang bilang ng mga tier, ang mga dimensyon ng query ng media, at ang lapad ng container—pagkatapos ay muling i-compile.

Mga haligi at kanal

Ang bilang ng mga grid column ay maaaring mabago sa pamamagitan ng Sass variable. $grid-columnsay ginagamit upang bumuo ng mga lapad (sa porsyento) ng bawat indibidwal na column habang $grid-gutter-widthitinatakda ang lapad para sa mga gutter ng column.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Mga tier ng grid

Ang paglipat sa kabila ng mga column mismo, maaari mo ring i-customize ang bilang ng mga grid tier. Kung gusto mo lamang ng apat na grid tier, i-update mo ang $grid-breakpointsat $container-max-widthssa isang bagay na tulad nito:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Kapag gumagawa ng anumang mga pagbabago sa mga variable o mapa ng Sass, kakailanganin mong i-save ang iyong mga pagbabago at muling i-compile. Ang paggawa nito ay maglalabas ng bagong hanay ng mga paunang natukoy na klase ng grid para sa mga lapad ng column, mga offset, at pag-order. Ia-update din ang mga responsive visibility utilities para magamit ang mga custom na breakpoint. Tiyaking itakda ang mga halaga ng grid sa px(hindi rem, em, o %).