Isistimu yegridi

Sebenzisa igridi yethu ye-flexbox ye-mobile-first flexbox enamandla ukuze wakhe izakhiwo zabo bonke umumo nosayizi ngenxa yesistimu yamakholomu ayishumi nambili, izigaba ezinhlanu ezisabelayo ezizenzakalelayo, okuguquguqukayo kwe-Sass nezingxube, kanye nenqwaba yamakilasi achazwe ngaphambilini.

Isebenza kanjani

Isistimu yegridi ye-Bootstrap isebenzisa uchungechunge lweziqukathi, imigqa, namakholomu ukuze kuhlelwe futhi kuqondiswe okuqukethwe. Yakhiwe nge- flexbox futhi isabela ngokugcwele. Ngezansi kunesibonelo kanye nokubheka okujulile kokuthi igridi ihlangana kanjani.

Umusha noma awujwayele nge-flexbox? Funda lo mhlahlandlela webhokisi le-CSS Tricks ukuze uthole ingemuva, amagama, imihlahlandlela, namazwibela ekhodi.

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

Isibonelo esingenhla sidala amakholomu amathathu anobubanzi obulinganayo kumadivayisi amancane, amaphakathi, amakhulu, namakhulu ngokwengeziwe sisebenzisa amakilasi ethu egridi achazwe kusengaphambili. Lawo makholomu agxile ekhasini elinomzali .container.

Ukuyihlukanisa, nansi indlela esebenza ngayo:

• Iziqukathi zinikeza indlela yokubeka phakathi nendawo nokupheda okuqukethwe kwesayithi lakho. Sebenzisa .containerkububanzi bephikseli esabelayo noma .container-fluidkuzo width: 100%zonke izimbobo zokubuka nosayizi bedivayisi.
• Imigqa iwukugoqa kwamakholomu. Ikholomu ngayinye inezingqimba padding(okuthiwa i-gutter) yokulawula isikhala phakathi kwazo. Lokhu paddingkube sekuphikiswa emigqeni enemajini eyinegethivu. Ngale ndlela, konke okuqukethwe kumakholomu akho kuqondaniswe ngokubonakalayo phansi kwesokunxele.
• Kusakhiwo segridi, okuqukethwe kufanele kufakwe phakathi kwamakholomu futhi amakholomu kuphela angaba izingane zemigqa.
• Ngenxa ye-flexbox, amakholomu egridi ngaphandle kokucaciswa azohleleka widthngokuzenzakalelayo njengamakholomu obubanzi obulinganayo. Isibonelo, izikhathi ezine .col-smngayinye izoba ngu-25% ububanzi ngokuzenzakalelayo ukusuka endaweni encane yokuhlukana nokukhuphuka. Bona isigaba samakholomu esakhiwo esizenzakalelayo ukuze uthole izibonelo ezengeziwe.
• Amakilasi ekholomu abonisa inani lamakholomu ongathanda ukuwasebenzisa kwanokuba ngu-12 umugqa ngamunye. Ngakho-ke, uma ufuna amakholomu amathathu anobubanzi obulinganayo ngaphesheya, ungasebenzisa .col-4.
• Amakholomu widths asethwe ngamaphesenti, ngakho ahlala ewuketshezi futhi enosayizi ngokuhlobene nento yawo engumzali.
• Amakholomu anezingqimba ukuze enze ama padding-gutters phakathi kwamakholomu angawodwana, nokho-ke, ungakwazi ukususa marginemigqeni paddingnakumakholomu nge- ..no-gutters.row
• Ukuze wenze igridi iphendule, kunezindawo zokunqamuka zegridi ezinhlanu, eyodwa endaweni ngayinye esabelayo yokuphumula : wonke ama-breakpoint (amancane kakhulu), amancane, amaphakathi, amakhulu, kanye namakhulu kakhulu.
• Ama-breakpoints egridi asekelwe kumibuzo yemidiya yobubanzi obuncane, okusho ukuthi asebenza kuleyo ndawo eyodwa yokunqamuka kanye nabo bonke abangaphezulu kwayo (isb., .col-sm-4kusebenza kumadivayisi amancane, amaphakathi, amakhulu, namakhulu kakhulu, kodwa hhayi indawo yokuqala xsyokunqamuka).
• Ungasebenzisa amakilasi egridi achazwe ngaphambilini (njenge .col-4) noma imiksi ye- Sass ukuze uthole umaki we-semantic owengeziwe.

Qaphela imikhawulo neziphazamisi ezizungeze i-flexbox , njengokungakwazi ukusebenzisa ezinye izici ze-HTML njengeziqukathi eziguquguqukayo .

Izinketho zegridi

