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ụ dị obere, ọkara, nnukwu na mgbakwunye buru ibu site na iji 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ị mmiri mmiri mgbe niile na nha nha na 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 nke ọma dị 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>

Ahịrị ọtụtụ nha nha obosara

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-100na ụfọdụ ngwa ngosi na-anabata .

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 ihe nchọgharị gị lekwasịrị anya adabaghị n'ụdị ụdị ahụhụ.

Kọl

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

Ị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ị mee nha ogidi 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>

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

Akwadoro na kehoraizin

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

Kọl-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>

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

.kọl-md-8

.Col-6 .Col-md-4

.kọl-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-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>

Ọgba mmiri

Enwere ike ịhazigharị olulu mmiri site na padding akọwapụtara nke ọma na klaasị oke adịghị mma. Ka ịgbanwee gọọmentị dị n'ahịrị enyere, jikọta akụrụngwa oke na-adịghị mma .rowna ngwa padding dabara na .cols. Nne .containerma ọ bụ nna ma ọ bụ nne ma ọ bụ .container-fluidnna nwere ike imeziwanye ya ka ịzenarị oke mmiri na-achọghị, na-eji ngwa nkpuchi dakọtara ọzọ.

Nke a bụ ọmụmaatụ nke ịhazi grid Bootstrap na nnukwu ( lg) nkwụsịtụ na n'elu. Anyị ejirila , .colwere .px-lg-5mebie nke ahụ na .mx-lg-n5nne .rowma ọ bụ nna wee mezie ihe .containermkpuchi ahụ na .px-lg-5.

padding kọlụm omenala

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

Ahịrị ogidi

Jiri .row-cols-*klaasị na-anabata ngwa ngwa tọọ ọnụọgụ ogidi ndị kacha nye ọdịnaya na nhazi gị ngwa ngwa. Ebe .col-*klaasị nkịtị na-emetụta kọlụm n'otu n'otu (dịka ọmụmaatụ, .col-md-4), klaasị ahịrị ahịrị ka edobere na nne na nna .rowdịka ụzọ mkpirisi.

Jiri klaasị ahịrị ahịrị ndị a ka imepụta usoro grid ngwa ngwa ma ọ bụ jikwaa okirikiri nhọrọ ukwuu kaadị gị.

Ogidi

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

Ogidi

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

Ogidi

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

Ogidi

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

Ogidi

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

Ị nwekwara ike iji Sass mixin na-esote 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);
  }
}

Nhazi

Jiri akụrụngwa nhazi flexbox iji kwado kọlụm kwụ ọtọ na kwụ n'ahịrị. Internet Explorer 10-11 anaghị akwado nhazi kwụ ọtọ nke ihe ndị na-agbanwe agbanwe mgbe akpa mgbanwe nwere otu min-heightdị ka egosiri n'okpuru. Lee Flexbugs #3 maka nkọwa ndị ọzọ.

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-sm-6 .Col-md-8

.Col-6 .Col-md-4

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

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 n'ahịrị ọhụrụ.

.kọl-9

.col-4
Ebe ọ bụ na 9 + 4 = 13> 12, nke a 4-ogidi-wide div na-anakọta 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="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>

Agbaji kọlụm

Ịgbajie ogidi gaa n'ahịrị ọhụrụ na flexbox chọrọ obere mbanye anataghị ikike: tinye otu 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="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>

Ị 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="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>

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ụ na DOM, enweghị iwu etinyere

Nke abụọ na DOM, nwere usoro ka ukwuu

Nke atọ na DOM, nwere usoro nke 1

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

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

Nke mbụ na DOM, nyere iwu ikpeazụ

Nke abụọ na DOM, enweghị iwu

Nke atọ na DOM, nyere iwu nke mbụ

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

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 o kwekọọ 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="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>

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 n'atụmatụ 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>

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

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

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 {
  @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);
  }
}

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 emepụta obosara (na pasent) nke kọlụm nke ọ bụla ma $grid-gutter-widthna-edozi obosara maka 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ụ %).