in English

Tarreewwan

Akkaataa tarjaawwan filannoowwan muraasaan qindeessuu, tartiiba, fi ofseeti galata sirna giiridii flexbox keenyaatiin fooyyessuu baradhu. Dabalataan, akkaataa gita tarjaa fayyadamuun bal'ina qaamolee tarjaa hin taane bulchuuf ilaali.

Fuula kana irratti

Mataa ol qaba! Akkaataa tarjaawwan tarjaa kee fooyyessuu fi dhuunfachuutti osoo hin cuuphamin dura jalqaba fuula Tarree dubbisuu kee mirkaneessi .

Akkaataa itti hojjetan

Tarreewwan ijaarsa flexbox tarjaa irratti ijaaramu. Flexbox jechuun filannoowwan tarjaa dhuunfaa jijjiiruu fi gareewwan tarjaa sadarkaa tarree irratti fooyyessuu qabna jechuudha . Akkaataa tarjaawwan itti guddatan, xiqqaatan, ykn karaa biraatiin jijjiiraman filatta.
Yeroo qindaa'inoota tarjaa ijaartu, qabiyyeen hundi tarjaawwan keessatti deema. Sadarkaan tarjaa Bootstrap qabduu irraa gara tarreetti gara tarjaatti gara qabiyyee keetti deema. Yeroo muraasa keessatti, qabiyyee fi tarjaa walitti makuu dandeessa, garuu bu'aan hin yaadamne jiraachuu akka danda'u beekaa.
Bootstrap gitaalee durtii ibsaman kanneen saffisaa, deebii kennuu danda'an uumuuf of keessatti qabata. Tokkoon tokkoo sadarkaa tarjaa irratti tuqaawwan ciccituu ja'aa fi tarjaawwan kudhan qaban, kutaalee kudhan lakkaa'aman kanneen duraan ijaaraman kanneen qindaa'inoota barbaadde uumuuf siif ta'an qabna. Kunis yoo barbaadde karaa Sass hanqisuu dandeessa.

Hiriirsuu

Tarjaawwan dhaabbataa fi qajeelaan qindeessuuf faayidaalee qindaa'ina flexbox fayyadami.

Hiriirsuu dhaabbataa

Tarree sadii keessaa tokko

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>

Tarree sadii keessaa tokko

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>

Hiriirsa qajeelaa

Tarree lama keessaa tokko

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>

Marfamuu tarree

Yoo tarjaawwan 12 ol tarree tokko keessa kaa'aman, tokkoon tokkoon garee tarjaawwan dabalataa, akka yuunitii tokkootti, sarara haaraa irratti ni marma.

.kol-9 ta’a

.col-4
9 + 4 = 13 > 12 waan ta’eef, div bal’ina tarjaa 4 qabu kun akka yuunitii walitti aanee tokkootti sarara haaraa irratti marfama.

.col-6
Tarjaawwan itti aanan sarara haaraa irratti itti fufu.

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>

Cabsa tarree

Tarreewwan gara sarara haaraatti flexbox keessatti cabsuun hack xiqqaa barbaada: elementii width: 100%bakka tarjaawwan kee gara sarara haaraatti marsuu barbaaddu hunda waliin dabali. Akka idileetti kun .rows dachaa waliin raawwatama, garuu mala hojiirra oolmaa hundi kanaaf herrega kennuu hin danda'u.

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

Akkasumas boqonnaa kana bakka boqonnaa murtaa'e irratti faayidaa agarsiisa deebii kennuu keenyaan hojiirra oolchuu dandeessa .

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

Irra deebiin tartiibessuu

Kutaalee ajajaa

Tartiiba mul'ataa qabiyyee keetii .order-to'achuuf gita fayyadami . Gitoota kun deebii kan kennan waan ta'aniif, qabxii cabsuutiin saaguu dandeessa (fkn, ). Deeggarsa karaa sadarkaa giiridii ja'an hunda keessaa of keessatti qabata.order.order-1.order-md-215

Tokkoffaa DOM keessatti ajajni tokkollee hin hojjetu

DOM keessatti lammaffaa, tartiiba guddaa ta'een

DOM keessatti sadaffaa, tartiiba 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>

