Inkqubo yegridi

Sebenzisa igridi yethu enamandla ye-mobile-first flexbox ukwakha uyilo lwazo zonke iimilo kunye nobukhulu ngenxa yenkqubo yekholamu ezilishumi elinambini, amanqanaba amahlanu aphendulayo angagqibekanga, izinto eziguquguqukayo ze-Sass kunye nemixube, kunye neeklasi ezininzi ezichazwe kwangaphambili.

Ingaba isebenza kanjani

Inkqubo yegridi yeBootstrap isebenzisa uthotho lwezikhongozeli, iirowu, kunye neekholamu kuyilo kunye nokulungelelanisa umxholo. Yakhiwe nge- flexbox kwaye iyaphendula ngokupheleleyo. Ngezantsi umzekelo kunye nokujongwa ngokunzulu kwindlela igridi edibana ngayo.

Umtsha okanye awuqhelananga neflexbox? Funda le CSS Tricks flexbox guide for imvelaphi, isigama, izikhokelo, kunye neziqwengana zekhowudi.

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

Lo mzekelo ungasentla udala iikholamu ezintathu zobubanzi obulinganayo kwizinto ezincinci, eziphakathi, ezinkulu, kunye nezikhulu ezongezelelweyo zisebenzisa iiklasi zegridi ezichazwe kwangaphambili. Ezo kholamu zibekwe embindini wephepha elinomzali .container.

Ukuyichitha, nantsi indlela esebenza ngayo:

• Izikhongozeli zibonelela ngendlela yokubeka embindini kunye nokuphehla ngokuthe tye imixholo yesayithi yakho. Sebenzisa .containerkububanzi bepikseli ephendulayo okanye .container-fluidkuzo width: 100%zonke iindawo zokujonga kunye nobukhulu besixhobo.
• Imiqolo ziziqwenga zemiqolo. Ikholamu nganye inethe tye padding(ebizwa ngokuba yigutter) yokulawula isithuba phakathi kwayo. Oku paddingke kuchaswa kwimiqolo enemida ethabathayo. Ngale ndlela, wonke umxholo kwikholamu yakho ulungelelaniswe ngokubonakalayo ezantsi kwicala lasekhohlo.
• Kuyilo lwegridi, umxholo kufuneka ubekwe ngaphakathi kwikholamu kwaye kuphela iikholamu ezinokuba ngabantwana bangoko kwimiqolo.
• Enkosi kwi-flexbox, iikholamu zegridi ngaphandle kokuchaziweyo widthziya kuyila ngokuzenzekelayo njengeekholamu zobubanzi obulinganayo. Umzekelo, iimeko ezine .col-smziya kuba ngokuzenzekelayo ngama-25% ububanzi ukusuka kwindawo encinci yokuphumla ukuya phezulu. Bona icandelo lemiqolo yoyilo oluzenzekelayo ngemizekelo emininzi.
• Iiklasi zekholamu zibonisa inani leekholamu ongathanda ukuyisebenzisa ngaphandle kwe-12 enokwenzeka kumqolo ngamnye. Ke, ukuba ufuna iikholamu ezintathu zobubanzi obulinganayo, ungasebenzisa .col-4.
• Ikholamu widths zisetiwe ngokweepesenti, ngoko ke zihlala zimanzi kwaye zinobungakanani obunxulumene nomzali wazo.
• Iikholamu zithe tye paddingukwenza igatha phakathi kweekholamu zomntu ngamnye, nangona kunjalo, ungasusa marginkwimiqolo kunye nakwizintlu paddingezinoluhlu .no-gutterslwe .row.
• Ukwenza igridi iphendule, kukho iindawo zokuqhawula igridi ezintlanu, enye kwindawo nganye esabelayo yokusabela : zonke iindawo zokuqhawula (ezincinci kakhulu), ezincinci, eziphakathi, ezinkulu, kunye nezikhulu ezingaphezulu.
• Izahlulo zegrid zisekwe kubuncinci bemibuzo yemithombo yeendaba, oku kuthetha ukuba zisebenza kuloo ndawo yoqhawulo kunye nabo bonke abo bangaphezulu kwayo (umz., .col-sm-4isebenza kwizixhobo ezincinci, eziphakathi, ezikhulu, kunye nezikhulu ezongezelelweyo, kodwa hayi indawo yokuqala xs).
• Ungasebenzisa iiklasi zegridi ezichazwe kwangaphambili (ezifana .col-4) okanye imixube yeSass kuphawulo lwesemantic .

Yamkela imida kunye neebugs ezijikeleze iflexbox , njengokungakwazi ukusebenzisa ezinye izinto zeHTML njengezikhongozeli eziguqukayo .

Iinketho zegridi

