Sirna giiridii
Sirna tarjaa kudha lamaa, sadarkaa deebii durtii shan, jijjiiramoota Sass fi mixins, fi gita durtii ibsaman kudhanootaan lakkaa'amaniif galata qindaa'inoota bocaafi guddina hunda ijaaruuf tarjaa flexbox humna guddaa qabu keenya fayyadami.
Akkaataa itti hojjetu
Sirni tarjaa Bootstrap qabiyyee qindeessuu fi qindeessuuf tartiiba qabduu, tarreewwanii fi tarjaawwan fayyadama. Flexbox waliin kan ijaarame yoo ta'u guutummaatti deebii kan kennudha. Armaan gaditti fakkeenyaa fi akkaataa giiriin walitti dhufu gadi fageenyaan ilaaluudha.
Flexbox irratti haaraa ykn hin beekne? Qajeelfama flexbox CSS Tricks kana duubbee, jechoota, qajeelfama, fi ciccitaa koodii dubbisi.
<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>
Fakkeenyi armaan olii meeshaalee xixiqqoo, giddu galeessaa, gurguddoo, fi guddaa dabalataa irratti tarjaawwan bal'ina walqixaa sadii gita tarjaa keenya dursee ibsaman fayyadamuun uuma. Tarjaawwan sun fuula keessatti warra waliin giddugaleessa ta'u .container
.
Caccabsuun, akkaataa itti hojjetu kunooti:
- Konteenaronni qabiyyee marsariitii keessanii giddugaleessaa fi qajeelaan pad gochuuf mala ni kennu.
.container
Bal'ina piikselii deebii.container-fluid
kennuudhaaf yknwidth: 100%
hammangaawwan buufata ilaalchaa fi meeshaa hundaaf fayyadami . - Tarreewwan tarjaawwaniif marfata. Tokkoon tokkoon tarjaa
padding
iddoo isaan gidduu jiru to’achuuf horizontal (gutter jedhama) qaba. Kunispadding
sana booda tarreewwan marga negaatiivii qaban irratti ni morma. Haala kanaan, qabiyyeen tarjaawwan kee keessa jiru hundi mul'ataan gara bitaa gadiitti qindaa'a. - Haalata tarjaa keessatti, qabiyyeen tarjaawwan keessa kaa'amuu qaba fi tarjaawwan qofti ijoollee tarreewwanii battalumatti ta'uu danda'u.
- Galata flexbox, tarjaawwan tarjaa ifteessame hin qabne
width
ofumaan akka tarjaawwan bal'ina walqixaa qindaa'u. Fakkeenyaaf, fakkeenyota afur kan.col-sm
tokkoon tokkoon isaanii ofumaan bal'ina %25 qabxii cabbii xiqqaa irraa fi ol ta'u. Fakkeenya dabalataaf kutaa tarjaawwan ofumaan qindaa'ina ilaali . - Gitoota tarjaa lakkoofsa tarjaawwan tarree tokkoof 12 ta'uu danda'an keessaa fayyadamuu barbaaddu agarsiisu. Kanaafuu, yoo tarjaawwan bal'ina walqixaa sadii qaxxaamuranii barbaadde, fayyadamuu dandeessa
.col-4
. - Tarjaawwan
width
s dhibbeentaadhaan saagamu, kanaafuu yeroo hunda dhangala'oo fi guddina elementii warra isaanii wajjin walqabateedha. - Tarjaawwan tarjaawwan dhuunfaa gidduutti gutter uumuuf qajeeloo qabu , haa ta'u malee, tarreewwan irraa fi tarjaawwan irraa kan irratti waliin
padding
haquu dandeessa .margin
padding
.no-gutters
.row
- Giriidiin deebii akka kennu gochuuf, tuqaawwan ciccitaa giiridii shan jiru, tokkoon tokkoo qabxii ciccituu deebii kennuudhaaf tokko : tuqaawwan ciccituu hunda (dabalataa xiqqaa), xiqqaa, giddu galeessaa, guddaa, fi dabalataa guddaa.
- Qabxiileen ciccitaa giiridii gaaffiiwwan miidiyaa bal'ina xiqqaa irratti hundaa'u, jechuunis qabxii cabsuu tokkoo sanaa fi kanneen isa olii hunda irratti raawwatiinsa qabu (fkn,
.col-sm-4
meeshaalee xixiqqoo, giddu galeessaa, gurguddoo, fi guddaa dabalataa irratti hojjetu, garuuxs
qabxii cabsuu jalqabaa miti). - Mallattoo hiika dabalataaf gitawwan tarjaa durtii ibsaman (akka
.col-4
) ykn Sass mixins fayyadamuu dandeessa .
Daangaa fi dogongora naannoo flexbox jiru beekaa , akka qaamolee HTML tokko tokko akka qabduu flex fayyadamuu dadhabuu .
Filannoowwan giiridii
Bootstrap hammangaa baay'ee ibsuuf s em
ykn s yoo fayyadamu, s qabxiiwwan cabbii tarjaa fi bal'ina qabduudhaaf fayyadama. Kunis bal'inni buufata ilaalchaa piikseliidhaan waan ta'eef hammangaa qubee wajjin waan hin jijjiiramneef .rem
px
Akkaataa gama sirna tarjaa Bootstrap meeshaalee hedduu gabatee harkaa qaban irratti hojjetan ilaali.
Dabalata xiqqaa <576px |
Xiqqaa ≥576px |
Giddugaleessa ≥768px |
Guddaa ≥992px |
Dabalata guddaa ≥1200px |
|
---|---|---|---|---|---|
Max bal'ina qabduu | Tokkollee hin jiru (auto) . | 540px ta'a | 720px ta'a | 960px ta'a | 1140px ta'a |
Durtii gitaa | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# kan tarjaawwanii | 12. | ||||
Bal'ina gutter | 30px (15px tokkoon tokkoon cinaacha tarjaa tokkoo irratti) . | ||||
Nestable kan ta'e | Eeyyee | ||||
Tartiiba tarree | Eeyyee |
Tarjaawwan ofumaan qindaa'uu
Gitaa lakkoofsa ifa ta'e malee safara tarjaa salphaa akka .col-sm-6
.
Bal’ina walqixaa
Fakkeenyaaf, kunoo qindaa'inoota tarjaa lama kan meeshaa fi buufata ilaalchaa hunda irratti hojjetan, irraa xs
hanga xl
. Tokkoon tokkoo tuqaa ciccitaa barbaadduuf lakkoofsa gita yuunitii hin qabne kamiyyuu dabaliiti tarjaan hundi bal'ina walfakkaataa ta'a.
<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>
Sarara baay’ee bal’ina walqixaa qabu
.w-100
Tarjaawwan bal'ina walqixaa kanneen sararoota hedduu dabarsan uumi a bakka tarjaawwan gara sarara haaraatti akka cabsan barbaaddu galchuudhaan . Faayidaa agarsiisaa deebii kennu.w-100
tokko tokko waliin makamuudhaan boqonnaawwan deebii akka kennan godhi .
Safari flexbox bug tokko ture kan kun ifa flex-basis
ykn malee akka hin hojjenne dhorke border
. Furmaatni gosoota biraawzarii durii jira, garuu yoo biraawzaroota kee xiyyeeffannoo gosoota buggy keessa hin kufne barbaachisoo ta'uu hin qaban.
<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>
Bal'ina tarjaa tokko saaguu
Ofumaan qindaa'ina tarjaawwan tarjaa flexbox akkasumas bal'ina tarjaa tokkoo saaguu fi tarjaawwan obbolaa ofumaan naannoo isaa guddina akka jijjiiran gochuu dandeessa jechuudha. Gitoota tarjaa durtii ibsaman (akkuma armaan gadii), makaa tarjaa, ykn bal'ina sarara keessaa fayyadamuu dandeessa. Hubadhu, tarjaawwan biroo bal'inni tarjaa giddugaleessaa maal iyyuu yoo ta'e hammangaa ni jijjiiru.
<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>
Qabiyyee bal'ina jijjiiramaa
col-{breakpoint}-auto
Tarjaawwan bal'ina uumamaa qabiyyee isaanii irratti hundaa'uun safaruuf gita fayyadami .
<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>
Kutaawwan deebii kennan
Giriidiin Bootstrap sadarkaa shan gita durtii ibsaman kanneen qindaa'inoota deebii walxaxaa ijaaruuf of keessatti qabata. Meeshaalee dabalataa xiqqaa, xiqqaa, giddu galeessaa, guddaa, ykn guddaa dabalataa irratti hammangaa tarjaawwan kee hamma barbaaddetti dhuunfachiisi.
Qabxii cabsuu hunda
Giriidota meeshaalee xiqqaa irraa hanga guddaatti walfakkaataniif, gitaalee .col
fi fayyadami. .col-*
Yeroo tarjaa hamma addaa barbaaddu gita lakkoofsa qabu ifteessi; yoo kana hin taane, .col
.
<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>
Gara horizontal tti walitti tuulameera
Tuuta gitaa tokko fayyadamuun .col-sm-*
, sirna tarjaa bu'uuraa kan tuulamee jalqabee fi bakka cabbii xiqqaa ( ) irratti qajeelaa ta'u uumuu dandeessa 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>
Mix fi walsimsiisaa
Tarjaawwan kee salphaatti sadarkaa tarjaa tokko tokko keessatti akka tuulaman hin barbaadduu? Tokkoon tokkoo sadarkaaf akka barbaachisummaa isaatti walnyaatinsa gita adda addaa fayyadami. Akkaataa inni hundi itti hojjetu yaada fooyya'aa argachuuf fakkeenya armaan gadii ilaali.
<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>
Guutaa
Gutters deebii kennuudhaan sirreeffamuu danda'u breakpoint-specific padding fi negative margin utility classes. Tarree kenname keessatti gutters jijjiiruuf, faayidaa margina negaatiivii irratti .row
fi faayidaa padding walsimsiisu .col
s irratti wal-qabsiisi. Dhangala'uu hin barbaadamne hambisuufis .container
ykn .container-fluid
warri sirreeffamuu barbaachisuu danda'a, ammas faayidaa padding walsimsiisuu fayyadamuun.
Fakkeenyi tarjaa Bootstrap bakka cabbii guddaa ( lg
) fi sanaa ol irratti dhuunfachuu kunooti. .col
Padding waliin guddifneerra , sana waliin warra irratti .px-lg-5
counteract goonee booda wrapper waliin sirreessineerra ..mx-lg-n5
.row
.container
.px-lg-5
<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>
Tarreewwan tarree
.row-cols-*
Lakkoofsa tarjaa qabiyyee fi qindaa'ina kee akka gaariitti agarsiisan saffisaan saaguuf gita deebii kennu fayyadami . Gitoota idilee .col-*
tarjaawwan dhuunfaa irratti hojii irra kan oolan yoo ta'u (fkn, .col-md-4
), gitoonni tarjaa tarree .row
akka karaa gabaabaa warra irratti qindaa'u.
Gitoota tarjaa tarree kana fayyadamii saffisaan qindaa'inoota tarjaa bu'uuraa uumuuf ykn qindaa'inoota kaardii kee to'achuuf.
<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>
<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>
<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>
<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>
<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>
Akkasumas Sass mixin isa waliin jiru fayyadamuu dandeessu, 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);
}
}
Hiriirsuu
Tarjaawwan dhaabbataa fi qajeelaan qindeessuuf faayidaalee qindaa'ina flexbox fayyadami. Internet Explorer 10-11 yeroo qabduu flex min-height
akka armaan gaditti mul'atutti qindeessuu dhaabbataa wantoota flex hin deeggaran. Bal'ina isaaf Flexbugs #3 ilaali.
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>
Gutters hin qabu
Gutters tarjaawwan gidduu gita tarjaa keenya dursee ibsaman keessatti .no-gutters
. Kunis tarjaawwan ijoollee battalaa hunda irraa margin
s negaatiivii .row
fi tarjaawwan horizontaalaa ni haqa.padding
Koodiin madda akkaataawwan kana uumuuf gargaaru kunooti. Hubadhu, irra darbuun tarjaa gara tarjaa ijoollee jalqabaa qofatti bal'ifamee karaa filannoo amalootaa irratti xiyyeeffata . Kun filannoo addaa caalaa kan uumu yoo ta'u, tarjaa padding ammallee faayidaa addaan fageenyaatiin caalaatti dhuunfachuu danda'a .
Dizaayinii qarqara irraa gara qarqaraatti barbaadduu? Warra .container
ykn .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
Qabatamaan akkas fakkaata. Hubadhu kana gita tarjaa durtii ibsaman biroo hunda waliin fayyadamuu itti fufuu dandeessa (bal'ina tarjaa, sadarkaa deebii kennuu, irra deebiin tartiiba, fi kkf dabalatee).
<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>
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 gita fayyadami . Gitoota kun deebii kan kennan waan ta'aniif, qabxii cabsuutiin saaguu dandeessa (fkn, ). Deeggarsa karaa sadarkaa giiridii shanan hunda qaxxaamuree of keessatti qabata.order
.order-1.order-md-2
1
12
<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>
Akkasumas deebii kennanii .order-first
fi .order-last
gitaalee kan elementii tokkoo fi ( ) order
hojiirra oolchuudhaan jijjiiran jiru , akkaataa wal duraa duubaan. Kutaawwan kun akka barbaachisummaa isaatti gita lakkoofsa qaban waliinis wal makamuu danda'u .order: -1
order: 13
order: $columns + 1
.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
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-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 deemuun, faayidaa margina akka .mr-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 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>
Koonyaa gochuu
Qabiyyee kee tarjaa durtii waliin man'ee gochuuf, tarjaa haaraa .row
fi tuuta .col-sm-*
tarjaa jiru keessaa dabali .col-sm-*
. Tarreewwan man'ee tuuta tarjaawwan hanga 12 fi isaa gadi ida'an of keessatti qabachuu qabu (tarjaawwan 12 jiran hunda fayyadamuun hin barbaachisu).
<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>
Sass mixins jedhaman
Yeroo faayilii Sass madda Bootstrap fayyadamtu, jijjiiramoota Sass fi mixins fayyadamuun qindaa'inoota fuula amala, hiika, fi deebii uumuuf filannoo qabda. Gitoota tarjaa keenya dursanii ibsaman jijjiiramootaa fi makaawwan walfakkaatan kana fayyadamuun guutummaa tuuta gitaalee fayyadamaaf qophaa'oo qindaa'inoota deebii saffisaa kennuudhaaf dhiyeessuu.
Jijjiiramoota
Jijjiiramoonni fi kaartoonni lakkoofsa tarjaa, bal'ina gutter, fi qabxii gaaffii miidiyaa tarjaawwan lola'an itti jalqabu murteessu. Kanneen gita tarjaa durtii ibsaman armaan olitti galmaa'an uumuuf, akkasumas makaa amala armaan gadii tarreeffamaniif fayyadamna.
$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
);
Mixins jedhaman
Miksiin jijjiiramoota tarjaa waliin ta'uun CSS hiika tarjaa tarjaa dhuunfaa uumuuf fayyadamu.
// 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);
Fakkeenya fayyadama
Jijjiiramoota gara gatiiwwan amala mataa keetii fooyyessuu dandeessa, ykn makaawwan gatiiwwan durtii isaanii waliin qofa fayyadamuu dandeessa. Fakkeenyi qindaa'inoota durtii fayyadamuun qindaa'ina tarjaa lamaa qaawwa gidduu jiru uumuuf kunooti.
.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);
}
}
<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>
Giriidii dhuunfachuu
Jijjiiramootaa fi kaartaa Sass tarjaa ijaarame keenya fayyadamuun, gita tarjaa durtii ibsaman guutummaatti dhuunfachuun ni danda'ama. Lakkoofsa sadarkaa, safara gaaffii miidiyaa, fi bal'ina qabduu jijjiiri—sana booda irra deebi'ii qindeessii.
Utubaa fi gutters
Lakkoofsi tarjaawwan tarjaa karaa jijjiiramoota Sass fooyya'uu danda'a. $grid-columns
bal'ina (dhibbeentaadhaan) tokkoon tokkoo tarjaa dhuunfaa uumuuf fayyadama yeroo $grid-gutter-width
bal'ina gutters tarjaa saaga.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Sadarkaa giiridii
Tarjaawwan ofii isaanii bira darbitee, lakkoofsa sadarkaawwan tarjaa dhuunfachuus dandeessa. Osoo sadarkaa giiridii afur qofa barbaadde, $grid-breakpoints
fi $container-max-widths
gara waan akka kanaatti fooyyessita:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Jijjiiramoota Sass ykn kaartaa irratti jijjiirama kamiyyuu yeroo gootu, jijjiiramoota kee qusachuu fi irra deebi'ii qindeessuu si barbaachisa. Kana gochuun tuuta haaraa gita tarjaa durtii ibsame bal'ina tarjaa, ofseetota, fi tartiibaaf ni baasa. Faayidaaleen mul'achuu deebii kennanis qabxiiwwan cabsuu amala fayyadamuuf ni fooyya'u. px
Gatii tarjaa (hin rem
, em
, ykn ) keessatti saaguu mirkaneessi %
.