Source

Enkola ya grid

Kozesa giridi yaffe ey’amaanyi eya mobile-first flexbox okuzimba ensengeka ez’ebifaananyi byonna n’obunene olw’enkola y’ennyiriri kkumi n’ebiri, emitendera etaano egy’okuddamu egy’enjawulo, enkyukakyuka za Sass ne mixins, n’amakumi ga kiraasi ezitegekeddwa edda.

Engeri gye kikola

Enkola ya Bootstrap eya grid ekozesa omuddirirwa gw'ebintu, ennyiriri, n'ennyiriri ensengeka n'okusengeka ebirimu. Yazimbibwa ne flexbox era ekwata mu bujjuvu. Wansi waliwo ekyokulabirako n’okutunuulira mu bujjuvu engeri giridi gy’ekwataganamu.

Omupya mu flexbox oba tomanyidde ddala? Soma ekitabo kino ekya CSS Tricks flexbox okuzuula ensibuko, ebigambo, ebiragiro, n'ebitundutundu bya koodi.

Emu ku mpagi ssatu

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

Ekyokulabirako waggulu kikola empagi ssatu ez’obugazi obwenkanankana ku byuma ebitono, ebya wakati, ebinene, n’ebinene ennyo nga tukozesa ebika byaffe ebya giridi ebyategekebwa edda. Ennyiriri ezo zibeera wakati mu lupapula nga waliwo omuzadde .container.

Nga tugimenyaamenya, laba engeri gye kikola:

Konteyina ziwa engeri y’okuteeka ebirimu ku mukutu gwo wakati ne mu bbanga (horizontally pad). Kozesa .containerku bugazi bwa pixel obuddamu oba .container-fluidku width: 100%bunene bwonna obw'okulaba n'ebyuma.
Ennyiriri ze zizinga ku mpagi. Buli mpagi erina horizontal padding(eyitibwa gutter) okufuga ekifo ekiri wakati wazo. Kino paddingolwo kiziyizibwa ku nnyiriri ezirina emiwaatwa egy’obubi. Mu ngeri eno, ebirimu byonna mu mpagi zo bikwatagana mu ngeri ey’okulaba wansi ku ludda olwa kkono.
Mu nsengeka ya giridi, ebirimu birina okuteekebwa munda mu mpagi era ennyiriri zokka ze ziyinza okuba abaana ab’amangu ab’ennyiriri.
Okwebaza flexbox, empagi za grid ezitaliiko eragiddwa widthzijja kusengeka mu ngeri ey’otoma nga empagi ez’obugazi obwenkanankana. Okugeza, instances nnya eza .col-smbuli emu ejja kuba automatically 25% wide okuva ku breakpoint entono ne waggulu. Laba ekitundu kya auto-layout columns okufuna ebyokulabirako ebirala.
Ebika by’ennyiriri biraga omuwendo gw’ennyiriri z’oyagala okukozesa ku 12 ezisoboka buli lunyiriri. Kale, bw’oba oyagala empagi ssatu ez’obugazi obwenkanankana okubuna, osobola okukozesa .col-4.
Ennyiriri widths ziteekebwa mu bitundu ku kikumi, kale bulijjo zibeera mazzi era nga za sayizi okusinziira ku elementi yazo omuzadde.
Ennyiriri zirina horizontal paddingokukola emifulejje wakati w’ennyiriri ssekinnoomu, naye, osobola okuggyawo marginokuva mu nnyiriri ne paddingokuva mu mpagi ne .no-guttersku .row.
Okufuula giridi okuddamu, waliwo ebifo bitaano eby’okumenya giridi, ekimu ku buli kifo ekiddamu okuddamu : ebifo byonna ebimenya (ebitono ennyo), ebitono, ebya wakati, ebinene, n’ebinene ennyo.
Ensengekera za giridi zeesigamiziddwa ku kubuuza kw’emikutu egy’obugazi obutono, ekitegeeza nti zikola ku kifo ekyo ekimu eky’okumenya n’ebyo byonna waggulu waakyo (okugeza, .col-sm-4bikwata ku byuma ebitono, ebya wakati, ebinene, n’ebinene ennyo, naye si kifo ekisooka xseky’okumenya).
Osobola okukozesa kiraasi za grid ezitegekeddwa edda (nga .col-4) oba Sass mixins okusobola okussaako obubonero obusingawo obw’amakulu.

Beera ku buzibu n'obuzibu obwetoolodde flexbox , ng'obutasobola kukozesa bintu bimu ebya HTML nga ebitereke bya flex .

Ebintu eby’okulondako mu giridi

Nga Bootstrap ekozesa ems oba rems okunnyonnyola sayizi ezisinga obungi, pxs zikozesebwa ku bifo ebimenya giridi n’obugazi bwa konteyina. Kino kiri bwe kityo kubanga obugazi bw'ekifo eky'okulaba buli mu pixels era tebukyuka n'obunene bw'empandiika .

