Tarreewwan
Akkaataa tarjaawwan filannoowwan muraasa waliin qindeessuu, tartiiba, fi ofseeti galata sirna giiridii flexbox keenyaatiin fooyyessuu baradhu. Dabalataan, akkaataa gita tarjaa fayyadamuun bal'ina qaamolee tarjaa hin taane bulchuuf ilaali.
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
<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>
<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>
Hiriirsa qajeelaa
<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 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.
9 + 4 = 13 > 12 waan ta’eef, div bal’ina tarjaa 4 qabu kun akka yuunitii walitti aanee tokkootti sarara haaraa irratti marfama.
Tarjaawwan itti aanan sarara haaraa irratti itti fufu.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 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 .row
s dachaa waliin raawwatama, garuu mala hojiirra oolmaa hundi kanaaf herrega kennuu hin danda'u.
<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>
Akkasumas boqonnaa kana bakka boqonnaa murtaa'e irratti faayidaa agarsiisa deebii kennuu keenyaan hojiirra oolchuu dandeessa .
<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>
Irra deebiin tartiibessuu
Kutaalee ajajaa
Tartiiba mul'ataa qabiyyee keetii .order-
to'achuuf kutaalee 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-2
1
5
<div class="container">
<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-first
fi .order-last
gitaalee kanneen elementii tokkoo fi , akkaataa walduraa duubaan order
hojiirra oolchuudhaan jijjiiran jiru. Kutaawwan kun akka barbaachisummaa isaatti gita lakkoofsa qaban waliinis walitti makamuu danda'u .order: -1
order: 6
.order-*
<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>
Tarreewwan ofseeti gochuu
Tarreewwan 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 qindaa'inoota ariifataa 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-4
sochoosa ..col-md-4
<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>
Qabxiilee ciccituu deebii kennuu irratti tarjaa qulqulleessuu malees, ofseetota deebisanii saaguu si barbaachisuu danda'a. Kana gochaan fakkeenya tarjaa keessatti ilaali .
<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>
Faayidaaleen marginal
v4 keessatti gara flexbox tti ce'uu waliin, faayilii margina akka .me-auto
tarjaa obbolaa dirqisiisuun walirraa fageessuu fayyadamuu dandeessa.
<div class="container">
<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 . .row
Yeroo hunda gitaawwan tarjaa akka ijoollee kallattii hin taane tarree tokkootti fayyadaman, paadiin ni hafu.
<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. .clearfix
Yoo 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.
<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>