in English

Ogidi

Mụta ka esi agbanwe kọlụm site na iji nhọrọ ole na ole maka itinye n'usoro, ịtụ, na imezigharị ekele maka sistemụ grid flexbox anyị. Na mgbakwunye, hụ ka esi eji klaasị kọlụm jikwaa obosara nke ihe na-abụghị grid.

Na ibe a

Welie isi elu! Jide n'aka na ị ga -ebu ụzọ gụọ ibe Grid tupu ịbanye n'ime otu esi agbanwe ma hazie kọlụm grid gị.

Otú ha si arụ ọrụ

Ogidi na-ewuli elu n'ime ụlọ flexbox nke grid. Flexbox pụtara na anyị nwere nhọrọ maka ịgbanwe kọlụm n'otu n'otu yana gbanwee otu kọlụm n'ọkwa ahịrị . Ị na-ahọrọ ka kọlụm si eto, gbadaa, ma ọ bụ gbanwee ọzọ.
Mgbe ị na-ewu usoro grid, ọdịnaya niile na-aga na kọlụm. Ndị isi nke grid Bootstrap na-esi na akpa gaa n'ahịrị ruo na kọlụm gaa na ọdịnaya gị. N'oge ndị a na-adịghị ahụkebe, ị nwere ike jikọta ọdịnaya na kọlụm, mana mara na enwere ike ị nweta nsonaazụ na-atụghị anya ya.
Bootstrap gụnyere klaasị akọwapụtagoro maka imepụta nhazi ngwa ngwa, na-anabata. N'iji nkwụsịtụ isii na kọlụm iri na abụọ na ọkwa grid ọ bụla, anyị nwere ọtụtụ klaasị arụgorolarị maka ịmepụta nhazi nke ịchọrọ. Enwere ike gbanyụọ nke a site na Sass ma ọ bụrụ na ịchọrọ.

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ọ

html

<div class="container text-center">
  <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ọ

html

<div class="container text-center">
  <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ụọ

html

<div class="container text-center">
  <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 class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </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ụ.

html

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

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <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 isii niile 1.5

Nke mbụ na DOM, enweghị iwu etinyere

Nke abụọ na DOM, nwere usoro ka ukwuu

Nke atọ na DOM, nwere usoro nke 1

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      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: 6, 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ụ

html

<div class="container text-center">
  <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 ọ 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

html

<div class="container text-center">
  <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 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

html

<div class="container text-center">
  <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ị .me-autoka ịmanye kọlụm nwanne pụọ n'otu n'otu.

.kọl-md-4

.col-md-4 .ms-akpaaka

.col-md-3 .ms-md-akpaaka

.col-auto .me-auto

.col-auto

html

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Klas kọlụm kwụ ọtọ

Enwere .col-*ike iji klaasị na mpụga a .rowiji nye mmewere otu obosara. Mgbe ọ bụla a na-eji klas kọlụm dị ka ụmụaka na-abụghị kpọmkwem nke ahịrị, a na-ahapụkwa paddings.

.kọl-3: obosara nke 25%

.col-sm-9: obosara nke 75% n'elu sm breakpoint

html

<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

Enwere ike iji klaasị a yana akụrụngwa iji mepụta onyonyo sere n'elu na-anabata. Jide n'aka na ị kechie ọdịnaya n'ime ihe .clearfixmkpuchi iji kpochapụ ihe na-ese n'elu mmiri ma ọ bụrụ na ederede dị mkpụmkpụ.

Paragraf nke ederede idobe. Anyị na-eji ya ebe a iji gosi ojiji nke klaasị clearfix. Anyị na-agbakwunye nkebi ahịrịokwu ole na ole na-enweghị isi ebe a iji gosi ka ogidi ndị ahụ si emekọrịta ebe a na onyonyo sere n'elu mmiri.

Dịka ị na-ahụ paragraf ndị a nke ọma kechie ihe onyonyo a sere n'elu. Ugbu a chee echiche ka nke a ga-esi dị na ụfọdụ ọdịnaya dị na ebe a, karịa naanị ederede idobe ebe a na-agwụ ike nke na-aga n'ihu ma na-aga n'ihu, mana n'ezie anaghị ebute ozi ọ bụla. Ọ na-ewe naanị ohere, e kwesịghịkwa ịgụ ya.

Ma, lee, ị ka nọ, ka na-anọgidesi ike n'ịgụ ederede ebe a, na-atụ anya maka nghọta ndị ọzọ, ma ọ bụ ụfọdụ akwa ọdịnaya nke Ista zoro ezo. A egwuregwu, ikekwe. O di nwute, o nweghi nke ahu ebe a.

html

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>