Laba engeri ebitundu by’enkola ya Bootstrap grid gye bikolamu mu byuma ebiwerako nga biriko emmeeza ekwatagana.

	Obutono obw'enjawulo <576px	Obutono ≥576px	Eky’omu makkati ≥768px	Ennene ≥992px	Ennene ennyo ≥1200px
Max obugazi bwa konteyina	Tewali (auto) .	540px nga bwe kiri	720px nga bwe kiri	960px nga bwe kiri	1140px nga bwe kiri
Entandikwa y’ekibiina	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# wa empagi	12. 12
Obugazi bwa gutter	30px (15px ku buli ludda lw’ennyiriri)
Ebisu bibeera mu kisu	Yee
Okulagira empagi	Yee

Ennyiriri ezikola ensengeka mu ngeri ey’okwekolako

Kozesa kiraasi z’ennyiriri ezikwata ku breakpoint okusobola okwanguyirwa okugera ennyiriri awatali kiraasi eriko nnamba za lwatu nga .col-sm-6.

Obugazi obwenkanankana

Okugeza, wano waliwo ensengeka za grid bbiri ezikola ku buli kyuma n’ekifo eky’okulaba, okuva xsku okutuuka ku xl. Okwongerako omuwendo gwonna ogwa kiraasi ezitaliimu yuniti ku buli breakpoint gy’olina era buli mpagi ejja kuba ya bugazi bwe bumu.

1 ku 2

2 ku 2

1 ku 3

2 ku 3

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

Ennyiriri ez'obugazi obwenkanankana zisobola okumenyeka mu layini eziwera, naye waaliwo ekizibu kya Safari flexbox ekyalemesa kino okukola awatali kulaga flex-basisoba border. Waliwo eby’okukola ku nkyusa za bbulawuzi enkadde, naye tezirina kwetaagisa bw’oba ng’oli ku mulembe.

Empagi

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

Okuteekawo obugazi bw’ennyiriri emu

Auto-layout for flexbox grid columns era kitegeeza nti osobola okuteeka obugazi bw’ennyiriri emu n’ofuna empagi z’abooluganda ezikyusa obunene mu ngeri ey’otoma okwetooloola. Oyinza okukozesa kiraasi za giridi ezitegekeddwa edda (nga bwe kiragibwa wansi), okutabula kwa giridi, oba obugazi bwa layini. Weetegereze nti empagi endala zijja kukyusa obunene si nsonga obugazi bw’ennyiriri wakati.

1 ku 3

2 ku 3 (ebigazi) .

3 ku 3

1 ku 3

2 ku 3 (ebigazi) .

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

Ebirimu obugazi obukyukakyuka

Kozesa col-{breakpoint}-autokiraasi okulaga obunene bw’ennyiriri okusinziira ku bugazi obw’obutonde obw’ebirimu.

1 ku 3

Ebirimu obugazi obukyukakyuka

3 ku 3

1 ku 3

Ebirimu obugazi obukyukakyuka

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

Ennyiriri nnyingi ez’obugazi obwenkanankana

Tonda empagi ez’obugazi obwenkanankana eziwanvuwa ennyiriri eziwera ng’oyingiza a .w-100w’oyagala empagi zimenye ku layini empya. Fuula breaks responsive nga otabula the .w-100n'ebimu ku responsive display utilities .

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>

Ebisulo ebiddamu

Bootstrap's grid erimu emitendera etaano egya kiraasi ezitegekeddwa edda okuzimba ensengeka enzibu eziddamu. Customize size ya columns zo ku byuma ebitono ennyo, ebitono, ebya wakati, ebinene, oba ebinene ennyo nga bw’olaba nga kituufu.

Ebifo byonna eby’okumenya

Ku grids ezifaanagana okuva ku byuma ebisinga obutono okutuuka ku binene, kozesa kiraasi .colne . .col-*Laga kiraasi eriko ennamba nga weetaaga ennyiriri eriko obunene obw’enjawulo; bwe kitaba ekyo, wulira nga oli wa ddembe okunywerera ku .col.

col

col-8

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

Etumbiddwa okutuuka ku horizontal

Nga okozesa ekibinja kimu ekya .col-sm-*kiraasi, osobola okukola enkola ya grid enkulu etandika nga etumbidde nga tonnafuuka horizontal ne ku breakpoint entono ( sm).

col-sm-8 nga bwe kiri

col-sm-4 nga bwe kiri

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

Tabula n’okukwatagana

Toyagala mpagi zo kumala gatuuma mu mitendera egimu egya grid? Kozesa omugatte gwa kiraasi ez’enjawulo ku buli mutendera nga bwe kyetaagisa. Laba ekyokulabirako wansi okufuna endowooza ennungi ku ngeri byonna gye bikolamu.