Ngelixa iBootstrap isebenzisa ems okanye rems ukuchaza uninzi lweesayizi, pxs zisetyenziselwa iindawo zokuqhawula igridi kunye nobubanzi besikhongozeli. Oku kungenxa yokuba ububanzi bendawo yokujonga bukwipixels kwaye abutshintshi kunye nobungakanani befonti .

Jonga indlela imiba yendlela yegridi yeBootstrap esebenza ngayo kuzo zonke izixhobo ezininzi ezinetafile ephathwayo.

Imiqolo yoyilo oluzenzekelayo

Sebenzisa iiklasi zekholamu ezikhethekileyo zokulinganisa iikholamu ngokulula ngaphandle kodidi oluneenombolo olucacileyo njenge .col-sm-6.

Ububanzi obulinganayo

Umzekelo, nantsi indlela yoyilo lwegridi emibini esebenza kwisixhobo ngasinye kunye nendawo yokujonga, ukusuka xsukuya kwi xl. Yongeza naliphi na inani leeklasi ezingaphantsi kweyunithi kwi-breakpoint nganye oyifunayo kwaye yonke ikholamu iya kuba 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>

Equal-width multi-line

Yenza imiqolo yobubanzi obulinganayo eyenza imigca emininzi ngokufaka .w-100apho ufuna ukuba imiqolo yaphuke kumgca omtsha. Yenza iikhefu ziphendule ngokuxuba .w-100nezinye izinto ezibonisayo eziphendulayo .

Kwakukho iSafari flexbox bug ethintele oku ekusebenzeni ngaphandle kokucacileyo flex-basisokanye border. Kukho iindlela zokusebenza kwiinguqulelo zebrawuza endala, kodwa akufuneki ukuba iyimfuneko ukuba izikhangeli zakho ekujoliswe kuzo aziweli kwiinguqulelo zebuggy.

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

Ukucwangcisa ububanzi bekholamu enye

Uyilo oluzenzekelayo lwekholamu yegridi ye-flexbox ikwathetha ukuba unokuseta ububanzi bekholamu enye kwaye ube neekholamu zabazalwana noodade ngokuzenzekelayo ukujikeleza kuyo. Ungasebenzisa iiklasi zegridi ezichazwe kwangaphambili (njengoko kubonisiwe ngezantsi), imixube yegridi, okanye ububanzi bomgca. Qaphela ukuba ezinye iikholamu ziya kwenza ubungakanani kwakhona kungakhathaliseki ububanzi boluhlu oluphakathi.

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

Umxholo wobubanzi obuguquguqukayo

Sebenzisa col-{breakpoint}-autoiiklasi ukuya kwiikholomu zobungakanani ngokusekelwe kububanzi bendalo bomxholo wabo.

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

Iiklasi eziphendulayo

Igridi yeBootstrap ibandakanya amanqanaba amahlanu eeklasi ezichazwe kwangaphambili zokwakhiwa koyilo olunzima oluphendulayo. Yenza ngokwezifiso ubungakanani bekholamu yakho kwizinto ezincinci, ezincinci, eziphakathi, ezinkulu, okanye ezikhulu ezongezelelweyo nangona ubona kufanelekile.

Zonke iindawo zokuqhawula

Kwiigridi ezifanayo ukusuka kwezona zixhobo zincinci ukuya kwezikhulu, sebenzisa i .colkunye .col-*neeklasi. Cacisa udidi olunamanani xa ufuna ikholamu enobungakanani obukhulu; kungenjalo, zive 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>

Ibekwe ngokuthe tye

Ukusebenzisa iseti enye .col-sm-*yeeklasi, ungenza isixokelelwano segridi esisiseko eqala ngokupakishwa kwaye ibe ithe tye kwindawo encinci yokwaphuka ( 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 kwaye udibanise

Awufuni ukuba iikholamu zakho zibekwe ngokulula kwezinye imigangatho yegridi? Sebenzisa indibaniselwano yeeklasi ezahlukeneyo kwinqanaba ngalinye njengoko kufuneka. Jonga lo mzekelo ungezantsi ukuze ufumane ingcamango engcono yokuba isebenza njani yonke.

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

Imijelo

Iigutters zinokuhlenga-hlengiswa ngokuphendulayo nge-padding echanekileyo kunye neeklasi eziluncedo zomda. Ukutshintsha iigatha kumqolo onikiweyo, dibanisa usetyenziso olungakhiyo lomda kwi- .rowpadding ehambelanayo nezinto eziluncedo kwi- .cols. Umzali .containerokanye .container-fluidumzali unokufuna ukulungiswa kwakhona ukunqanda ukuphuphuma okungafunekiyo, usebenzisa kwakhona ukuthelekisa izinto eziluncedo.

Nanku umzekelo wokwenza ngokusesikweni igridi yeBootstrap kwindawo enkulu ( lg) yebreakpoint nangaphezulu. Siye sanyusa i- .colpadding nge .px-lg-5, sachasa oko .mx-lg-n5kumzali .rowkwaye emva koko silungelelanise .containerisisongelo 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>

Imiqolo emqolo

Sebenzisa .row-cols-*iiklasi eziphendulayo ukuseta ngokukhawuleza inani leekholomu ezinikezela kakuhle umxholo wakho kunye noyilo. Ngelixa iiklasi eziqhelekileyo .col-*zisebenza kwikholamu nganye (umzekelo, .col-md-4), iiklasi zemiqolo yemigca zisetelwe kumzali .rownjengendlela emfutshane.

Sebenzisa ezi klasi zeekholamu zomqolo ukwenza ngokukhawuleza uyilo lwegridi esisiseko okanye ukulawula uyilo lwekhadi 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 kwakhona i-Sass mixin ehamba 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);
  }
}

