Source

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.

Enye yeentsika ezintathu

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

	Incinci kakhulu <576px	Incinci ≥576px	Phakathi ≥768px	Enkulu ≥992px	Inkulu kakhulu ≥1200px
Ubukhulu bobukhulu besikhongozeli	Akukho (auto)	540px	720px	960px	1140px
Isimaphambili seklasi	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# yeentsika	12
Ububanzi bomsele	30px (15px kwicala ngalinye lekholamu)
Nestable	Ewe
Ukuodola ikholamu	Ewe

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.

1 ye2

2 ye2

1 ye3

2 ye3

3 ye3

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

Iintsika ezinobubanzi obulinganayo zingophulwa zibe yimigca emininzi, kodwa bekukho iSafari flexbox bug ethintele oku ekusebenzeni ngaphandle kokucacileyo flex-basisokanye border. Kukho iindlela zokusebenza kwiinguqulelo zebrowser ezindala, kodwa akufuneki zifuneke ukuba unolwazi lwangoku.

Umqolo

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

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.

1 ye3

2 kwezi-3 (banzi)

3 ye3

1 ye3

2 kwezi-3 (banzi)

3 ye3

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

1 ye3

Umxholo wobubanzi obuguquguqukayo

3 ye3

1 ye3

Umxholo wobubanzi obuguquguqukayo

3 ye3

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

Ukulingana-ububanzi multi-row

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

col

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

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.

col

ikhol-8

ikhol-4

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

Ibekwe ngokuthe tye

Usebenzisa iseti enye .col-sm-*yeeklasi, ungenza isixokelelwano segridi esisiseko eqala ngokupakishwa phambi kokuba ithe tye kwindawo encinci yokwaphuka ( sm).

icol-sm-8

icol-sm-4

icol-sm

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

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 yendlela esebenza ngayo yonke into.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

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

Ulungelelwaniso

Sebenzisa izinto eziluncedo zolungelelwaniso lwebhokisi eguquguqukayo ukulungelelanisa amakholomu ngokuthe nkqo nangokuthe tye.

Ulungelelwaniso oluthe nkqo

Enye yeentsika ezintathu

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

Enye yeentsika ezintathu

<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

Enye yezintlu ezimbini

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

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

Ukusonga ikholamu

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

.col-9

.col-4
Ukusukela ku-9 + 4 = 13 > 12, le div-ububanzi bekholamu-4 ibotshelelwa kumgca omtsha njengeyunithi enye edibanayo.

.col-6
Imiqolo elandelayo iqhubeleka nomgca omtsha.

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

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.

.col-6 .col-sm-3

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

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

.col-6 .col-sm-4

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

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.

Okokuqala, kodwa ngaphandle komyalelo

Okwesibini, kodwa okokugqibela

Okwesithathu, kodwa kuqala

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

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.

Okokuqala, kodwa ekugqibeleni

Okwesibini, kodwa kungacwangciswanga

Okwesithathu, kodwa kuqala

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

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.

.col-md-4

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

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

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

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

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

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

Izixhobo zomda

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

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

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

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

Inqanaba 1: .col-sm-9

Inqanaba lesi-2: .col-8 .col-sm-6

Inqanaba 2: .col-4 .col-sm-6

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

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 zoyilo eziphendula ngokukhawuleza.

Izinto eziguquguqukayo

Izinto eziguquguqukayo kunye neemephu zimisela inani leekholamu, ububanzi begutter, kunye nendawo yombuzo wemidiya apho kuza 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);
  }
}

Umxholo ophambili

Umxholo wesibini

<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) yomhlathi ngamnye ngelixa $grid-gutter-widthivumela i-breakpoint-specific widths eyahlulwe ngokulungeleleneyo ngapha padding-leftnakwimijelo padding-rightyomhlathi.

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