Source

Sistemụ grid

Jiri grid flexbox mkpanaaka anyị siri ike wulite nhazi nke ụdị na nha niile maka sistemụ kọlụm iri na abụọ, ọkwa nnabata ise, mgbanwe Sass na mixins, yana ọtụtụ klaasị eburu ụzọ kọwaa.

Ka o si arụ ọrụ

Sistemụ grid Bootstrap na-eji usoro akpa, ahịrị, na kọlụm iji hazie na mezie ọdịnaya. Ejiri flexbox rụọ ya ma na-anabata ya nke ọma. N'okpuru ebe a bụ ihe atụ na nleba anya nke ọma ka grid si ejikọta ọnụ.

Ọhụrụ ka ọ bụ nke ị mabeghị na flexbox? Gụọ ntuziaka flexbox CSS aghụghọ a maka ndabere, okwu okwu, ntuziaka na snippets koodu.

Otu n'ime ogidi atọ

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

Ọmụmaatụ a dị n'elu na-emepụta kọlụm atọ nhata nhata na ngwaọrụ obere, ọkara, nnukwu na mgbakwunye buru ibu na-eji klas grid anyị eburu ụzọ kọwaa. Ogidi ndị ahụ gbadoro ụkwụ na ibe ya na nne na nna .container.

N'ịkwatu ya, nke a bụ ka ọ si arụ ọrụ:

Akpa na-enye ụzọ isi tinye ihe dị n'ime saịtị gị n'ahịrị na n'ụzọ kwụ ọtọ. Jiri .containermaka obosara pikselụ na-anabata ma ọ bụ .container-fluidmaka width: 100%n'ofe nlele na nha ngwaọrụ niile.
Ahịrị bụ ihe mkpuchi maka ogidi. Kọlụm ọ bụla nwere kehoraizin padding(a na-akpọ gutter) maka ịchịkwa ohere dị n'etiti ha. A paddingna-emegide nke a n'ahịrị ndị nwere oke na-adịghị mma. N'ụzọ dị otú a, ihe niile dị na kọlụm gị na-adakọba n'anya n'akụkụ aka ekpe.
Na nhazi grid, a ga-edobe ọdịnaya n'ime kọlụm na naanị kọlụm nwere ike ịbụ ụmụaka nke ahịrị ozugbo.
N'ihi flexbox, kọlụm grid na-enweghị nke akọwapụtara widthga-edobe ozugbo dị ka kọlụm obosara nhata. Dịka ọmụmaatụ, ihe atụ anọ nke .col-smọ bụla ga-abụ 25% n'obosara site na obere nkwụsịtụ na elu. Hụ ngalaba ogidi nhazi onwe maka ihe atụ ndị ọzọ.
Klas kọlụm na-egosi ọnụọgụ kọlụm ị ga-achọ iji n'ime 12 enwere ike n'otu ahịrị. Yabụ, ọ bụrụ na ịchọrọ ogidi atọ hà nhata n'ofe, ịnwere ike iji .col-4.
A na- edobe kọlụm widthna pasentị, ya mere, ha na-adị mgbe niile ma na-aba uru n'ihe metụtara mmewere nne na nna ha.
Ogidi nwere kehoraizin paddingiji mepụta gọọlụ n'etiti kọlụm n'otu n'otu, agbanyeghị, ị nwere ike wepu ya marginna ahịrị yana paddingna kọlụm nwere .no-guttersna .row.
Iji mee ka grid na-anabata ya, e nwere ebe nkwụsịtụ grid ise, otu maka ebe nkwụsịtụ ọ bụla na-anabata : ihe nkwụsịtụ niile (extra small), obere, ọkara, nnukwu na nnukwu.
Ebe nkwụsịtụ grid dabere na ajụjụ mgbasa ozi obosara kacha nta, nke pụtara na ha na-emetụta otu ebe nkwụsịtụ na ndị niile dị n'elu ya (dịka ọmụmaatụ, .col-sm-4na-emetụta obere, ọkara, nnukwu na nnukwu ngwaọrụ, mana ọ bụghị ebe xsnkwụsị mbụ).
Ị nwere ike iji klaasị grid akọwapụtagoro (dị ka .col-4) ma ọ bụ mixins Sass maka akara nhụsianya ọzọ.

Mara oke na chinchi gburugburu flexbox , dị ka enweghị ike iji ụfọdụ HTML ọcha dị ka flex containers .

Nhọrọ grid

Ọ bụ ezie na Bootstrap na-eji ems ma ọ bụ rems maka ịkọwapụta ọtụtụ nha, pxa na-eji s maka ebe nkwụsịtụ grid na obosara akpa. Nke a bụ n'ihi na obosara ihe nlegharị anya dị na pikselụ ma ọ dịghị agbanwe n'ogo mkpụrụedemede .

