in English

Kolonw

Aw ye kuluw ladilancogo dɔn ni sugandiliw bolomafaraw ye ɲɔgɔndɛmɛ, sigicogo, ani ɲɔgɔndanw na k’a sababu kɛ an ka flexbox grid system ye. Ka fara o kan, a lajɛ cogo min na baara bɛ kɛ ni kuluw ka kalasi ye walasa ka fɛnw bonya minnu tɛ grid ye.

Nin ɲɛ in kan

Kungolow bɛ wuli! Aw ye aw jija ka Grid ɲɛ kalan fɔlɔ sani aw ka aw yɛrɛ su ji la aw ka grid kuluw ladilancogo n’u ladilancogo la.

U bɛ baara kɛ cogo min na

Kolonw bɛ jɔ grid ka flexbox architecture kan. Flexbox kɔrɔ ye ko sugandiliw bɛ an bolo ka kulu kelen-kelen caman Changer ani ka kulu kuluw ladilan jirisunw hakɛ la . I bɛ kolomayɔrɔw falen cogo min na, u bɛ dɔgɔya cogo min na, walima u bɛ fɛn caman Changer cogo wɛrɛ la, i bɛ o sugandi.
Ni jatebɔlanw bɛ jɔ, kɔnɔkow bɛɛ bɛ taa kuluw kɔnɔ. Bootstrap ka grid ka hierarchy bɛ bɔ minɛn na ka taa jiri la ka taa kulu la ka taa i ka kɔnɔkow la. Tuma dɔw la, aw bɛ se ka kɔnɔkow ni kolomayɔrɔw fara ɲɔgɔn kan, nka aw k’a dɔn ko kɔlɔlɔw bɛ se ka sɔrɔ minnu ma laɲini.
Bootstrap kɔnɔ, kalan minnu ɲɛfɔlen don ka kɔn, olu bɛ sɔrɔ walasa ka layidu teliya, jaabiw dilan. Ni kariyɔrɔ wɔɔrɔ ani kulu tan ni fila bɛ grid tier kelen-kelen bɛɛ la, an ye kalan tan ni caman jɔ kaban aw ye walasa k’aw sago labɛnw dilan. O bɛ se ka bali Sass fɛ n’i b’a fɛ.

Alignment (labɛnni).

Baara kɛ ni flexbox alignment utilities ye walasa ka kolonw labɛn ka ɲɛ ani ka u labɛn ka ɲɛ.

Labɛnni jɔlen

Kolon saba dɔ la kelen

html ye

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

Kolon saba dɔ la kelen

html ye

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

Alignment horizontal (Jɛɲɔgɔnya tilennen).

Kolon fila dɔ la kelen

html ye

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

Kolonw sirili

Ni kulu minnu ka ca ni 12 ye, olu bilala jirisun kelen kɔnɔ, kulu wɛrɛw kulu kelen-kelen bɛɛ bɛna, i n’a fɔ yɔrɔ kelen, ka siri tigɛli kura kan.

.kol-9 ye

.col-4
Komin 9 + 4 = 13 > 12, nin div 4-kolon-kɔnɔ in bɛ siri tigɛli kura kan i n’a fɔ unit kelen min bɛ ɲɔgɔn kan.

.col-6
Kolon minnu bɛ tugu ɲɔgɔn kɔ, olu bɛ tɛmɛ tigɛli kura kan.

html ye

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

Kolon bɛ kari

Kolonw kari ka taa layini kura la flexbox kɔnɔ, o bɛ hakɛ fitinin dɔ de wajibiya: width: 100%i b’a fɛ k’i ka kuluw siri yɔrɔ o yɔrɔ la ka fɛn dɔ fara tigɛli kura kan. A ka c’a la o bɛ Kɛ ni .rows caman ye, nka waleyali fɛɛrɛ bɛɛ tɛ Se ka jatebla Kɛ o la.

.koli-6 .kol-sm-3

html ye

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

aw bɛ se fana ka nin lafiɲɛbɔ in kɛ lafiɲɛbɔ kɛrɛnkɛrɛnnenw na ni an ka jaabi jiralanw ye .

.koli-6 .kol-sm-4

html ye

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

Segin ka sigi sen kan

Kalansow komandi

Baara kɛ ni .order-kalanw ye walasa ka i ka kɔnɔkow sigicogo yecogo kɔlɔsi. Nin kalan ninnu bɛ jaabi di, o la aw bɛ se ka orderby breakpoint (misali la, .order-1.order-md-2). A bɛ dɛmɛ don ka 1tɛmɛn ka 5tɛmɛn grid tiers wɔɔrɔ bɛɛ kan.

Fɔlɔ DOM kɔnɔ, yamaruya si ma kɛ

Filanan DOM la, ni komandiba ye

Sabanan DOM la, ni komandi ye 1 ye

html ye

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

