Source

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.

Tarree sadii keessaa tokko

<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. .containerBal'ina piikselii deebii .container-fluidkennuudhaaf ykn width: 100%hammangaawwan buufata ilaalchaa fi meeshaa hundaaf fayyadami .
Tarreewwan tarjaawwaniif marfata. Tokkoon tokkoon tarjaa paddingiddoo isaan gidduu jiru to’achuuf horizontal (gutter jedhama) qaba. Kunis paddingsana 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 hin ibsamne widthofumaan akka tarjaawwan bal'ina walqixaatti ni qindaa'u. Fakkeenyaaf, fakkeenyota afur kan .col-smtokkoon 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 widths dhibbeentaadhaan saagamu, kanaafuu yeroo hunda dhangala'oo fi guddina elementii warra isaanii wajjin walqabateedha.
Tarjaawwan tarjaawwan dhuunfaa gidduutti gutter uumuuf qajeelaa qabu , haa ta'u malee, tarreewwan irraa fi tarjaawwan irraa kan irratti waliin paddinghaquu dandeessa .marginpadding.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-4meeshaalee xixiqqoo, giddu galeessaa, gurguddoo, fi guddaa dabalataa irratti hojjetu, garuu xsqabxii 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 emykn 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 .rempx

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 xshanga xl. Tokkoon tokkoo tuqaa ciccitaa barbaadduuf lakkoofsa gita yuunitii hin qabne kamiyyuu dabaliiti tarjaan hundi bal'ina walfakkaataa ta'a.

1 keessaa 2

2 kan 2

1 keessaa 3

2 kan 3

3 keessaa 3

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

Tarjaawwan bal'ina walqixaa gara sararoota hedduutti caccabuu danda'u, garuu dogongorri Safari flexboxflex-basis ture kan kun ifa ykn malee akka hin hojjenne dhorke border. Furmaatni gosoota biraawzari durii jira, garuu yoo yeroo yeroon taate barbaachisaa ta'uu hin qaban.

Toora asii gadii

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</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.

1 keessaa 3

2 keessaa 3 (bal’aa) .

3 keessaa 3

1 keessaa 3

2 keessaa 3 (bal’aa) .

3 keessaa 3

<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}-autoTarjaawwan bal'ina uumamaa qabiyyee isaanii irratti hundaa'uun safaruuf gita fayyadami .

1 keessaa 3

Qabiyyee bal'ina jijjiiramaa

3 keessaa 3

1 keessaa 3

Qabiyyee bal'ina jijjiiramaa

3 keessaa 3

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

Tarree baay'ee bal'ina walqixaa

Tarjaawwan bal'ina walqixaa kanneen tarreewwan hedduu dabarsan uumi a .w-100bakka tarjaawwan gara sarara haaraatti akka cabsan barbaaddu galchuudhaan. Faayidaa agarsiisaa deebii kennu.w-100 tokko tokko waliin walitti makuun boqonnaawwan deebii akka kennan godhi .

kol

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

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 .colfi fayyadami. .col-*Yeroo tarjaa hamma addaa barbaaddu gita lakkoofsa qabu ifteessi; yoo kana hin taane, .col.

kol

kol-8

kol-4

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

kol-sm-8

kol-sm-4

kol-sm jedhamuun beekama

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

.kol-12 .kol-md-8 jedhamuun beekama

.kol-6 .kol-md-4 jedhamuun beekama

.kol-6 ta’a

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-12 col-md-8">.col-12 .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 .rowfi faayidaa padding walsimsiisu .cols irratti wal-qabsiisi. Kan .containerykn .container-fluidwarri dhangala'aa hin barbaadamne hambisuuf akkasumas sirreeffamuu barbaachisuu danda'a, ammas faayidaa padding walsimsiisuu fayyadamuun.

Fakkeenyi tarjaa Bootstrap bakka cabbii guddaa ( lg) fi sanaa ol irratti dhuunfachuu kunooti. .colPadding waliin guddifneerra , sana waliin warra irratti .px-lg-5counteract goonee booda wrapper waliin sirreessineerra ..mx-lg-n5.row.container.px-lg-5

Padding tarjaa amala

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

Hiriirsuu

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

Hiriirsuu dhaabbataa

Tarree sadii keessaa tokko

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

Tarree sadii keessaa tokko

<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

Tarree lama keessaa tokko

<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 tarjaa ijoollee battalaa hunda irraa margins negaatiivii .rowfi 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 .containerykn .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).

.kol-12 .kol-sm-6 .kol-md-8

.kol-6 .kol-md-4 jedhamuun beekama

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .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.

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

<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

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

.kol-6 .kol-sm-4

<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 shanan hunda qaxxaamuree of keessatti qabata.order.order-1.order-md-2112

Tokkoffaa, garuu ajaja hin qabne

Lammaffaa, garuu isa dhumaa

Sadaffaa, garuu tokkoffaa

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

Akkasumas deebii kennanii .order-firstfi .order-lastgitaalee kan elementii tokkoo fi ( ) orderhojiirra oolchuudhaan jijjiiran jiru , akkaataa wal duraa duubaan. Kutaawwan kun akka barbaachisummaa isaatti gita lakkoofsa qaban waliinis walitti makamuu danda'u .order: -1order: 13order: $columns + 1.order-*

Tokkoffaa, garuu isa dhumaa

Lammaffaa, garuu tartiiba hin qabne

Sadaffaa, garuu tokkoffaa

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but 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-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

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

.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

<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 .mr-autotarjaa obbolaa dirqisiisuun walirraa fageessuu fayyadamuu dandeessa.

.kol-md-4 jedhamuun beekama

.col-md-4 .ml-ofumaan

.kol-md-3 .ml-md-ofumaan

.col-otoo .mr-otoo

.kol-otoo

<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 .rowfi 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).

Sadarkaa 1ffaa: .col-sm-9

Sadarkaa 2ffaa: .col-8 .col-sm-6

Sadarkaa 2ffaa: .col-4 .col-sm-6

<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 durtii ibsaman jijjiiramootaa fi makaawwan walfakkaatan kana fayyadamuun guutummaa tuuta gitaalee fayyadamaaf qophaa'an 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 {
  width: 800px;
  @include make-container();
}

.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);
  }
}

Qabiyyee ijoo

Qabiyyee sadarkaa lammaffaa

<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-columnsbal'ina (dhibbeentaadhaan) tokkoon tokkoo tarjaa dhuunfaa uumuuf fayyadama yeroo $grid-gutter-widthbal'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-breakpointsfi $container-max-widthsgara 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. pxGatii tarjaa (hin rem, em, ykn ) keessatti saaguu mirkaneessi %.