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.
<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
.container
ballaca pixel-ka jawaaba ama.container-fluid
dhammaanwidth: 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. Tanpadding
waxa 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
width
waxay si toos ah u qaabayn doonaan sidii tiirar ballac siman. Tusaale ahaan, afar xaaladood oo mid.col-sm
walba 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
width
s waxa loo dejiyey boqolleyda, markaa had iyo jeer waa dareere iyo cabbir marka loo eego xubinta waalidka. - Tiiraryadu waxay leeyihiin siman
padding
si ay u abuuraan majaraha u dhexeeya tiirar gaar ah, si kastaba ha ahaatee, waxaad ka saari kartaamargin
safafka iyopadding
tiirarka.no-gutters
ku 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-4
waxay khuseeyaan kuwa yaryar, dhexe, waaweyn, iyo aaladaha waaweyn ee dheeraadka ah, laakiin maaha meesha ugu horeysaxs
). - 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 em
s ama rem
s si loo qeexo cabbirrada intooda badan, px
s 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 xs
ilaa 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.
<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>
Xariiqo badan oo ballac ah oo siman
Samee tiirar ballac siman oo ku kala fidinaya xariiqyo badan adoo gelinaya .w-100
meel aad rabto in tiirarku u jebiyaan xariiq cusub. Ka dhig nasiishooyinka kuwo jawaab celin leh adiga oo ku daraya .w-100
qaar ka mid ah yutiilitida soo bandhigida ee jawaab celinta leh .
Waxaa jiray dhiqlaha Safari flexbox kaas oo ka hor istaagay in tani ay shaqeyso iyada oo aan si cad flex-basis
ama border
. Waxa jira meelo laga shaqayn karo oo loogu talagalay noocyada biraawsarkaaga hore, laakiin waa inaanay daruuri u noqon haddii daalacashadaadu aanay ku dhicin noocyada buggy.
<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>
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.
<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}-auto
fasalada si aad u cabbirto tiirarka ku salaysan ballaca dabiiciga ah ee ka kooban.
<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>
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 .col
iyo .col-*
fasalada. Sheeg fasal nambaraysan marka aad u baahan tahay tiir cabbir gaar ah; haddii kale, xor u noqo inaad ku dhegto .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>
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
).
<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>
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.
<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>
Gutters
Godadka waxa lagu hagaajin karaa si taxadar leh iyadoo lagu hagaajinayo suufka u gaarka ah barta jabinta iyo fasalada utility margin negative. Si aad u bedesho majaraha safka ah ee safka ah, ku lamee utility margin taban ee .row
ku yaala .col
s. Waalidka .container
ama .container-fluid
waalidka ayaa laga yaabaa inay u baahdaan in sidoo kale la hagaajiyo si looga fogaado qulqulka aan la rabin, iyadoo la isticmaalayo mar kale u dhigma utility suufka.
Waa kuwan tusaale lagu habeynayo shabkada Bootstrap ee meesha weyn ee ( lg
) jabinta iyo korka. Waxaan ku kordhinay .col
suufka .px-lg-5
, taas ayaan .mx-lg-n5
kaga hortagnay waalidka .row
ka dibna ku hagaajinay .container
duubka .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>
Tiirar saf ah
Isticmaal .row-cols-*
fasalada jawaab celinta leh si aad si dhakhso leh u dejiso tirada tiirarka sida ugu fiican u keena macluumaadkaaga iyo qaabkaaga. Halka .col-*
fasallada caadiga ah lagu dabaqo tiirarka gaarka ah (tusaale, .col-md-4
), fasallada safafka waxaa loo dejiyay waalidka .row
si gaaban.
Isticmaal fasalada safafkan si aad si dhakhso leh ugu abuurto jaantusyada shabaqyada aasaasiga ah ama si aad u maamusho khariidadaha kaadhkaaga.
<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>
Waxa kale oo aad isticmaali kartaa isku darka Sass ee la socda 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);
}
}
Toosin
Isticmaal qalabka isku toosinta flexbox si aad u toosiso tiirarka si toos ah iyo toosan. Internet Explorer 10-11 ma taageerto toosinta toosan ee walxaha dabacsan marka weelka dabacsani leeyahay min-height
sida hoos ku cad. Faahfaahin dheeraad ah ka eeg Flexbugs #3.
toosan toosan
<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>
Toosin toosan
<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 margin
iyo .row
jiifka padding
dhammaan 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 .container
ama .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).
<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>
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.
Tan iyo 9 + 4 = 13> 12, 4-column-ballaaran div waxa lagu duuduubay xariiq cusub sidii hal unug oo xidhiidhsan.
xiga waxay ku sii socdaan khadka cusub.
<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>
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 .row
s badan, laakiin qaab kasta oo dhaqangelin ah kuma xisaabtami karo tan.
<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>
Waxa kale oo aad ku dabaqi kartaa fasaxan meelaha nasashada ee gaarka ah adigoo isticmaalaya adeegyadeena bandhiga ee ka jawaabaya .
<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>
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 order
goynta (tusaale, .order-1.order-md-2
). 1
Waxaa ku jira taageerada 12
dhammaan shanta heerar ee kala duwan.
<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>
Waxa kale oo jira ka jawaab celin .order-first
iyo .order-last
fasallo beddela order
curiyaha iyagoo codsanaya order: -1
iyo order: 13
( order: $columns + 1
), siday u kala horreeyaan. Fasalladan waxa kale oo lagu dhex milmi karaa fasallada nambarada leh .order-*
haddii loo baahdo.
<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>
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-4
uu .col-md-4
ka wareegayaa afar tiir.
<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>
Marka lagu daro nadiifinta tiirka meelaha jabinta jawaabaha, waxaa laga yaabaa inaad u baahato inaad dib u dejiso. Fiiri tan ficil ahaan tusaalaha shabkada .
<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>
Utility Margin
Markaad u guurto flexbox gudaha v4, waxaad isticmaali kartaa utility margin sida .mr-auto
inaad ka fogaato tiirarka walaalaha.
<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>
Buul
Si aad macluumaadkaaga ugu dhejiso shabagga caadiga ah, ku dar tiirar cusub .row
iyo 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).
<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>
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 {
@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>
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-columns
waxaa loo isticmaalaa in lagu dhaliyo ballaadhka (boqolkiiba) ee tiir kasta iyadoo $grid-gutter-width
la 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-breakpoints
iyo $container-max-widths
wax 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 %
).