Ngenkathi i-Bootstrap isebenzisa u em-s noma remu-s ukuchaza osayizi abaningi, o px-s basetshenziselwa ukunqanyulwa kwegridi nobubanzi besiqukathi. Lokhu kungenxa yokuthi ububanzi bembobo yokubuka bungamaphikseli futhi abushintshi nosayizi wefonti .

Bona ukuthi izici zesistimu yegridi ye-Bootstrap zisebenza kanjani kuwo wonke amadivayisi anetafula eliwusizo.

Amakholomu esakhiwo esizenzakalelayo

Sebenzisa amakilasi ekholomu aqondene ne-breakpoint ukuze kube lula ukulinganisa ikholomu ngaphandle kwekilasi elinezinombolo ezicacile njenge- .col-sm-6.

Ububanzi obulinganayo

Isibonelo, nazi izakhiwo zegridi ezimbili ezisebenza kuwo wonke amadivayisi nembobo yokubuka, ukusuka xsku- xl. Engeza noma iyiphi inombolo yamakilasi angenayunithi kuphoyinti ngalinye olidingayo futhi ikholomu ngayinye izoba nobubanzi obufanayo.

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

Imigqa eminingi enobubanzi obulinganayo

Dala amakholomu anobubanzi obulinganayo abala imigqa eminingi ngokufaka .w-100lapho ofuna amakholomu aphukele khona emugqeni omusha. Yenza amakhefu aphendule ngokuxuba .w-100nezinye izinsiza zokubonisa ezisabelayo .

Kube khona iphutha le- flexbox le-Safari elivimbele lokhu ekusebenzeni ngaphandle kokubeka obala flex-basisnoma border. Kunezinhlelo zokusebenza zezinguqulo zesiphequluli ezindala, kodwa akufanele zidingeke uma iziphequluli oziqondise zingaweli ezinguqulweni ze-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>

Ukusetha ububanzi bekholomu eyodwa

Isakhiwo esizenzakalelayo samakholomu egridi ye-flexbox siphinde sisho ukuthi ungasetha ububanzi bekholomu eyodwa futhi ube namakholomu ayizelamani ashintsha usayizi ngokuzenzakalelayo kuwo. Ungasebenzisa amakilasi egridi achazwe ngaphambilini (njengoba kukhonjisiwe ngezansi), imiksi yegridi, noma ububanzi bomugqa. Qaphela ukuthi amanye amakholomu azoshintsha usayizi kungakhathaliseki ububanzi bekholomu emaphakathi.

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

Okuqukethwe kobubanzi obuguquguqukayo

Sebenzisa col-{breakpoint}-autoamakilasi usayizi wamakholomu ngokusekelwe kububanzi bemvelo bokuqukethwe kwawo.

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

Amakilasi asabelayo

Igridi ye-Bootstrap ihlanganisa izigaba ezinhlanu zamakilasi achazwe ngaphambilini okwakha izakhiwo eziphendulayo eziyinkimbinkimbi. Enza ngendlela oyifisayo usayizi wamakholomu akho kumadivayisi amancane, amancane, amaphakathi, amakhulu, noma amakhulu ngokwengeziwe ngendlela obona kufaneleke ngayo.

Wonke ama-breakpoint

Kumagridi afanayo kusukela kwamadivayisi amancane kakhulu ukuya kwamakhulu, sebenzisa i- .colkanye .col-*namakilasi. Cacisa ikilasi elinezinombolo uma udinga ikholomu enosayizi othile; ngaphandle kwalokho, zizwe ukhululekile ukunamathela .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>

Istakwe ukuze ivundlile

Usebenzisa isethi eyodwa .col-sm-*yamakilasi, ungakha isistimu yegridi eyisisekelo eqala isitakikhi bese iba evundlile endaweni encane yokuphumula ( 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>

Hlanganisa futhi ufanise

Awufuni ukuthi amakholomu akho avele anqwabelene kwezinye izigaba zegridi? Sebenzisa inhlanganisela yamakilasi ahlukene esigabeni ngasinye njengoba kudingeka. Bheka isibonelo esingezansi ukuze uthole umbono ongcono wokuthi konke kusebenza kanjani.

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

Ama-Gutters

Ama-Gutters angalungiswa ngokusabela ngokupheda okuqondene ne-breakpoint kanye namakilasi ensiza yemajini engalungile. Ukuze ushintshe ama-gutters kumugqa onikeziwe, bhanqa insiza yemajini engemihle ku- .rowpadding nezinsiza ezimeshayo ku- .cols. Umzali .containernoma .container-fluidumzali angase adinge ukulungiswa ukuze agweme ukuchichima okungafuneki, asebenzise futhi insiza yokunamathisela ehambisanayo.

Nasi isibonelo sokwenza ngendlela oyifisayo igridi ye-Bootstrap endaweni enkulu ( lg) yokuphumula nangaphezulu. Sikhuphule i- .colpadding nge- .px-lg-5, saphikisana nalokho .mx-lg-n5ngomzali .rowsabe sesilungisa .containerisembozo nge- .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>

Amakholomu erowu

Sebenzisa .row-cols-*amakilasi aphendulayo ukuze usethe ngokushesha inani lamakholomu anikezela kangcono okuqukethwe kwakho nesakhiwo. Nakuba .col-*amakilasi avamile esebenza kumakholomu angawodwana (isb, .col-md-4), izigaba zamakholomu emigqa zisethwe kumzali .rownjengesinqamuleli.

Sebenzisa lawa makilasi amakholomu emigqa ukuze udale ngokushesha izakhiwo zegridi eziyisisekelo noma ukulawula izakhiwo zekhadi lakho.

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

Ungasebenzisa futhi i-Sass mixin ehambisana nayo, 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);
  }
}

