Mfumo wa gridi ya taifa
Tumia gridi yetu ya nguvu ya kwanza ya kisanduku cha rununu kuunda miundo ya maumbo na ukubwa wote kwa shukrani kwa mfumo wa safu wima kumi na mbili, viwango vitano vya kuitikia chaguo-msingi, viwezo vya Sass na vichanganyiko, na makundi kadhaa yaliyobainishwa awali.
Inavyofanya kazi
Mfumo wa gridi ya Bootstrap hutumia mfululizo wa kontena, safu mlalo na safu wima ili kupanga na kupanga maudhui. Imejengwa kwa flexbox na inajibu kikamilifu. Chini ni mfano na kuangalia kwa kina jinsi gridi inavyounganishwa.
Je! wewe ni mgeni au hujui flexbox? Soma mwongozo huu wa kisanduku rahisi cha Mbinu za CSS kwa usuli, istilahi, miongozo na vijisehemu vya msimbo.
<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>
Mfano ulio hapo juu huunda safu wima tatu za upana sawa kwenye vifaa vidogo, vya kati, vikubwa na vikubwa zaidi kwa kutumia aina zetu za gridi zilizobainishwa awali. Safu wima hizo zimewekwa katikati ya ukurasa na mzazi .container
.
Kuivunja, hivi ndivyo inavyofanya kazi:
- Vyombo hutoa njia ya kuweka katikati na kuweka mlalo yaliyomo kwenye tovuti yako. Tumia
.container
kwa upana wa pikseli unaoitikia au.container-fluid
kwawidth: 100%
sehemu zote za kutazama na saizi za kifaa. - Safu ni vifungashio vya safu wima. Kila safu ina mlalo
padding
(inayoitwa gutter) kwa kudhibiti nafasi kati yao. Hiipadding
basi inapingwa kwenye safu na pambizo hasi. Kwa njia hii, maudhui yote katika safu wima yako yamepangwa kwa mwonekano chini upande wa kushoto. - Katika mpangilio wa gridi, maudhui lazima yawekwe ndani ya safu wima na safu wima pekee ndizo zinaweza kuwa watoto wa karibu wa safu mlalo.
- Shukrani kwa flexbox, safu wima za gridi bila maalum zitapangwa
width
kiotomatiki kama safu wima za upana sawa. Kwa mfano, matukio manne ya.col-sm
kila moja yatakuwa na upana wa 25% kutoka sehemu ndogo ya kukatika na kwenda juu. Tazama sehemu ya safu wima za mpangilio otomatiki kwa mifano zaidi. - Madarasa ya safu wima yanaonyesha idadi ya safu wima ambazo ungependa kutumia kati ya zinazowezekana 12 kwa kila safu. Kwa hivyo, ikiwa unataka safu wima tatu za upana sawa, unaweza kutumia
.col-4
. - Safu wima
width
s zimewekwa katika asilimia, kwa hivyo huwa na majimaji na ukubwa kulingana na kipengele kikuu chao. - Safu wima zina mlalo
padding
ili kuunda mifereji kati ya safu wima mahususi, hata hivyo, unaweza kuondoamargin
kutoka kwa safu mlalo napadding
kutoka kwa safu wima zilizo.no-gutters
na.row
. - Ili kufanya gridi kuitikia, kuna sehemu tano za kukatika kwa gridi, moja kwa kila sehemu inayoitikia : sehemu zote za kukiuka (ndogo zaidi), ndogo, za kati, kubwa na kubwa zaidi.
- Viwango vya kukatiza gridi vinatokana na hoja za upana wa chini kabisa, kumaanisha kwamba zinatumika kwa sehemu hiyo moja ya kukiuka na zote zilizo juu yake (km,
.col-sm-4
inatumika kwa vifaa vidogo, vya kati, vikubwa na vikubwa zaidi, lakini si sehemu ya kwanza yaxs
kuangazia). - Unaweza kutumia madarasa ya gridi yaliyofafanuliwa awali (kama
.col-4
) au michanganyiko ya Sass kwa uwekaji alama zaidi wa kisemantiki.
Fahamu vikwazo na hitilafu zinazozunguka flexbox , kama vile kutokuwa na uwezo wa kutumia baadhi ya vipengele vya HTML kama vyombo vinavyobadilikabadilika .
Chaguzi za gridi ya taifa
Wakati Bootstrap hutumia em
s au rem
s kufafanua saizi nyingi, px
s hutumika kwa viingilio vya gridi na upana wa kontena. Hii ni kwa sababu upana wa kituo cha kutazama uko katika pikseli na haubadiliki na saizi ya fonti .
Tazama jinsi vipengele vya mfumo wa gridi ya Bootstrap hufanya kazi kwenye vifaa vingi vilivyo na jedwali rahisi.
Ndogo zaidi <576px |
Ndogo ≥576px |
Wastani ≥768px |
Kubwa ≥992px |
Kubwa zaidi ≥1200px |
|
---|---|---|---|---|---|
Upana wa juu wa chombo | Hakuna (otomatiki) | 540px | 720px | 960px | 1140px |
Kiambishi awali cha darasa | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# ya safu wima | 12 | ||||
Upana wa gutter | 30px (px 15 kila upande wa safu) | ||||
Nestable | Ndiyo | ||||
Kuagiza safu | Ndiyo |
Safu wima za mpangilio otomatiki
Tumia madarasa ya safu wima mahususi kwa uwekaji ukubwa wa safu wima kwa urahisi bila darasa lililo na nambari dhahiri kama .col-sm-6
.
Sawa-upana
Kwa mfano, hapa kuna mipangilio miwili ya gridi inayotumika kwa kila kifaa na kituo cha kutazama, kutoka xs
hadi xl
. Ongeza idadi yoyote ya madarasa yasiyo na kitengo kwa kila sehemu ya kukatika unayohitaji na kila safu itakuwa na upana sawa.
<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>
Sawa-upana mistari mingi
Unda safu wima zenye upana sawa ambazo zinajumuisha mistari mingi kwa kuingiza .w-100
mahali unapotaka safu wima zivunjike hadi kwenye mstari mpya. Fanya mapumziko kuitikia kwa kuchanganya .w-100
na huduma zingine za onyesho .
Kulikuwa na mdudu wa Safari flexbox ambayo ilizuia hii kufanya kazi bila wazi flex-basis
au border
. Kuna usuluhishi kwa matoleo ya zamani ya kivinjari, lakini haipaswi kuwa muhimu ikiwa vivinjari unavyolenga havitaingia kwenye matoleo ya hitilafu.
<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>
Kuweka upana wa safu moja
Mpangilio otomatiki wa safu wima za gridi ya flexbox pia inamaanisha unaweza kuweka upana wa safu wima moja na kuwa na safu wima ndugu kubadilisha ukubwa kiotomatiki kuizunguka. Unaweza kutumia madarasa ya gridi yaliyofafanuliwa awali (kama inavyoonyeshwa hapa chini), mchanganyiko wa gridi, au upana wa ndani. Kumbuka kuwa safu wima zingine zitabadilisha ukubwa bila kujali upana wa safu ya katikati.
<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>
Maudhui ya upana unaobadilika
Tumia col-{breakpoint}-auto
madarasa kwa ukubwa wa safuwima kulingana na upana asili wa yaliyomo.
<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>
Madarasa ya mwitikio
Gridi ya Bootstrap inajumuisha viwango vitano vya madarasa yaliyofafanuliwa awali kwa ajili ya kujenga mipangilio changamano inayoitikia. Geuza ukubwa wa safuwima zako upendavyo kwenye vifaa vidogo zaidi, vidogo, vya kati, vikubwa au vikubwa zaidi unavyoona inafaa.
Vizuizi vyote
Kwa gridi ambazo ni sawa kutoka kwa vifaa vidogo hadi vikubwa zaidi, tumia .col
na .col-*
madarasa. Taja darasa la nambari wakati unahitaji safu ya ukubwa maalum; vinginevyo, jisikie huru kushikamana na .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>
Imepangwa kwa mlalo
Kwa kutumia seti moja ya .col-sm-*
madarasa, unaweza kuunda mfumo wa msingi wa gridi ya taifa ambao huanza kupangwa na kuwa mlalo kwenye sehemu ndogo ya kukatika ( 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>
Changanya na ufanane
Je! hutaki safu wima zako zirundikane tu katika viwango vingine vya gridi ya taifa? Tumia mchanganyiko wa madarasa tofauti kwa kila daraja inapohitajika. Tazama mfano hapa chini kwa wazo bora la jinsi yote inavyofanya kazi.
<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>
Mifereji ya maji
Mifereji ya mifereji ya maji inaweza kurekebishwa kwa uwajibikaji kwa kutumia pedi za sehemu mahususi na aina hasi za matumizi za ukingo. Ili kubadilisha mifereji ya maji katika safu fulani, unganisha matumizi hasi ya ukingo kwenye .row
na huduma zinazolingana za pedi kwenye .col
s. Huenda mzazi .container
au .container-fluid
mzazi akahitaji kurekebishwa pia ili kuepuka kufurika kusikotakikana, kwa kutumia tena matumizi yanayolingana ya kuweka pedi.
Huu hapa ni mfano wa kubinafsisha gridi ya Bootstrap kwenye sehemu kubwa ya ( lg
) na hapo juu. Tumeongeza .col
pedi na .px-lg-5
, tukapinga ile .mx-lg-n5
kwenye mzazi .row
na kisha kurekebisha .container
kanga na .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>
Safu wima
Tumia .row-cols-*
madarasa ya kuitikia ili kuweka kwa haraka idadi ya safu wima zinazotoa maudhui na mpangilio wako vyema. Ingawa .col-*
madarasa ya kawaida hutumika kwa safu wima mahususi (kwa mfano, .col-md-4
), madarasa ya safu mlalo yamewekwa kwa mzazi .row
kama njia ya mkato.
Tumia madarasa haya ya safu mlalo ili kuunda kwa haraka miundo msingi ya gridi au kudhibiti mipangilio ya kadi yako.
<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>
Unaweza pia kutumia mchanganyiko unaoandamana wa Sass, 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);
}
}
Mpangilio
Tumia huduma za upatanishaji wa kisanduku chenye kubadilika ili kupanga safu wima kiwima na kimlalo. Internet Explorer 10-11 haiauni upangaji wima wa vipengee vinavyopinda wakati chombo cha kukunja kina min-height
kama inavyoonyeshwa hapa chini. Tazama Flexbugs #3 kwa maelezo zaidi.
Mpangilio wa wima
<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>
Mpangilio wa mlalo
<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>
Hakuna mifereji ya maji
Mifereji ya maji kati ya safu wima katika madarasa yetu ya gridi yaliyofafanuliwa awali yanaweza kuondolewa kwa .no-gutters
. Hii huondoa margin
s hasi kutoka .row
na mlalo padding
kutoka kwa safu wima zote za watoto.
Hapa kuna msimbo wa chanzo wa kuunda mitindo hii. Kumbuka kuwa ubatilishaji wa safu wima umewekwa kwa safu wima za watoto wa kwanza pekee na unalengwa kupitia kichagua sifa . Ingawa hii hutoa kiteuzi mahususi zaidi, uwekaji safu wima bado unaweza kubinafsishwa zaidi kwa kutumia nafasi za huduma .
Je, unahitaji muundo wa ukingo hadi ukingo? Acha mzazi .container
au .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
Kwa mazoezi, hii ndio jinsi inaonekana. Kumbuka unaweza kuendelea kutumia hii pamoja na madarasa mengine yote ya gridi yaliyofafanuliwa awali (ikiwa ni pamoja na upana wa safu wima, viwango vinavyoitikia, kupanga upya, na zaidi).
<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>
Kufunga safu
Ikiwa zaidi ya safu wima 12 zimewekwa ndani ya safu mlalo moja, kila kundi la safu wima za ziada, kama kitengo kimoja, litajifunga kwenye mstari mpya.
Tangu 9 + 4 = 13 > 12, div hii ya safu wima 4 inafungwa kwenye mstari mpya kama kitengo kimoja kinachoambatana.
wima zinazofuata zinaendelea kwenye mstari mpya.
<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>
Mapumziko ya safu wima
Kuvunja safu wima hadi mstari mpya katika flexbox kunahitaji udukuzi mdogo: ongeza kipengele width: 100%
popote unapotaka kukunja safuwima zako kwenye mstari mpya. Kawaida hii inakamilishwa na .row
s nyingi, lakini sio kila njia ya utekelezaji inaweza kuhesabu hii.
<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>
Unaweza pia kutumia mapumziko haya katika sehemu mahususi za kuhitimisha huduma zetu za onyesho .
<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>
Kupanga upya
Agiza madarasa
Tumia .order-
madarasa kudhibiti mpangilio wa kuona wa maudhui yako. Madarasa haya ni msikivu, kwa hivyo unaweza kuweka order
kwa kuvunja (kwa mfano, .order-1.order-md-2
). Inajumuisha usaidizi kwa 1
viwango 12
vyote vitano vya gridi ya taifa.
<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>
Pia kuna madarasa sikivu .order-first
na .order-last
yanayobadilisha order
kipengele kwa kutumia order: -1
na order: 13
( order: $columns + 1
), mtawalia. Madarasa haya pia yanaweza kuchanganywa na .order-*
madarasa yaliyohesabiwa kama inahitajika.
<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>
Kuweka safu wima
Unaweza kurekebisha safu wima kwa njia mbili: .offset-
madarasa yetu ya gridi ya jibu na huduma zetu za ukingo . Madarasa ya gridi yana ukubwa ili kuendana na safu wima ilhali pambizo ni muhimu zaidi kwa mipangilio ya haraka ambapo upana wa mkato ni tofauti.
Madarasa ya kukabiliana
Sogeza safu kulia kwa kutumia .offset-md-*
madarasa. Madarasa haya huongeza ukingo wa kushoto wa safu kwa safu *
wima. Kwa mfano, .offset-md-4
husogea .col-md-4
zaidi ya safu wima nne.
<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>
Kando na ufutaji wa safu wima kwenye sehemu za kukiuka zinazoitikia, huenda ukahitaji kuweka upya vipengee. Tazama hii katika vitendo katika mfano wa gridi ya taifa .
<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>
Huduma za pembezoni
Pamoja na hoja ya flexbox katika v4, unaweza kutumia huduma za ukingo kama vile .mr-auto
kulazimisha safu wima kutoka kwa nyingine.
<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>
Nesting
Ili kuweka maudhui yako kwa gridi chaguo-msingi, ongeza safu mpya .row
na seti ya .col-sm-*
safu wima iliyopo .col-sm-*
. Safu mlalo zilizowekwa lazima zijumuishe seti ya safu wima zinazoongeza hadi 12 au chache (si lazima utumie safu wima zote 12 zilizopo).
<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>
Mchanganyiko wa Sass
Unapotumia faili za chanzo za Sass za Bootstrap, una chaguo la kutumia viambajengo vya Sass na vichanganyiko ili kuunda mipangilio ya ukurasa maalum, ya kimantiki na inayoitikia. Madarasa yetu ya gridi yaliyofafanuliwa awali hutumia vigeu hivi sawa na vichanganyiko ili kutoa safu nzima ya madarasa yaliyo tayari kutumia kwa miundo inayoitikia kwa haraka.
Vigezo
Vigezo na ramani huamua idadi ya safu wima, upana wa mfereji wa maji, na sehemu ya hoja ya midia ambapo safu wima zinazoelea zinaweza kuanza. Tunatumia hizi ili kutengeneza madarasa ya gridi yaliyofafanuliwa awali yaliyoandikwa hapo juu, na vile vile kwa michanganyiko maalum iliyoorodheshwa hapa chini.
$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
);
Mchanganyiko
Michanganyiko hutumiwa pamoja na vigeu vya gridi ya taifa ili kutoa CSS ya kisemantiki kwa safu wima za gridi mahususi.
// 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);
Mfano wa matumizi
Unaweza kurekebisha anuwai kwa maadili yako mwenyewe, au tumia tu mchanganyiko na maadili yao ya msingi. Huu hapa ni mfano wa kutumia mipangilio chaguo-msingi ili kuunda muundo wa safu wima mbili na pengo kati.
.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>
Kubinafsisha gridi ya taifa
Kwa kutumia vigeu vyetu vilivyojengewa ndani vya gridi ya Sass na ramani, inawezekana kubinafsisha kabisa aina za gridi zilizoainishwa awali. Badilisha idadi ya viwango, vipimo vya hoja ya media, na upana wa kontena-kisha ujumuishe.
Nguzo na mifereji ya maji
Idadi ya safu wima za gridi inaweza kubadilishwa kupitia vigeu vya Sass. $grid-columns
hutumika kutoa upana (katika asilimia) ya kila safu mahususi huku $grid-gutter-width
ikiweka upana wa mifereji ya safu wima.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Viwango vya gridi
Ukisonga zaidi ya safu wima zenyewe, unaweza pia kubinafsisha idadi ya viwango vya gridi ya taifa. Ikiwa ungetaka safu nne tu za gridi, ungesasisha $grid-breakpoints
na $container-max-widths
kwa kitu kama hiki:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Unapofanya mabadiliko yoyote kwa vigeu vya Sass au ramani, utahitaji kuhifadhi mabadiliko yako na kukusanya tena. Kufanya hivyo kutatoa seti mpya kabisa ya madarasa ya gridi yaliyofafanuliwa awali kwa upana wa safu, marekebisho, na kuagiza. Huduma za mwonekano wa kuitikia pia zitasasishwa ili kutumia vizuizi maalum. Hakikisha umeweka thamani za gridi ndani px
(si rem
, em
, au %
).