A fana bɛ jaabi .order-firstni .order-lastkalasi minnu bɛ fɛn dɔ Changer orderni waleyali order: -1ye ani order: 6, o cogo la. O kalanw fana bɛ se ka ɲagami ni .order-*kalansenw ye minnu jate bɛ kɛ i n’a fɔ a mago bɛ cogo min na.

Fɔlɔ DOM kɔnɔ, komandi laban

Filanan DOM la, min ma yamaruya

Sabanan DOM la, komandi fɔlɔ

html ye

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

Kolonw (offset) kɛli

Aw bɛ se ka grid kolonw offset cogo fila la: an ka jaabiw .offset-grid classes ani an ka margin utilities . Grid classes (jatebɔlanw) hakɛ bɛ bonya walasa ka bɛn kuluw ma k’a sɔrɔ margins (dakunw) nafa ka bon kosɛbɛ layidu teliya la yɔrɔ minnu na offset (fɔlikan) bonya bɛ ɲɔgɔn ta.

Offset kalanw

Aw bɛ kuluw wuli ka taa kinin fɛ ni .offset-md-*kalanw ye. O kalasiw bɛ dɔ Fàra kulu dɔ kinin fɛ dakun kan *kuluw fɛ. Misali la, .offset-md-4a bɛ taa .col-md-4kulu naani kan.

.kol-md-4 ye

.kol-md-4 .fɔcogo-md-4

.kol-md-3 .fɔcogo-md-3

.kol-md-6 .fɔcogo-md-3

html ye

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

Ka fara kolomaw jɛyali kan jaabiw tiɲɛniyɔrɔw la, i bɛ se ka offsetw labɛn kokura. aw ye nin lajɛ wale la ja misali la .

.koli-sm-5 .kol-md-6

.kol-sm-5 .fɔli-sm-2 .kol-md-6 .fɔcogo-md-0

.kol-sm-6 .kol-md-5 .kol-lg-6

.kol-sm-6 .kol-md-5 .fɔli-md-2 .koli-lg-6 .fɔli-lg-0

html ye

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

Margin nafamafɛnw

Ni 'yɔrɔ bɛ flexbox la v4 kɔnɔ, i bɛ Se ka baara Kɛ ni margin utilities ye i n'a fɔ .me-autoka balimakɛw ka kuluw Wajibiya ka Bɔ ɲɔgɔn na.

.kol-md-4 ye

.kol-md-4 .ms-auto ka baara ye

.kol-md-3 .ms-md-auto ka baara ye

.col-auto .ne-auto ka baara ye

.kol-otomatiki

html ye

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

Kolon kalan minnu bɛ kɛ u yɛrɛ ma

Kalansow .col-*fana bɛ Se ka Kɛ a kɔkan .rowwalasa ka fɛn dɔ bonya kɛrɛnkɛrɛnnen Di. Tuma o tuma ni kolosinsinnanw bɛ baara kɛ i n’a fɔ jirisun dɔ denw minnu tɛ tilennen ye, paddingw bɛ bɔ yen.

.col-3: a bonya ye 25% ye .

.col-sm-9 : a bonya ye 75% ye sm kariyɔrɔ sanfɛ

html ye

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

Kalansow bɛ se ka baara kɛ ɲɔgɔn fɛ ni nafalanw ye walasa ka ja wulilenw dilan minnu bɛ jaabi di. Aw ye aw jija ka kɔnɔkow siri fɛn dɔ .clearfixla walasa ka flot (jibɔlan) jɛya ni sɛbɛnni ka surun.

Yɔrɔ-sɛbɛnni dakun dɔ. An bɛ baara Kɛ n'a ye yan walasa ka clearfix kalasi baarakɛcogo jira. An bɛ kumasen kɔrɔ damadɔ Fàra a kan yan walasa k’a Jira cogo min na kuluw bɛ ɲɔgɔn Sɔrɔ yan ni ja wulilen ye.

I n’a fɔ i ɲɛ b’a la cogo min na dakunw bɛ ja min bɛ panpan, o lamini ni nɛɛma ye. Sisan, i ka miiri nin bɛna kɛ cogo min na ni kɔnɔko yɛrɛyɛrɛ dɔw ye yan, sanni ka kɛ nin yɔrɔ-sɛbɛnni sɛgɛnbali in dɔrɔn ye min bɛ taa ɲɛ ka taa a fɛ, nka tiɲɛ yɛrɛ la, a tɛ kunnafoni yelen si lase at. A bɛ yɔrɔ ta dɔrɔn, wa a man kan ka kalan tiɲɛ na.

Wa hali bi, aw bɛ yan, aw bɛ ka muɲu hali bi nin yɔrɔ in sɛbɛn kalanni na, ka jigiya sɔrɔ hakilina wɛrɛw la, walima kɔnɔkow paskɛli kɔnɔ dogolen dɔw. Tulonkɛ dɔ, n’a sɔrɔ. A fɔ man di nka, o si tɛ yan.

html ye

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