Source

Nidaamka grid

U isticmaal moobilkeena koowaad ee sanduuqa flexbox si aad u dhisto qaab-dhismeedka dhammaan qaababka iyo cabbirrada iyada oo ay ugu wacan tahay nidaam laba iyo toban tiir ah, shan heerar oo jawaab celin ah, doorsoomayaasha Sass iyo isku-darka, iyo daraasiin fasallo horay loo sii qeexay.

Sida ay u shaqeyso

Nidaamka xariiqda Bootstrap wuxuu adeegsadaa weel taxane ah, saf, iyo tiirar si loo habeeyo oo loo waafajiyo waxa ku jira. Waxa lagu dhisay flexbox oo si buuxda uga jawaaba. Hoos waxaa ku yaal tusaale iyo si qoto-dheer u eeg sida shabaggu isu keeno.

Ku cusub ama aan aqoon u lahayn flexbox? Akhri buugan CSS Tricks flexbox hagaha asalka, erey bixinta, tilmaamaha, iyo qoraalada koodka.

Mid ka mid ah saddexda tiir

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

Tusaalaha kore wuxuu abuuraa saddex tiir oo ballac siman oo yar, dhexe, weyn, iyo aalado waaweyn oo dheeri ah iyadoo la adeegsanayo fasaladayada xajmiyeedka ee horay loo sii qeexay. Tiirarkaas waxay xuddun u yihiin bogga waalidka .container.

Burburinta, waa kan sida ay u shaqeyso:

Konteenarada waxay bixiyaan hab lagu dhex dhexaadiyo oo si toosan loogu dhejiyo waxa ku jira boggaaga. U isticmaal .containerballaca pixel-ka jawaaba ama .container-fluiddhammaan width: 100%cabbirrada daawashada.
Safku waa duubo tiirar. Tiir kastaa waxa uu leeyahay jiif padding(oo loo yaqaan godad) si loo xakameeyo meesha bannaan ee u dhaxaysa. Tan paddingwaxa markaas lagaga hortagayaa safafka leh xad-dhaaf xun. Sidan, dhammaan waxa ku jira tiirarkaaga ayaa muuqaal ahaan la jaan qaadaya dhinaca bidixda.
Qaabka sharoobada, waxa ku jira waa in lagu meeleeyaa tiirar oo tiirar kaliya ayaa laga yaabaa inay noqdaan carruurta safafka ah.
Thanks to flexbox, tiirarka grid ee aan la cayimin widthwaxay si toos ah u qaabayn doonaan sidii tiirar ballac siman. Tusaale ahaan, afar xaaladood oo mid .col-smwalba si toos ah ayuu u noqon doonaa 25% ballac marka loo eego barta yar ee jaban iyo kor. Fiiri qaybta tiirarka is-qaabaynta si aad u hesho tusaaleyaal dheeraad ah.
Fasallada safafka ayaa tilmaamaya tirada tiirarka aad jeclaan lahayd inaad isticmaasho 12 suurtogalka ah safkiiba. Markaa, haddii aad rabto saddex tiir oo ballac siman oo dhan ah, waxaad isticmaali kartaa .col-4.
Tiirka widths waxa loo dejiyey boqolleyda, markaa had iyo jeer waa dareere iyo cabbir marka loo eego xubinta waalidka.
Tiiraryadu waxay leeyihiin siman paddingsi ay u abuuraan majaraha u dhexeeya tiirar gaar ah, si kastaba ha ahaatee, waxaad ka saari kartaa marginsafafka iyo paddingtiirarka .no-guttersku yaal .row.
Si aad shabaggu u jawaabto, waxaa jira shan dhibcood oo jajab ah, mid ka mid ah bar kasta oo jawaab celin ah : dhammaan dhibcaha jabinta (yaryar), yar, dhexdhexaad, weyn, iyo weyn oo dheeraad ah.
Dhibcaha xajmigu waxay ku salaysan yihiin waydiimaha warbaahinta ballaca ugu yar, taasoo la micno ah inay khuseeyaan hal dhibic iyo dhammaan kuwa ka sarreeya (tusaale, .col-sm-4waxay khuseeyaan kuwa yaryar, dhexe, waaweyn, iyo aaladaha waaweyn ee dheeraadka ah, laakiin maaha meesha ugu horeysa xs).
Waxaad u isticmaali kartaa fasallada jaranjarada horay loo sii qeexay (sida .col-4) ama isku darka Sass si aad u hesho calaamado semantic ah.

Ka digtoonow xaddidaadyada iyo dhiqlaha agagaarka flexbox , sida awood la'aanta in loo isticmaalo qaybo HTML ah weel dabacsan .

Ikhtiyaarada grid