Akkasumas deebii kennanii .order-firstfi .order-lastgitaawwan kan elementii tokkoo fi , orderhojiirra oolchuudhaan jijjiiran jiru , akkaataa wal duraa duubaan. Kutaawwan kun akka barbaachisummaa isaatti gita lakkoofsa qaban waliinis wal makamuu danda'u .order: -1order: 6.order-*

DOM keessatti jalqaba, dhuma irratti ajajame

DOM keessatti lammaffaa, tartiiba hin qabne

DOM keessatti sadaffaa, dursee ajajame

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>

Tarreewwan ofseeti gochuu

Tarjaawwan tarjaa karaa lamaatiin ofseeti gochuu dandeessa: .offset-gita tarjaa deebii kennu keenyaa fi faayidaa margina keenyaa . Gitoota tarjaa tarjaawwan walsimsiisuuf safaramu yeroo ta'u margaaronni haalata saffisaa bakka bal'inni ofseeti jijjiiramaa ta'eef caalaatti faayidaa qabu.

Kutaawwan ofseeti

.offset-md-*Gitoota fayyadamuun tarjaawwan gara mirgaatti sochoosi . Gitoota kunniin marga bitaa tarjaa tarjaadhaan dabalu *. Fakkeenyaaf, tarjaa afur irra .offset-md-4sochoosa ..col-md-4

.kol-md-4 jedhamuun beekama

.kol-md-4 .ofseeti-md-4

.kol-md-3 .ofseeti-md-3

.kol-md-6 .ofseeti-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>

Qabxiilee ciccituu deebii kennuu irratti tarjaa qulqulleessuu malees, ofseetota deebisanii saaguu si barbaachisuu danda'a. Kana gochaan fakkeenya tarjaa keessatti ilaali .

.kol-sm-5 .kol-md-6 jedhamuun beekama

.kol-sm-5 .ofseeti-sm-2 .kol-md-6 .ofseeti-md-0

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

.kol-sm-6 .kol-md-5 .ofseeti-md-2 .kol-lg-6 .ofseeti-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>

Faayidaaleen marginal

v4 keessatti gara flexbox deemuun, faayidaa margina akka .me-autotarjaa obbolaa dirqisiisuun walirraa fageessuu fayyadamuu dandeessa.

.kol-md-4 jedhamuun beekama

.kol-md-4 .ms-ofumaan

.kol-md-3 .ms-md-ofumaan

.col-auto .na-otoo

.kol-otoo

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>

Kutaalee tarjaa of danda'an

Gitoota elementii tokkoof bal'ina murtaa'e kennuudhaaf aan .col-*alas fayyadamuu ni danda'u . .rowYeroo hunda gitaawwan tarjaa akka ijoollee kallattii hin taane tarree tokkootti fayyadaman, paadiin ni hafu.

.col-3: bal'ina 25% .

.col-sm-9: bal’ina 75% ol 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>

Gitoota fakkiiwwan deebii kennanii lola'an uumuuf faayidaa waliin fayyadamuun ni danda'ama. .clearfixYoo barruun gabaabaa ta'e lola'aa qulqulleessuuf qabiyyee marfata keessatti marsuu mirkaneessi .

Keewwata barruu iddooqa. Fayyadama gita clearfix agarsiisuuf asitti fayyadamaa jirra. Akkaataa tarjaawwan fakkii lola'aa wajjin asitti walqunnaman agarsiisuuf gaaleewwan hiika hin qabne muraasa asitti dabalaa jirra.

Akkuma argitan keewwatni fakkii lola'e sanatti haala gaariin marsu. Amma mee yaadi akkamitti kun qabiyyee qabatamaa tokko tokko waliin as keessaa, barruu iddooqa nuffisiisaa kana qofa kan itti fufuu fi itti fufu osoo hin taane, garuu qabatamaan odeeffannoo qabatamaa hin dabarsu at. Salphaatti bakka waan fudhatuuf dhuguma dubbifamuu hin qabu.

Ammas, kunoo ati, ammallee barreeffama iddooqa kana dubbisuu irratti cimtee jirta, hubannoo dabalataa tokko tokko abdachaa jirta, ykn hanqaaquu Faasikaa dhokataa qabiyyee tokko tokko abdachaa jirta. Qoosaa, tarii. Kan nama dhibu, asitti wanti sun tokkollee hin jiru.

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>