Ulungelelwaniso

Sebenzisa izinto eziluncedo zolungelelwaniso lwebhokisi eguquguqukayo ukulungelelanisa imiqolo ethe nkqo nangokuthe tye. I-Internet Explorer 10-11 ayixhasi ukulungelelaniswa ngokuthe nkqo kwezinto eziguquguqukayo xa isikhongozeli se-flex sinomfanekiso min-heightongezantsi. Jonga iFlexbugs #3 ngeenkcukacha ezithe vetshe.

Ulungelelwaniso oluthe nkqo

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

Ulungelelwaniso oluthe tye

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

Akukho zigatha

Imijelo phakathi kweentsika kwiiklasi zethu zegridi ezichazwe kwangaphambili zinokususwa nge .no-gutters. Oku kususa i-negative margins ukusuka .rowkunye ne-horizontal paddingkuzo zonke iikholamu zabantwana zangoku.

Nantsi ikhowudi yemvelaphi yokudala ezi zimbo. Qaphela ukuba ukubhala ngaphezulu kwekholamu kuthungelwa kuphela kwikholamu zabantwana bokuqala kwaye kujoliswe kumkhethi wophawu loyelelwano . Ngelixa oku kuvelisa umkhethi othe ngqo, ukukhuselwa kwekholamu kusenokwenziwa ngokwezifiso kunye nezixhobo zokubeka izithuba .

Ngaba ufuna uyilo olusuka kumphetho ukuya kumphetho? Lahla umzali .containerokanye .container-fluid.

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

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

Ngokwenza, nantsi indlela ekhangeleka ngayo. Qaphela ungaqhubeka nokusebenzisa oku kunye nazo zonke ezinye iiklasi zegridi ezichazwe kwangaphambili (kubandakanya ububanzi bekholamu, imigangatho ephendulayo, uodolo ngokutsha, kunye nokunye).

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

Ukusonga ikholamu

Ukuba ngaphezu kweekholamu ezili-12 zibekwe ngaphakathi kumqolo omnye, iqela ngalinye leekholamu ezongezelelweyo liya kuthi, njengeyunithi enye, isonge kumgca omtsha.

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

Uqhawulo lwekholamu

Ukwaphula iikholamu kumgca omtsha kwi-flexbox kufuna i-hack encinci: yongeza i-element kunye width: 100%naphi na apho ufuna ukusonga iikholomu zakho kumgca omtsha. Ngokuqhelekileyo oku kufezekiswa ngee-multiple .rows, kodwa ayizizo zonke iindlela zokuphunyezwa ezinokuphendula oku.

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

Unokusebenzisa eli khefu kwiindawo ezithile zokuqhawula kunye nezixhobo zethu zokubonisa eziphendulayo .

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

Ukucwangcisa ngokutsha

Iiklasi zokuodola

Sebenzisa .order-iiklasi zokulawula ukulandelelana okubonakalayo komxholo wakho. Ezi klasi ziyaphendula, ngoko unokuseta i- orderbreakpoint (umz., .order-1.order-md-2). Ibandakanya inkxaso 1kuwo 12onke amanqanaba amahlanu egridi.

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

Kukwakho neeklasi eziphendulayo .order-firstkunye .order-lastneeklasi ezitshintsha orderi element ngokufaka isicelo order: -1kunye order: 13( order: $columns + 1), ngokulandelelanayo. Ezi klasi zinokudityaniswa .order-*neeklasi ezinamanani njengoko zifuneka.

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

Imihlathi yokumisela