Halka Bootstrap uu isticmaalo ems ama rems si loo qeexo cabbirrada intooda badan, pxs waxa loo isticmaalaa meelaha jaban ee xadhkaha iyo ballaca weelka. Tani waa sababta oo ah ballaca daawashada ayaa ku jira pixels oo kuma beddelayso cabbirka farta .

Eeg sida qaybaha nidaamka xadhkaha Bootstrap uga shaqeeyo qalabyo badan oo leh miis anfacaya.

	Aad u yar <576px	Yar ≥576px	Dhexdhexaad ≥768px	Weyn ≥992px	Aad u weyn ≥1200px
Ballaca weelka ugu badan	Midna (oto)	540px	720px	960px	1140px
Horgalayaasha fasalka	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# tiirarka	12
Ballaca godka	30px (15px dhinac kasta ee tiirka)
Nstable	Haa
Dalbashada safafka	Haa

Tiirarka qaabaynta tooska ah

Ka faa'iidayso fasallada tiirarka gaarka ah ee jabsiga si aad u fududayso cabbirka tiirka iyada oo aan la haysan fasal cad oo lambaraysan sida .col-sm-6.

Balac siman

Tusaale ahaan, halkan waxaa ah laba qaabayn oo xajmiyeed ah oo khuseeya qalab kasta iyo daawashada, laga bilaabo xsilaa xl. Ku dar tiro kasta oo fasallo ka yar halbeeg kasta oo aad u baahan tahay oo tiir kastaa wuxuu noqon doonaa ballac isku mid ah.

1 ka mid ah 2

2 ka mid ah 2

1 ka mid ah 3

2 ka mid ah 3

3 ka mid ah 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>

Tiirar ballac ahaan le'eg ayaa loo jebin karaa khadad badan, laakiin waxaa jiray dhiqlaha flexbox ee Safari kaas oo ka hortagay in tani ay shaqeyso iyada oo aan si cad flex-basisama border. Waxaa jira meelo laga shaqayn karo oo loogu talagalay noocyadii hore ee browser-ka, laakiin waa in aanay daruuri u noqon haddii aad casriyaysan tahay.

Tiirka

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

Dejinta hal balac oo tiir

Si toos ah u qaabaynta tiirarka flexbox waxay sidoo kale ka dhigan tahay inaad dejin karto ballaca hal tiir oo aad tiirarka walaalaha si toos ah u cabbiraan hareeraha. Waxaa laga yaabaa inaad isticmaasho fasallada jaranjarada ee horay loo sifeeyay (sida hoos ku cad), isku darka khadka, ama ballaadhka khadka. Ogsoonow in tiirarka kale ay cabbiri doonaan iyadoon loo eegin ballaca tiirka dhexe.

1 ka mid ah 3

2 ka mid ah 3 (ballaaran)

3 ka mid ah 3

1 ka mid ah 3

2 ka mid ah 3 (ballaaran)

3 ka mid ah 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>

Waxyaalaha balac ee kala duwan

Isticmaal col-{breakpoint}-autofasalada si aad u cabbirto tiirarka ku salaysan ballaca dabiiciga ah ee ka kooban.

1 ka mid ah 3

Waxyaalaha balac ee kala duwan

3 ka mid ah 3

1 ka mid ah 3

Waxyaalaha balac ee kala duwan

3 ka mid ah 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>

Saf badan oo ballac siman ah

Samee tiirar ballac siman oo ku fidsan safaf badan adiga oo gelinaya .w-100meel aad rabto in tiirarku u jebiyaan xariiq cusub. Ka dhig nasiishooyinka kuwo jawaab celin leh adiga oo ku qasaya .w-100qaar ka mid ah yutiilitida soo bandhigida ee ka jawaaba .

col

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

Fasallada jawaab celinta

Bootstrap's grid waxaa ka mid ah shan heerar oo fasallo horay loo sii qeexay si loo dhiso qaab-dhismeedyo adag oo ka jawaabaya. Ku beddel cabbirka tiirarkaaga aaladaha yaryar, yaryar, dhexdhexaadka ah, waaweyn ama dheeraadka ah si kasta oo aad u aragto inay ku habboon yihiin.

Dhammaan meelaha jaban

Shabaqyada isku midka ah ee qalabka ugu yar ilaa kan ugu weyn, isticmaal fasalada .coliyo .col-*fasalada. Sheeg fasal nambaraysan marka aad u baahan tahay tiir cabbir gaar ah; haddii kale, xor u noqo inaad ku dhegto .col.

col

col-8

col-4

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

Isku dulsaaran si siman

Adiga oo isticmaalaya hal .col-sm-*fasal oo keliya, waxa aad samayn kartaa hab-socod aasaasi ah oo ka bilaabma is dulfuulan oo noqda mid siman meesha yar ee jaban ( sm).