Ukuqondanisa

Sebenzisa izinsiza zokuqondanisa kwe-flexbox ukuze uqondanise amakholomu aqondile naqondile. I-Internet Explorer 10-11 ayikusekeli ukuqondanisa okuqondile kwezinto eziguqukayo lapho isiqukathi esiguquguqukayo sino-a min-heightnjengoba kuboniswe ngezansi. Bheka i-Flexbugs #3 ukuze uthole imininingwane eyengeziwe.

Ukuqondanisa okuqondile

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

Ukuqondanisa okuvundlile

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

Awekho ama-gutters

Ama-gutter phakathi kwamakholomu kumakilasi ethu egridi achazwe kusengaphambili angasuswa ngokuthi .no-gutters. Lokhu kususa okuthi-negethivu u- margins kusuka .rowkanye nokuvundlile paddingkuwo wonke amakholomu ezingane.

Nansi ikhodi yomthombo yokudala lezi zitayela. Qaphela ukuthi ukukhishwa kwekholomu kuhanjiswa kumakholomu okuqala kuphela ezingane futhi kuqondiswe kusikhethi sesibaluli . Nakuba lokhu kukhiqiza isikhethi esiqondile, ukupheda kwekholomu kusengabuye kwenziwe ngendlela oyifisayo ngezinsiza zokuhlukanisa isikhala .

Udinga idizayini esukela konqenqemeni ukuya konqenqemeni? Lahla umzali .containernoma .container-fluid.

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

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

Ngokusebenza, nansi indlela ebukeka ngayo. Qaphela ukuthi ungaqhubeka nokusebenzisa lokhu nawo wonke amanye amakilasi egridi achazwe ngaphambilini (okuhlanganisa ububanzi bekholomu, izigaba ezisabelayo, ukuhlela kabusha, nokuningi).

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

Ukugoqa ikholomu

Uma amakholomu angaphezu kuka-12 ebekwe phakathi komugqa owodwa, iqembu ngalinye lamakholomu engeziwe, njengeyunithi eyodwa, lizogoqa emugqeni omusha.

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

Ukuhlukana kwekholomu

Ukuhlephula amakholomu emugqeni omusha ku-flexbox kudinga ukugenca okuncane: engeza i-elementi nanoma width: 100%yikuphi lapho ufuna ukugoqa khona amakholomu akho emugqeni omusha. Imvamisa lokhu kufezwa ngama-multiple .rows, kodwa akuzona zonke izindlela zokuqalisa ezingamela lokhu.

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

Ungase futhi usebenzise leli khefu ezindaweni ezithile zokunqamuka nezinsiza zethu zokubonisa ezisabelayo .

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

Ihlela kabusha

Oda amakilasi

Sebenzisa .order-amakilasi ukuze ulawule ukuhleleka okubukwayo kokuqukethwe kwakho. Lawa makilasi ayasabela, ngakho-ke ungasetha i- orderbreakpoint (isb, .order-1.order-md-2). Kufaka phakathi ukwesekwa 1kuzo 12zonke izigaba ezinhlanu zamagridi.

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

Kukhona futhi amakilasi aphendulayo .order-firstnamakilasi .order-lastashintsha orderisici ngokufaka order: -1kanye order: 13( order: $columns + 1), ngokulandelanayo. Lawa makilasi angabuye axutshwe .order-*namakilasi anezinombolo njengoba kudingeka.

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

Ukusetha amakholomu

Ungakwazi ukulungisa amakholomu egridi ngezindlela ezimbili: .offset-amakilasi ethu egridi aphendulayo kanye nezinsiza zethu zemajini . Amakilasi egridi alinganiswa ukuze afane namakholomu kuyilapho amamajini ewusizo kakhulu ezakhiweni ezisheshayo lapho ububanzi be-offset buyahlukahluka.

