Source

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.

Moja ya safu wima tatu

<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 .containerkwa upana wa pikseli unaojibu au .container-fluidkwa width: 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. Kisha hii paddinginapingwa 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 widthkiotomatiki kama safu wima za upana sawa. Kwa mfano, matukio manne ya .col-smkila 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 widths zimewekwa katika asilimia, kwa hivyo huwa na majimaji na ukubwa kulingana na kipengele kikuu chao.
Safu wima zina mlalo paddingili kuunda mifereji kati ya safu wima mahususi, hata hivyo, unaweza kuondoa marginkutoka kwa safu mlalo na paddingkutoka kwa safu wima zilizo .no-guttersna .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-4inatumika kwa vifaa vidogo, vya kati, vikubwa na vikubwa zaidi, lakini si sehemu ya kwanza ya xskuangazia).
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 ems au rems kufafanua saizi nyingi, pxs 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 xshadi xl. Ongeza idadi yoyote ya madarasa yasiyo na kitengo kwa kila sehemu ya kuhitimisha unayohitaji na kila safu itakuwa na upana sawa.

1 kati ya 2

2 ya 2

1 kati ya 3

2 ya 3

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

Safu wima za upana sawa zinaweza kugawanywa katika mistari mingi, lakini kulikuwa na hitilafu ya Safari flexbox ambayo ilizuia hii kufanya kazi bila uwazi flex-basisau border. Kuna suluhisho kwa matoleo ya zamani ya kivinjari, lakini haipaswi kuwa muhimu ikiwa unasasishwa.

Safu

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

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), michanganyiko ya gridi, au upana wa ndani. Kumbuka kuwa safu wima zingine zitabadilisha ukubwa bila kujali upana wa safu ya katikati.

1 kati ya 3

2 kati ya 3 (pana)

3 ya 3

1 kati ya 3

2 kati ya 3 (pana)

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

Maudhui ya upana unaobadilika

Tumia col-{breakpoint}-automadarasa kwa ukubwa wa safuwima kulingana na upana asili wa yaliyomo.

1 kati ya 3

Maudhui ya upana unaobadilika

3 ya 3

1 kati ya 3

Maudhui ya upana unaobadilika

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

Sawa-upana safu nyingi

Unda safu wima za upana sawa ambazo huchukua safu mlalo nyingi kwa kuingiza .w-100mahali unapotaka safu wima zivunjike hadi kwenye mstari mpya. Fanya mapumziko kuitikia kwa kuchanganya .w-100na huduma zingine za onyesho .

col

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

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 .colna .col-*madarasa. Taja darasa la nambari wakati unahitaji safu ya ukubwa maalum; vinginevyo, jisikie huru kushikamana na .col.

col

kol-8

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

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

col-sm-8

col-sm-4

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

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

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

Mifereji ya maji

Mifereji ya mifereji ya maji inaweza kurekebishwa kwa uwajibikaji kwa pedi za sehemu mahususi na viwango hasi vya matumizi vya ukingo. Ili kubadilisha mifereji ya maji katika safu fulani, unganisha matumizi hasi ya ukingo kwenye .rowna huduma zinazolingana za pedi kwenye .cols. Huenda mzazi .containerau .container-fluidmzazi 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 .colpedi na .px-lg-5, tukapinga ile .mx-lg-n5kwenye mzazi .rowna kisha kurekebisha .containerkanga na .px-lg-5.

Uwekaji safu maalum

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

Mpangilio

Tumia huduma za upatanishaji wa kisanduku chenye kubadilika ili kupanga safu wima kiwima na kimlalo.

Mpangilio wa wima

Moja ya safu wima tatu

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

Moja ya safu wima tatu

<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

Moja ya safu mbili

<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 margins hasi kutoka .rowna mlalo paddingkutoka kwa safu wima zote za watoto.

Huu hapa ni 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 kiteuzi cha sifa . Ingawa hii hutoa kiteuzi mahususi zaidi, pedi za safu wima bado zinaweza kubinafsishwa zaidi kwa kutumia nafasi za huduma .

Je, unahitaji muundo wa ukingo hadi ukingo? Acha mzazi .containerau .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).

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

Kufunga safu

Ikiwa zaidi ya safu wima 12 zimewekwa ndani ya safu mlalo moja, kila kikundi cha safu wima za ziada, kama kitengo kimoja, kitafunga mstari mpya.

.kol-9

.col-4
Tangu 9 + 4 = 13 > 12, div hii ya safu wima 4 inafungwa kwenye mstari mpya kama kitengo kimoja kinachoambatana.

.col-6 Safu
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 &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>

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 .rows nyingi, lakini sio kila njia ya utekelezaji inaweza kuhesabu hii.

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

Unaweza pia kutumia mapumziko haya katika sehemu mahususi za kuhitimisha huduma zetu za onyesho .

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

Kupanga upya

Agiza madarasa

Tumia .order-madarasa kudhibiti mpangilio wa kuona wa maudhui yako. Madarasa haya ni msikivu, kwa hivyo unaweza kuweka orderkwa kuvunja (kwa mfano, .order-1.order-md-2). Inajumuisha usaidizi kwa 1viwango 12vyote vitano vya gridi ya taifa.

Kwanza, lakini bila mpangilio

Pili, lakini mwisho

Tatu, lakini kwanza

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

Pia kuna madarasa sikivu .order-firstna .order-lastyanayobadilisha orderkipengele kwa kutumia order: -1na order: 13( order: $columns + 1), mtawalia. Madarasa haya yanaweza pia kuchanganywa na .order-*madarasa yaliyohesabiwa kama inahitajika.

Kwanza, lakini mwisho

Pili, lakini bila mpangilio

Tatu, lakini kwanza

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

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-4husogea .col-md-4zaidi ya safu wima nne.

.col-md-4

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

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

.col-md-6 .offset-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>

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 .

.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="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-autokulazimisha safu wima kutoka kwa nyingine.

.col-md-4

.col-md-4 .ml-otomatiki

.col-md-3 .ml-md-otomatiki

.col-auto .mr-auto

.col-auto

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

Kiwango cha 1: .col-sm-9

Kiwango cha 2: .col-8 .col-sm-6

Kiwango cha 2: .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>

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 mpangilio wa safu wima mbili na pengo kati.

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

Maudhui kuu

Maudhui ya pili

<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 darasa za gridi zilizofafanuliwa 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-columnshutumika kutoa upana (katika asilimia) ya kila safu mahususi huku $grid-gutter-widthikiweka 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-breakpointsna $container-max-widthskwa 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 %).