col-sm-8

col-sm-4

col-sm

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

Isku qas oo dhig

Ma doonaysaa in tiirarkaagu ay si fudud isugu xidhaan qaar ka mid ah heerarka kala-xadhkaha? Isticmaal isku darka fasallo kala duwan heer kasta sida loogu baahdo. Fiiri tusaalaha hoose si aad fikrad wanaagsan u hesho sida ay dhammaan u shaqeeyaan.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

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

Toosin

Isticmaal qalabka isku toosinta flexbox si aad u toosiso tiirarka si toos ah iyo toosan.

toosan toosan

Mid ka mid ah saddexda tiir

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

Mid ka mid ah saddexda tiir

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

Toosin toosan

Mid ka mid ah labada tiir

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

Biyo mareen

Godadka u dhexeeya tiirarka ee fasaladayada jaranjarada ee horay loo sii qeexay waxa lagu saari karaa .no-gutters. Tani waxay meesha ka saaraysaa xumaanta marginiyo .rowjiifka paddingdhammaan tiirarka carruurta ee dhow.

Halkan waxaa ah koodhka isha ee abuurista qaababkan. Ogsoonow in tiirarka dhaaftay ay ku koobn yihiin oo keliya tiirarka carruurta ee ugu horreeya waxaana lagu bartilmaameedsadaa xulashada sifada . Iyadoo tani ay dhalinayso dooro gaar ah, suufka tiirarka ayaa wali lagu sii habeyn karaa yutiilitooyinka kala dheereynta .

Ma u baahan tahay naqshad gees ilaa gees ah? Tuur waalidka .containerama .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Ficil ahaan, halkan waa sida ay u egtahay. Ogsoonow inaad ku sii wadan karto isticmaalka kan dhammaan fasalada kale ee saad u qeexan (ay ku jiraan ballaadhka tiirka, heerarka jawaabta, dib u dalbashada, iyo in ka badan).

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

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

Tiirka duubista

Haddii in ka badan 12 tiir la dhigo hal saf, koox kasta oo tiirar dheeraad ah ayaa, hal unug ahaan, ku duubi doona khad cusub.

.col-9

.col-4
Tan iyo 9 + 4 = 13> 12, 4-column-ballaaran div waxa lagu duuduubay xariiq cusub sidii hal unug oo xidhiidhsan.

.col-6 Tiirarrada
xiga waxay ku sii socdaan khadka cusub.

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

Jajabka tiirka

Jebinta tiirarka laynka cusub ee flexbox waxay u baahan tahay jabsi yar: ku dar curiye width: 100%meel kasta oo aad rabto inaad tiirarkaaga ku duubto xariiq cusub. Caadi ahaan tan waxaa lagu dhammeeyaa .rows badan, laakiin qaab kasta oo dhaqangelin ah kuma xisaabtami karo tan.

.col-6 .col-sm-3

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

Waxa kale oo aad ku dabaqi kartaa fasaxan meelaha nasashada ee gaarka ah adigoo isticmaalaya adeegyadeena bandhiga ee ka jawaabaya .

.col-6 .col-sm-4

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

Dib u dalbashada

Dalbo fasalada

U adeegso .order-xiisado si aad u xakamayso nidaamka muuqaalka ee waxa ku jira. Fasaladani waa kuwo jawaab celin ah, marka waxaad dejin kartaa barta ordergoynta (tusaale, .order-1.order-md-2). 1Waxaa ku jira taageerada 12dhammaan shanta heerar ee kala duwan.

Marka hore, laakiin aan la dalban

Labaad, laakiin ugu dambeeya

Saddex, laakiin marka hore

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

Waxa kale oo jira ka jawaab celin .order-firstiyo .order-lastfasallo beddela ordercuriyaha iyagoo codsanaya order: -1iyo order: 13( order: $columns + 1), siday u kala horreeyaan. Fasalladan waxa kale oo lagu dhex milmi karaa fasallada nambarada leh .order-*haddii loo baahdo.

Marka hore, laakiin ugu dambeeya

Labaad, laakiin aan amar lahayn

Saddex, laakiin marka hore

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

Tiirarka dib u dejinta

Waxaad u dami kartaa tiirarka shabaqyada laba siyaabood: .offset-fasaladayada wax-ka-qabashada grid iyo utilities our margin . Fasallada xayndaabku waxa lagu qiyaasaa in ay iswaafajiyaan tiirarka halka marginsyadu ay aad uga faa'iidaysan karaan jaangooyooyinka degdega ah halkaas oo ballaca wax-ka-qabashada uu doorsoomayo.

Fasallada la dhimay

