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.

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

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.

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

Pantay na lapad ng multi-line

Lumikha ng pantay na lapad na mga column na sumasaklaw sa maraming linya 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 .w-100sa ilang tumutugon na mga kagamitan sa pagpapakita .

Nagkaroon ng Safari flexbox bug na pumigil dito na gumana nang walang tahasang flex-basiso border. May mga solusyon para sa mga mas lumang bersyon ng browser, ngunit hindi dapat kailanganin ang mga ito kung ang iyong mga target na browser ay hindi nahuhulog sa mga buggy na 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>

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.

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

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

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.

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

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

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

<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 hanay ng hilera

Gamitin ang mga tumutugong .row-cols-*klase upang mabilis na maitakda ang bilang ng mga column na pinakamahusay na nagbibigay ng iyong content at layout. Samantalang ang mga normal .col-*na klase ay nalalapat sa mga indibidwal na column (hal. .col-md-4), ang mga row column na klase ay nakatakda sa parent .rowbilang isang shortcut.

Gamitin ang mga row column na klase na ito upang mabilis na gumawa ng mga pangunahing layout ng grid o upang makontrol ang mga layout ng iyong card.

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

Maaari mo ring gamitin ang kasamang 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

Gumamit ng flexbox alignment utilities para patayo at pahalang na ihanay ang mga column. Hindi sinusuportahan ng Internet Explorer 10-11 ang patayong pag-align ng mga flex na item kapag ang flex container ay may min-heighttulad ng ipinapakita sa ibaba. Tingnan ang Flexbugs #3 para sa higit pang mga detalye.

Pahalang na linya

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

Pahalang na pagkakahanay

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

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

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.

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

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

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

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

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.

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

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

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

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

<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 {
  @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 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 %).