.kol-12 .kolo-md-8

.kol-6 .kolo-md-4

.col-6 nga bwe kiri

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

Okulaganya

Kozesa ebikozesebwa mu kulaganya kwa flexbox okulaga empagi mu vertikal ne horizontal.

Okulaganya okw’okwesimbye

Emu ku mpagi ssatu

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

Emu ku mpagi ssatu

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

Okulaganya okw’okwebungulula

Emu ku mpagi bbiri

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

Tewali mifulejje

Emifulejje wakati w'empagi mu bibinja byaffe ebya giridi ebyategekebwa edda bisobola okuggyibwawo ne .no-gutters. Kino kiggyawo negativu margins okuva .rowne horizontal paddingokuva mu mpagi zonna ez’abaana ab’amangu.

Wano waliwo source code y'okukola emisono gino. Weetegereze nti okusazaamu ennyiriri kuweebwa scoped ku mpagi z'abaana abasooka zokka era zigendereddwamu okuyita mu attribute selector . Wadde nga kino kivaamu omusunsuzi okusingawo, okupakinga empagi kukyayinza okwongera okulongoosebwa n’ebikozesebwa mu kuteeka ebanga .

Oyagala dizayini okuva ku mbiriizi okutuuka ku mbiriizi? Suula omuzadde .containeroba .container-fluid.

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

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

Mu nkola, laba engeri gye kirabika. Weetegereze osobola okugenda mu maaso n’okukozesa kino ne kiraasi za grid endala zonna ezitegekeddwa edda (nga mw’otwalidde obugazi bw’ennyiriri, emitendera egy’okuddamu, okuddamu ensengeka, n’ebirala).

.kol-12 .kolo-sm-6 .kol-md-8

.kol-6 .kolo-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>

Okuzinga empagi

Singa empagi ezisukka mu 12 ziteekebwa mu lunyiriri lumu, buli kibinja ky’ennyiriri ez’enjawulo kijja, nga yuniti emu, okuzinga ku layini empya.

.col-9 nga bwe kiri

.col-4
Okuva 9 + 4 = 13 > 12, div eno eya 4-column-wide efuna okuzingibwa ku layini empya nga yuniti emu ekwatagana.

.col-6
Ennyiriri eziddako zigenda mu maaso ku layini empya.

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

Empagi emenya

Okumenya empagi ku layini empya mu flexbox kyetaagisa hack entono: yongerako element ne width: 100%wonna w’oyagala okuzinga empagi zo ku layini empya. Mu budde obwabulijjo kino kituukirira ne .rows eziwera, naye si buli nkola y’okussa mu nkola nti esobola okubala kino.

.kol-6 .kolo-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>

Oyinza n'okukozesa okuwummulamu kuno ku bifo ebitongole eby'okuwummulamu n'ebikozesebwa byaffe eby'okulaga ebiddamu .

.kol-6 .kolo-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>

Okuddamu okulagira

Lagira emisomo gy’okusoma

Kozesa .order-kiraasi okufuga ensengeka y’ebirabika eby’ebirimu byo. Ebika bino biddamu, kale osobola okuteekawo orderby breakpoint (okugeza, .order-1.order-md-2). Mulimu obuwagizi 1okuyita 12mu mitendera gyonna etaano egya grid.

Ekisooka, naye nga tekiragirwa

Ekyokubiri, naye ekisembayo

Ekyokusatu, naye ekisooka

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

Waliwo ne responsive .order-firstne .order-lastclasses ezikyusa the orderof an element nga zikozesa order: -1ne order: 13( order: $columns + 1), respectively. Ebisulo bino nabyo bisobola okutabula ne .order-*kiraasi eziriko ennamba nga bwe kyetaagisa.

Ekisooka, naye ekisembayo

Ekyokubiri, naye nga tekiragirwa

Ekyokusatu, naye ekisooka

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

Okukyusakyusa empagi

Osobola okukyusakyusa empagi za giridi mu ngeri bbiri: kiraasi zaffe eza .offset-giridi eziddamu n’ebikozesebwa byaffe eby’oku mabbali . Grid classes ziweebwa sayizi okukwatagana ne columns ate margins zisinga kuba za mugaso ku layouts ez’amangu nga obugazi bwa offset bukyukakyuka.

Ebisulo bya Offset

Tambuza ennyiriri ku ddyo ng’okozesa .offset-md-*kiraasi. Ebika bino byongera ku mabbali ga kkono ag’ennyiriri ku *mpagi. Okugeza, .offset-md-4etambula .col-md-4ku mpagi nnya.

.col-md-4 nga bwe kiri

.col-md-4 .okukyusakyusa-md-4

.col-md-3 .okukyusakyusa-md-3

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