Tiirarka u dhaqaaq dhanka midig adigoo isticmaalaya .offset-md-*fasalo. Fasaladani waxay kordhiyaan soohdinta bidix ee tiirarka iyagoo *tiirar ah. Tusaale ahaan, waxa .offset-md-4uu .col-md-4ka wareegayaa afar tiir.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

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

Marka lagu daro nadiifinta tiirka meelaha jabinta jawaabaha, waxaa laga yaabaa inaad u baahato inaad dib u dejiso. Fiiri tan ficil ahaan tusaalaha shabkada .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

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

Utility Margin

Markaad u guurto flexbox gudaha v4, waxaad isticmaali kartaa utility margin sida .mr-autoinaad ka fogaato tiirarka walaalaha.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

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

Buul

Si aad macluumaadkaaga ugu dhejiso shabagga caadiga ah, ku dar tiirar cusub .rowiyo set oo ah .col-sm-*tiir jira .col-sm-*. Safka buulka leh waa in ay ku jiraan tiro tiirar ah oo isku geynaya 12 ama ka yar (looma baahna in aad isticmaasho dhammaan 12 tiir ee la heli karo).

Nivå 1: .col-sm-9

Nivå 2: .col-8 .col-sm-6

Nivå 2: .col-4 .col-sm-6

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

Isku darka Sass

Markaad isticmaalayso Bootstrap's isha faylasha Sass, waxaad haysataa ikhtiyaarka isticmaalka doorsoomayaasha Sass iyo isku darka si aad u abuurto habayn, semantic, iyo bogag jawaab celin leh. Fasaladayada safafka hore loo sifay waxay isticmaalaan doorsoomayaashan isku midka ah iyo isku darka si ay u bixiyaan fasalo dhan oo diyaar u ah in la isticmaalo ee qaabaynta degdega ah.

Kala duwanaansho

Kala duwanaanshiyaha iyo khariidadaha ayaa go'aamiya tirada tiirarka, ballaca godka, iyo barta weydiimaha warbaahinta ee laga bilaabayo tiirarka sabbaynaya. Waxaan u isticmaalnaa kuwan si aan u soo saarno fasallada jaranjarada horay loo sii qeexay ee kor ku xusan, iyo sidoo kale isku darka caadiga ah ee hoos ku taxan.

$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
);

Isku qas

Isku-darka waxa loo istcimaalaa iyada oo lala kaashanayo doorsoomayaasha xadhkaha goosha si loo soo saaro semantic CSS ee tiirarka shabaqyada gaarka ah.

// 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);

Tusaale ahaan isticmaalka

Waxaad u beddeli kartaa doorsoomayaasha qiyamkaaga gaarka ah, ama waxaad isticmaali kartaa isku darka qiimahooda caadiga ah. Halkan waxaa ah tusaale isticmaalka goobaha caadiga ah si aad u abuurto qaabaynta laba-geesood oo farqiga u dhexeeya.

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

Nuxurka ugu muhiimsan

Xogta labaad

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

Habaynta shabkada

Adigoo adeegsanayna doorsoomayaashayada Sass ee ku dhex dhisan iyo khariidado, waxa suurtogal ah in si buuxda loo habeeyo fasalada jaangooyooyinka hore loo sii qeexay. Beddel tirada heerarka, cabbirrada weydiinta warbaahinta, iyo ballaca weelka-kadibna dib u soo uruuri.

Tiirarka iyo godadka

Tirada tiirarka xadhkaha waxaa lagu beddeli karaa doorsoomayaasha Sass. $grid-columnswaxaa loo isticmaalaa in lagu dhaliyo ballaadhka (boqolkiiba) ee tiir kasta iyadoo $grid-gutter-widthla dejinayo ballaca majaraha tiirarka.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Heerarka grid

Markaad ka gudubto tiirarka laftooda, waxaad sidoo kale habayn kartaa tirada heerarka kala-soocidda. Haddii aad rabto kaliya afar heerar koronto, waxaad cusboonaysiin lahayd $grid-breakpointsiyo $container-max-widthswax sidan oo kale ah:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Markaad wax isbeddel ah ku samaynayso doorsoomayaasha Sass ama maabka, waxaad u baahan doontaa inaad kaydiso isbeddelladaada oo aad dib u ururiso. Haddii sidaas la sameeyo waxa ay soo saari doontaa nooc cusub oo ah fasallada jaranjarada ee horay loo sii qeexay ee ballaadhka tiirka, ka-goynta, iyo dalbashada. Utility muuqalka ka jawaabaya sidoo kale waa la cusboonaysiin doonaa si loo isticmaalo meelaha goynta caadada ah. Hubi inaad dejiso qiyamka khadka px(ma rem, em, ama %).