Hụ ka akụkụ nke sistemụ grid Bootstrap si arụ ọrụ n'ofe ngwaọrụ nwere tebụl aka.

	Obere obere <576px	Obere ≥576px	Ọkara ≥768px	Nnukwu ≥992px	Nnukwu nnukwu ≥1200px
Obosara akpa kacha	Ọ nweghị (akpaaka)	540px	720px	960px	1140px
Nganiihu klaasị	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# nke ogidi	12
Obosara gutter	30px (15px n'akụkụ ọ bụla nke kọlụm)
Akwụsịghị ya	Ee
Ntụnye kọlụm	Ee

Ogidi nhazi onwe

Jiri klaasị kọlụm gbawara agbawa maka nha kọlụm dị mfe na-enweghị klaasị akọwapụtara ọnụ ka .col-sm-6.

Ha nhata-obosara

Dịka ọmụmaatụ, ebe a bụ nhazi grid abụọ na-emetụta ngwaọrụ ọ bụla na nlegharị anya, site xsna gaa na xl. Tinye klaasị ọ bụla na-erughị nkeji maka ebe nkwụsịtụ ọ bụla ịchọrọ na kọlụm ọ bụla ga-abụ otu obosara.

1 nke 2

2 nke 2

1 nke 3

2 nke 3

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

Enwere ike ịgbaji ogidi obosara nhata n'ọtụtụ ahịrị, mana enwere ahụhụ flexbox Safari nke gbochiri nke a ịrụ ọrụ na-enweghị ihe doro anya flex-basisma ọ bụ border. Enwere ihe nleba anya maka ụdị ihe nchọgharị ochie, mana ha ekwesịghị ịdị mkpa ma ọ bụrụ na ị na-emelite.

Ogidi

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

Ịtọ ntọala otu obosara kọlụm

Nhazi akpaaka maka kọlụm flexbox pụtakwara na ị nwere ike ịtọ obosara nke otu kọlụm wee mee ka ogidi nwanne gbanwee ya ozugbo. Ị nwere ike iji klaasị grid akọwapụtagoro (dị ka egosiri n'okpuru), mixins grid, ma ọ bụ obosara ahịrị. Rịba ama na ogidi ndị ọzọ ga-agbanwe nha n'agbanyeghị obosara nke kọlụm etiti.

1 nke 3

2 n'ime 3 (obosara)

3 nke 3

1 nke 3

2 n'ime 3 (obosara)

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

Ọdịnaya obosara na-agbanwe agbanwe

Jiri col-{breakpoint}-autoklaasị were nha kọlụm dabere na obosara okike nke ọdịnaya ha.

1 nke 3

Ọdịnaya obosara na-agbanwe agbanwe

3 nke 3

1 nke 3

Ọdịnaya obosara na-agbanwe agbanwe

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

Ahịrị ọtụtụ obosara nhata

Mepụta ogidi obosara nhata nke na-agbatị ọtụtụ ahịrị site na ịtinye .w-100ebe ịchọrọ ka ogidi ndị ahụ gbajie n'ahịrị ọhụrụ. Mee nkwụsịtụ ahụ ka ọ dị mma site na ịgwakọta .w-100ya na ụfọdụ ngwa ngosi na-anabata .

Kọl

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

Klas na-anabata

Grid nke Bootstrap gụnyere ọkwa ise nke klaasị akọwapụtagoro maka iwulite okirikiri nhọrọ ukwuu na-anabata. Hazie nha nke kọlụm gị na obere obere, obere, ọkara, nnukwu ma ọ bụ nnukwu ngwaọrụ agbanyeghị na ọ dabara gị.

Ebe nkwụsịtụ niile

Maka grids bụ otu site na ngwaọrụ kacha nta ruo na nke kachasị, jiri .colna .col-*klaasị. Ezipụta klaasị nwere nọmba mgbe ịchọrọ kọlụm nwere oke nha; ma ọ bụghị ya, nweere onwe gị ịrapara na .col.

Kọl

kọl-8

kọl-4

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

Akwadoro na kehoraizin

N'iji otu .col-sm-*klaasị otu, ị nwere ike ịmepụta usoro grid bụ isi nke na-amalite na-ekpo ọkụ tupu ọ ghọọ kehoraizin na n'obere nkwụsịtụ ( sm).

Kọl-sm-8

col-sm-4

col-sm

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

Gwakọta na dakọtara

Ịchọghị ka kọlụm gị kwụkọ naanị n'ụfọdụ ọkwa grid? Jiri ngwakọta nke klaasị dị iche iche maka ọkwa ọ bụla dịka achọrọ. Lee ihe atụ n'okpuru ka ị nweta echiche ka mma ka ọ na-arụ ọrụ.

.Col-12 .Col-md-8

.Col-6 .Col-md-4

.kọl-6

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

Nhazi

Jiri akụrụngwa nhazi flexbox iji kwado kọlụm kwụ ọtọ na kwụ n'ahịrị.

Nhazi kwụ ọtọ

Otu n'ime ogidi atọ

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

Otu n'ime ogidi atọ

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

Nkwanye kwụ ọtọ

Otu n'ime ogidi abụọ

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

Enweghị olulu mmiri

Enwere ike iwepụ gọọlụ n'etiti kọlụm dị na klaasị grid anyị eburu ụzọ wepụ .no-gutters. Nke a na-ewepụ ihe na-adịghị mma marginsite .rowna na kehoraizin paddingsi na kọlụm ụmụaka niile.

Nke a bụ koodu isi mmalite maka imepụta ụdị ndị a. Rụba ama na nbibi kọlụm bụ naanị kọlụm ụmụaka mbụ ma ezubere ya site na nhọpụta àgwà . Ọ bụ ezie na nke a na-ewepụta onye ahọpụtara akọwapụtara nke ọma, padding kọlụm ka nwere ike ịhazi ya site na iji ngwa spacing .

Chọrọ imewe akụkụ ruo n'ọnụ? Hapụ nne .containerma ọ bụ nna ma ọ bụ .container-fluid.

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

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

Na omume, nke a bụ ka ọ dị. Rịba ama na ị nwere ike ịga n'ihu na-eji nke a na klaasị grid ndị ọzọ akọpụtagoro (gụnyere obosara kọlụm, ọkwa na-anabata, ndezigharị, na ndị ọzọ).

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

Mkpuchi kọlụm

Ọ bụrụ na etinyere ihe karịrị ogidi iri na abụọ n'ime otu ahịrị, otu ọ bụla nke kọlụm agbakwunyere ga-, dị ka otu nkeji, kechie na ahịrị ọhụrụ.

.kọl-9

.col-4
Ebe ọ bụ na 9 + 4 = 13> 12, nke a 4-ogidi-wide div na-ekechie n'elu ọhụrụ ahịrị dị ka otu contiguous unit.

.col-6
Ogidi ndị na-esote na-aga n'ihu n'ahịrị ọhụrụ ahụ.

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

Agbaji kọlụm

Ịgbajie ogidi gaa n'ahịrị ọhụrụ na flexbox chọrọ obere mbanye anataghị ikike: tinye ihe mmewere na width: 100%ebe ọ bụla ịchọrọ kechie ogidi gị na ahịrị ọhụrụ. Dị ka ọ na-adịkarị, a na-eme nke a site na ọtụtụ .rows, mana ọ bụghị usoro mmejuputa iwu ọ bụla nwere ike ịza nke a.

.kọl-6 .Col-sm-3

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

Ị nwekwara ike itinye oge ezumike a na ebe nkwụsịtụ kpọmkwem site na iji ihe ngosi ngosi anyị .

.kọl-6 .Col-sm-4

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

Na-atụgharịgharị

ịtụ klaasị

Jiri .order-klas maka ịchịkwa usoro anya nke ọdịnaya gị. Klas ndị a na-anabata ya, yabụ ị nwere ike ịtọ ebe ordernkwụsịtụ (dịka ọmụmaatụ, .order-1.order-md-2). Gụnyere nkwado maka n'ofe ọkwa grid ise niile 1.12

Nke mbụ, mana enweghị iwu

Nke abụọ, ma ikpeazụ

Nke atọ, ma nke mbụ

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

Enwekwara nnabata .order-firstna .order-lastklaasị na-agbanwe orderihe mmewere site na itinye order: -1na order: 13( order: $columns + 1), n'otu n'otu. Enwere ike jikọta klaasị ndị a na .order-*klaasị ọnụọgụ dị ka achọrọ.

Mbụ, ma ikpeazụ

Nke abụọ, mana enweghị usoro

Nke atọ, ma nke mbụ

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

Kọlụm na-emezigharị

Ị nwere ike mebie kọlụm grid n'ụzọ abụọ: .offset-klaasị grid anyị na-anabata ya na akụrụngwa oke anyị . A na-ahazi klaasị grid ka ọ dakọtara na kọlụm ebe oke ala bara uru maka nhazi ngwa ngwa ebe obosara nke nkwụghachi na-agbanwe.

Klas kwụsịrị

Bugharịa ogidi gaa n'aka nri site na iji .offset-md-*klaasị. Klas ndị a na-abawanye oke aka ekpe nke kọlụm site na *kọlụm. Dịka ọmụmaatụ, .offset-md-4na-ebugharị .col-md-4n'elu ogidi anọ.

.kọl-md-4

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

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

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

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

Na mgbakwunye na ikpochapụ kọlụm na ebe nkwụsịtụ na-anabata, ọ nwere ike ịdị mkpa ka ịtọgharịa nkwụghachi. Hụ nke a ka ọ na-eme na ihe atụ 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="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>

Ngwa ngwa oke

Site na ịkwaga flexbox na v4, ị nwere ike iji akụrụngwa oke dị .mr-autoka ịmanye kọlụm nwanne pụọ n'otu n'otu.

.kọl-md-4

.col-md-4 .ml-akpaaka

.col-md-3 .ml-md-akpaaka

.col-auto .mr-auto

.col-auto

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

Akwu

Iji grid ndabara tinye akwu ọdịnaya gị, tinye nke ọhụrụ .rowna nhazi .col-sm-*kọlụm n'ime .col-sm-*kọlụm dị adị. Ahịrị akwụkwụ kwesịrị ịgụnye otu kọlụm gbakwụnye ihe ruru 12 ma ọ bụ ole na ole (ọ chọghị ka ị jiri kọlụm 12 niile dị).

Ọkwa 1: .col-sm-9

Ọkwa 2: .col-8 .col-sm-6

Ọkwa 2: .col-4 .col-sm-6

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

Ngwakọta Sass

Mgbe ị na-eji faịlụ Sass isi mmalite Bootstrap, ị nwere nhọrọ nke iji Sass variables na mixins mepụta nhazi ihu akwụkwọ omenala, nkọwa na nke na-anabata. Klaasị grid anyị akọwapụtagoro na-eji otu mgbanwe na mixins ndị a iji nye otu klaasị akwadoro iji maka nhazi ngwa ngwa na-anabata ya.

Mgbanwe

Mgbanwe na maapụ na-ekpebi ọnụọgụ nke kọlụm, obosara gotter na ebe ajụjụ mgbasa ozi ga-amalite ogidi ndị na-ese n'elu mmiri. Anyị na-eji ndị a iji wepụta klaasị grid akọwapụtara n'elu, yana maka mixins omenala edepụtara n'okpuru.

$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
);

Ngwakọta

A na-eji mixins na njikọta yana mgbanwe grid iji mepụta CSS ntụgharị uche maka kọlụm grid nke ọ bụla.

// 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);

Ojiji ọmụmaatụ

Ị nwere ike gbanwee mgbanwe ndị ahụ ka ọ bụrụ ụkpụrụ omenala nke gị, ma ọ bụ jiri mixins na ụkpụrụ ndabara ha. Nke a bụ ọmụmaatụ nke iji ntọala ndabara iji mepụta nhazi kọlụm abụọ nwere oghere n'etiti.

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

Isi ọdịnaya

Ọdịnaya nke abụọ

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

Na-ahazi grid

Iji grid Sass arụnyere na maapụ anyị, ọ ga-ekwe omume ịhazi klaasị grid akọwapụtachara kpamkpam. Gbanwee ọnụ ọgụgụ nke ọkwa, akụkụ ajụjụ mgbasa ozi na obosara akpa - wee chịkọtaghachi.

Ogidi na gotters

Enwere ike gbanwee ọnụọgụ nke kọlụm grid site na mgbanwe Sass. $grid-columnsa na-eji ewepụta obosara (na pasent) nke kọlụm nke ọ bụla ebe ọ na $grid-gutter-width-enye ohere ka obosara nkwụsịtụ-kpọmkwem nke kewara n'ofe padding-leftna padding-rightmaka gọọlụ kọlụm.

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

Ọkwa grid

N'ịgafe ogidi ndị ahụ n'onwe ha, ị nwekwara ike hazie ọnụọgụgụ nke grid. Ọ bụrụ na ịchọrọ naanị ọkwa grid anọ, ị ga-emelite ya $grid-breakpointsna $container-max-widthsihe dịka nke a:

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

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

Mgbe ị na-eme mgbanwe ọ bụla na mgbanwe Sass ma ọ bụ maapụ, ị ga-achọ ịchekwa mgbanwe gị wee chịkọta ya. Ime nke a ga-ewepụta klas ọhụrụ grid akọwapụtagoro maka obosara kọlụm, mwepu na ịtụ. A ga-emelitekwa akụrụngwa visibiliti na-anabata iji jiri ebe nkwụsịtụ omenala. Gbaa mbọ hụ na ịtọọ ụkpụrụ grid na px(ọ bụghị rem, em, ma ọ bụ %).