Amakilasi e-offset

Hambisa amakholomu kwesokudla usebenzisa .offset-md-*amakilasi. Lezi zigaba zandisa umkhawulo wesokunxele wekholomu *ngamakholomu. Isibonelo, .offset-md-4ihamba .col-md-4phezu kwamakholomu amane.

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

Ngokungeziwe ekususeni ikholomu ezindaweni ezisabelayo, ungase udinge ukusetha kabusha ama-offset. Bona lokhu kusebenza esibonelweni segridi .

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

Izinsiza ze-margin

Ngokuthuthela ku-flexbox ku-v4, ungasebenzisa izinsiza zemajini njengokuphoqa amakholomu ezelamani ukuthi aqhelelane .mr-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>

Ukwenza isidleke

Ukuze uhlanganise okuqukethwe kwakho ngegridi ezenzakalelayo, engeza entsha .rownesethi .col-sm-*yamakholomu ngaphakathi kwekholomu ekhona .col-sm-*. Imigqa efakwe kusidleke kufanele ifake isethi yamakholomu ahlanganisa kufika ku-12 noma ngaphansi (akudingekile ukuthi usebenzise wonke amakholomu angu-12 atholakalayo).

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Sass mixes

Uma usebenzisa amafayela we-Sass womthombo we-Bootstrap, unenketho yokusebenzisa okuguquguqukayo kwe-Sass nezingxube ukuze udale ukwakheka kwekhasi langokwezifiso, le-semantic, kanye nekhasi eliphendulayo. Amakilasi ethu egridi achazwe ngaphambilini asebenzisa lezi zimo eziguquguqukayo nezixube ukuhlinzeka ngesudi ephelele yamakilasi alungele ukusetshenziswa ezakhiwo ezisabelayo ngokushesha.

Okuguquguqukayo

Okuguquguqukayo namamephu kunquma inani lamakholomu, ububanzi be-gutter, kanye nendawo yombuzo wemidiya okufanele kuqalwe kuyo amakholomu antantayo. Sisebenzisa lezi ukuze sikhiqize amakilasi egridi achazwe ngaphambilini abhalwe ngenhla, kanye nezingxube zangokwezifiso ezibalwe ngezansi.

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

Imiksi

Imiksi isetshenziswa ngokuhambisana neziguquko zegridi ukuze kukhiqizwe i-CSS ye-semantic yamakholomu egridi ngayinye.

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

Ukusetshenziswa kwesibonelo

Ungakwazi ukuguqula okuguquguqukayo kube ngamavelu akho angokwezifiso, noma usebenzise nje ama-mixins ngamavelu awo azenzakalelayo. Nasi isibonelo sokusebenzisa izilungiselelo ezizenzakalelayo ukuze udale isakhiwo samakholomu amabili esinegebe phakathi.

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

Ukwenza ngokwezifiso igridi

Ngokusebenzisa okuguquguqukayo kwegridi ye-Sass eyakhelwe ngaphakathi namamephu, kungenzeka ukwenza ngendlela oyifisayo amakilasi egridi achazwe ngaphambilini. Shintsha inani lama-tiers, ubukhulu bemibuzo yemidiya, nobubanzi besiqukathi—bese uhlanganisa futhi.

Amakholomu nama-gutters

Inani lamakholomu egridi lingashintshwa ngokusebenzisa okuguquguqukayo kwe-Sass. $grid-columnsisetshenziselwa ukukhiqiza ububanzi (ngamaphesenti) bekholomu ngayinye kuyilapho $grid-gutter-widthisetha ububanzi bamagutha ekholomu.

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

Izigaba zegridi

Ukudlulela ngale kwamakholomu ngokwawo, ungase futhi wenze ngokwezifiso inani lezigaba zegridi. Uma ubufuna amagridi amane kuphela, ungabuyekeza $grid-breakpointsfuthi $container-max-widthskube into efana nalena:

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

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

Uma wenza noma yiziphi izinguquko eziguquguqukayo ze-Sass noma amamephu, uzodinga ukuthi ulondoloze izinguquko zakho futhi uphinde uhlanganise. Ukwenza kanjalo kuzokhipha isethi entsha sha yamakilasi egridi achazwe kusengaphambili obubanzi bekholomu, ama-offset, noku-oda. Izinsiza ezibonakalayo ezisabelayo nazo zizobuyekezwa ukuze kusetshenziswe ama-breakpoints angokwezifiso. Qiniseka ukuthi usetha amanani egridi ku px(hhayi rem, em, noma %).