Ng’oggyeeko okulongoosa empagi ku bifo eby’okumenya ebiddamu, oyinza okwetaaga okuddamu okuteekawo offsets. Kino laba mu bikolwa mu kyokulabirako kya grid .

.kolo-sm-5 .kol-md-6

.col-sm-5 .okukyusa-sm-2 .col-md-6 .okukyusa-md-0

.kol-sm-6 .kol-md-5 .kolo-lg-6

.col-sm-6 .col-md-5 .okukyusakyusa-md-2 .col-lg-6 .okukyusa-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>

Ebikozesebwa mu kukola margin

Nga ogenda ku flexbox mu v4, osobola okukozesa margin utilities nga .mr-autookukaka sibling columns okuva ku ndala.

.col-md-4 nga bwe kiri

.col-md-4 .ml-okwetongoza

.col-md-3 .ml-md-omuto

.col-otoma .mr-otoma

.col-omuto

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

Okuzimba ebisu

Okuteeka ebirimu byo n'ekisenge ekisookerwako, yongerako empya .rown'ekibinja ky'ennyiriri munda mu nnyiriri .col-sm-*eziriwo . .col-sm-*Ennyiriri eziteekeddwa mu kisenge zirina okubeeramu ekibinja ky’ennyiriri ezigatta okutuuka ku 12 oba wansi (tekyetaagisa kukozesa mpagi zonna 12 eziriwo).

Omutendera 1: .col-sm-9

Omutendera 2: .col-8 .col-sm-6

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

Bw’oba okozesa fayiro za Bootstrap ez’ensibuko Sass, olina eky’okulonda okukozesa enkyukakyuka za Sass ne mixins okukola ensengeka z’olupapula eza custom, semantic, n’okuddamu. Ebika byaffe ebya grid ebitegeezeddwa edda bikozesa enkyukakyuka zino ze zimu ne mixins okuwa suite yonna eya kiraasi eyeetegefu okukozesebwa ku layouts eziddamu amangu.

Enkyukakyuka ezikyukakyuka

Enkyukakyuka ne maapu ze zisalawo omuwendo gw’ennyiriri, obugazi bw’omudumu, n’ekifo eky’okubuuza emikutu gy’egenda okutandikirako empagi ezitengejja. Tukozesa bino okukola ebika bya grid ebyategeezebwa edda ebiwandiikiddwa waggulu, awamu ne ku mixins ez’ennono eziragiddwa wansi.

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

Ebirungo ebitabuddwa

Mixins zikozesebwa wamu n’enkyukakyuka za grid okukola semantic CSS ku mpagi za grid ssekinnoomu.

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

Okugeza enkozesa

Osobola okukyusa enkyukakyuka ku miwendo gyo egy'ennono, oba okumala okukozesa mixins n'emiwendo gyazo egy'enjawulo. Wano waliwo ekyokulabirako ky'okukozesa ensengeka ezisookerwako okukola ensengeka y'ennyiriri bbiri nga waliwo ekituli wakati.

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

Ebikulu ebirimu

Ebirimu eby’okubiri

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

Okulongoosa grid

Nga tukozesa enkyukakyuka zaffe eza grid Sass ezizimbibwamu ne maapu, kisoboka okulongoosa ddala ebika bya grid ebyategekebwa edda. Kyusa omuwendo gw’emitendera, ebipimo by’okubuuza kw’emikutu, n’obugazi bw’ekintu —oluvannyuma oddemu okukuŋŋaanya.

Empagi n’emifulejje

Omuwendo gw’ennyiriri za giridi gusobola okukyusibwa nga oyita mu nkyukakyuka za Sass. $grid-columnsekozesebwa okukola obugazi (mu ku buli kikumi) bwa buli mpagi ssekinnoomu ate nga $grid-gutter-widthekkiriza obugazi obw’enjawulo obw’okumenya obugabanyizibwa kyenkanyi okubuna padding-leftera padding-rightku mifulejje gy’empagi.

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

Emitendera gya giridi

Okusukka ku mpagi zennyini, oyinza n’okulongoosa omuwendo gw’emitendera gya giridi. Singa oyagala emitendera ena gyokka egya grid, wandizzeemu okutereeza $grid-breakpointsne $container-max-widthsku kintu nga kino:

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

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

Bw’oba okola enkyukakyuka yonna ku nkyukakyuka za Sass oba maapu, ojja kwetaaga okutereka enkyukakyuka zo n’okuddamu okukung’aanya. Okukola ekyo kijja kufulumya ekibinja ekipya ddala eky’ebika bya grid ebyategekebwa edda eby’obugazi bw’ennyiriri, offsets, n’okulagira. Ebikozesebwa mu kulaba ebiddamu nabyo bijja kulongoosebwa okukozesa ebifo eby’okumenyawo eby’ennono. Kakasa nti oteeka emiwendo gya grid mu px(si rem, em, oba %).