Ungalungisa iikholamu zegridi ngeendlela ezimbini: .offset-iiklasi zethu zegridi eziphendulayo kunye nezixhobo zethu zomda . Iiklasi zegridi zilingana ukuze zitshatise iikholamu ngelixa imida iluncedo kakhulu kuyilo olukhawulezayo apho ububanzi be-offset buyaguquguquka.

Iiklasi ze-Offset

Hambisa iikholamu ekunene usebenzisa .offset-md-*iiklasi. Ezi klasi zonyusa umda wasekhohlo wekholam *ngokweekholamu. Umzekelo, .offset-md-4uhamba .col-md-4ngaphaya kweekholamu ezine.

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

Ukongeza kokucocwa kweekholamu kwiindawo eziphendulayo, unokufuna ukuseta ngokutsha ii-offsets. Bona oku kwisenzo kumzekelo wegridi .

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

Izixhobo zomda

Ngokuya kwi-flexbox kwi-v4, ungasebenzisa izinto eziluncedo zomda njengokunyanzela .mr-autoiikholamu zabantakwabo kude kwenye.

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

Ukuzalela

Ukuxhoma umxholo wakho ngegridi engagqibekanga, yongeza entsha .rowkunye neseti .col-sm-*yeekholamu ngaphakathi koluhlu olukhoyo .col-sm-*. Imiqolo ebekwe kwizindlu kufuneka ibandakanye uluhlu lwezintlu ezidibanisa ukuya kutsho kwi-12 okanye ngaphantsi (akufuneki ukuba usebenzise zonke iikholamu ezili-12 ezikhoyo).

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

Xa usebenzisa iifayile ze-Sass zomthombo we-Bootstrap, unokhetho lokusebenzisa ii-variables ze-Sass kunye nemixube ukwenza isiko, i-semantic, kunye noyilo lwephepha eliphendulayo. Iiklasi zethu zegridi ezichazwe kwangaphambili zisebenzisa ezi ziguquguqukayo ezifanayo kunye nemixube ukubonelela ngesuti epheleleyo yeeklasi ezilungele ukusetyenziswa kwiindlela eziphendula ngokukhawuleza.

Izinto eziguquguqukayo

Izinto eziguquguqukayo kunye neemephu zimisela inani leekholamu, ububanzi begutter, kunye nendawo yombuzo wemithombo yeendaba apho kuqalwa khona iikholamu ezidadayo. Sisebenzisa ezi ukuvelisa iiklasi zegridi ezichazwe kwangaphambili ezibhalwe ngasentla, kunye nemixube yesiko edweliswe ngezantsi.

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

Imixube

Imixube isetyenziswa ngokudityaniswa noguquguquko lwegridi ukuvelisa i-CSS ye-semantic yeekholamu zegridi nganye.

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

Umzekelo wokusetyenziswa

Uyakwazi ukuguqula izinto eziguquguqukayo kumaxabiso akho esiko, okanye usebenzise nje imixube ngexabiso labo elingagqibekanga. Nanku umzekelo wokusebenzisa useto olungagqibekanga ukwenza ubeko lwekholamu ezimbini kunye nomsantsa phakathi.

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

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

Ukulungelelanisa igridi

Ukusebenzisa igridi yethu eyakhelwe-ngaphakathi iSass eguquguqukayo kunye neemephu, kuyenzeka ukuba wenze ngokwezifiso iiklasi zegridi ezichazwe kwangaphambili. Guqula inani lamanqanaba, imilinganiselo yombuzo wemidiya, kunye nobubanzi besikhongozeli-emva koko uhlanganise.

Iikholamu kunye neegutters

Inani leekholamu zegridi zinokulungiswa kusetyenziswa iiguquguquko zeSass. $grid-columnsisetyenziselwa ukuvelisa ububanzi (ngepesenti) yekholamu nganye nganye ngelixa $grid-gutter-widthibeka ububanzi bemijelo yomhlathi.

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

Imigangatho yegridi

Ukuhamba ngaphaya kweekholamu ngokwazo, unokwenza ngokwezifiso inani legridi yemigangatho. Ukuba ubufuna amanqanaba egridi amane kuphela, unokuhlaziya $grid-breakpointskunye $container-max-widthsnento enje:

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

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

Xa usenza naluphi na utshintsho kwizinto eziguquguqukayo ze-Sass okanye iimephu, kuya kufuneka ugcine utshintsho lwakho kwaye uqokelele kwakhona. Ukwenza njalo kuya kukhupha iseti entsha yeeklasi zegridi ezichazwe kwangaphambili kububanzi bekholomu, i-offsets, kunye nokuodola. Izixhobo ezibonakalayo eziphendulayo nazo ziya kuhlaziywa ukuze kusetyenziswe iindawo zokuqhawula ngokwesiko. Qinisekisa ukuseta amaxabiso egridi kwi px(hayi rem, em, okanye %).