Enkola ya grid

Kozesa grid yaffe ey’amaanyi mobile-first flexbox okuzimba layouts za shapes zonna ne sizes okwebaza enkola ya column kkumi na bbiri, tiers etaano default responsive tiers, Sass variables ne mixins, ne makumi ga classes 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.

<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 yaabwe omuzadde.
• Ennyiriri zirina horizontal paddingokukola emifulejje wakati w’ennyiriri ssekinnoomu, naye, osobola okuggyawo marginokuva mu nnyiriri ne paddingokuva mu mpagi nga zirina .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.

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.

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

Layini nnyingi ez’obugazi obwenkanankana

Tonda empagi ez’obugazi obwenkanankana eziwanvuwa layini eziwera ng’oyingiza a .w-100w’oyagala empagi zimenye okutuuka ku layini empya. Fuula okuwummulamu okuddamu ng'otabula .w-100n'ebimu ku bikozesebwa eby'okwolesebwa ebiddamu .

Waaliwo ekizibu kya Safari flexbox ekyalemesa kino okukola awatali kigambo kya lwatu flex-basisoba border. Waliwo eby'okukola ku nkyusa za browser enkadde, naye tezirina kwetaagisa singa browser zo z'ogenderera tezigwa mu nkyusa za 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>

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.

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

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

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.

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

Etumbiddwa okutuuka ku horizontal

Nga okozesa ekibinja kimu ekya .col-sm-*kiraasi, osobola okukola enkola ya giridi enkulu etandika nga etumbiddwa n’efuuka ey’okwebungulula ku kifo ekitono eky’okumenya ( 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>

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.

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

Emifulejje

Gutters zisobola okutereezebwa mu ngeri ey’okuddamu nga ziyita mu breakpoint-specific padding ne negative margin utility classes. Okukyusa emidumu mu lunyiriri oluweereddwa, pair a negative margin utility ku .rowne matching padding utilities ku .cols. Omuzadde .containeroba .container-fluidomuzadde ayinza okwetaaga okutereezebwa naye okwewala okujjula okuteetaagisa, okukozesa nate okukwatagana padding utility.

Wano waliwo ekyokulabirako ky'okulongoosa ekisenge kya Bootstrap ku kifo ekinene ( lg) eky'okumenya n'okudda waggulu. Twongedde ku .colpadding ne .px-lg-5, counteracted that with .mx-lg-n5ku muzadde .rowate oluvannyuma ne tutereeza .containerwrapper ne .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>

Ennyiriri z’ennyiriri

Kozesa .row-cols-*kiraasi eziddamu okuteeka amangu omuwendo gw’ennyiriri ezisinga okulaga ebirimu byo n’ensengeka yo. So nga .col-*kiraasi eza bulijjo zikola ku mpagi ssekinnoomu (okugeza, .col-md-4), kiraasi z’ennyiriri z’ennyiriri ziteekebwa ku muzadde .rowng’ekkubo ennyimpi.

Kozesa kiraasi zino ez’ennyiriri z’ennyiriri okukola amangu ensengeka za giridi ezisookerwako oba okufuga ensengeka za kaadi yo.

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

Osobola n'okukozesa Sass mixin ewerekerako, 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);
  }
}

Okukwatagana

Kozesa ebikozesebwa mu kulaganya kwa flexbox okulaga empagi mu vertikal ne horizontal. Internet Explorer 10-11 tewagira vertical alignment ya flex items nga flex container erina a min-heightnga bwekiragibwa wansi. Laba Flexbugs #3 okumanya ebisingawo.

Okulaganya okw’okwesimbye

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

Okulaganya okw’okwebungulula

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

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

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.

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

Empagi emenya

Okumenya empagi ku layini empya mu flexbox kyetaagisa hack entono: yongera ku elementi 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.

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

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

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

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.

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

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.

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

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.

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

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

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

Ebikozesebwa mu kukola margin

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

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

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

<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 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 ebitegekeddwa edda bikozesa enkyukakyuka zino ze zimu ne mixins okuwa suite yonna eya kiraasi eyeetegefu okukozesebwa ku layouts eziddamu amangu.

Enkyukakyuka ezikyukakyuka

Enkyukakyuka ne maapu zisalawo omuwendo gw’ennyiriri, obugazi bw’omudumu, n’ekifo eky’okubuuza emikutu gy’ogenda 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 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);
  }
}

<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 bitundu ku kikumi) bwa buli mpagi ssekinnoomu ate $grid-gutter-widtheteeka obugazi bw’emidumu 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 gya grid ena gyokka, 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 %).