Enkola ya grid

Eky'okulabirako

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’okunnyonnyola mu bujjuvu engeri enkola ya grid gy’ekwataganamu.

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Ekyokulabirako waggulu kikola ennyiriri ssatu ez’obugazi obwenkanankana mu byuma byonna n’ebifo eby’okulaba nga tukozesa ebika byaffe ebya giridi ebyategekebwa edda. Ennyiriri ezo zibeera wakati mu lupapula nga waliwo omuzadde .container.

Engeri gye kikola

Nga tugimenyaamenya, laba engeri enkola ya grid gy’ekwataganamu:

• Grid yaffe ewagira breakpoints mukaaga eziddamu . Breakpoints zeesigamiziddwa ku min-widthbibuuzo by’emikutu, ekitegeeza nti zikwata ku breakpoint eyo n’abo bonna abali waggulu waakyo (okugeza, .col-sm-4ekwata ku sm, md, lg, xl, ne xxl). Kino kitegeeza nti osobola okufuga obunene bw’ekintu n’ennyiriri n’enneeyisa nga buli kifo ky’okumenya.

• Containers wakati ne horizontally pad ebirimu byo. Kozesa .containerku bugazi bwa pikseli obuddamu, .container-fluidku width: 100%bifo byonna eby’okulaba n’ebyuma, oba ekintu ekiddamu (okugeza, .container-md) ku kugatta amazzi n’obugazi bwa pikseli.

• Ennyiriri ze zizinga ku mpagi. Buli mpagi erina horizontal padding(eyitibwa gutter) okufuga ekifo ekiri wakati wazo. Kino paddingolwo kiziyizibwa ku nnyiriri eziriko enjuyi ezitali nnungi okukakasa nti ebirimu mu mpagi zo bikwatagana bulungi wansi ku ludda olwa kkono. Ennyiriri era ziwagira kiraasi z’abakyusa okukozesa mu ngeri y’emu obunene bw’ennyiriri ne kiraasi za gutter okukyusa ebanga ly’ebirimu byo.

• Empagi zikyukakyuka mu ngeri etategeerekeka. Waliwo ennyiriri za template 12 eziriko buli lunyiriri, ekikusobozesa okukola okugatta okw’enjawulo okw’ebintu ebibuna ennyiriri omuwendo gwonna. Ebika by’ennyiriri biraga omuwendo gw’ennyiriri za template ezirina okuwanvuwa (okugeza, col-4spans nnya). widths ziteekebwa mu bitundu ku kikumi kale bulijjo olina relative sizing y’emu.

• Gutters nazo ziddamu era zisobola okukyusibwakyusibwa. Gutter classes ziriwo mu breakpoints zonna, nga zonna za sayizi ze zimu ne margin yaffe ne padding spacing . Kyusa emifulejje egy’okwesimbye nga girina .gx-*kiraasi, emifulejje egy’okwesimbye nga girina .gy-*, oba emifulejje gyonna nga girina .g-*kiraasi. .g-0era eriwo okuggyamu emifulejje.

• Sass variables, maps, ne mixins ziwa amaanyi ku grid. Bw’oba ​​toyagala kukozesa bika bya grid ebyategekebwa edda mu Bootstrap, osobola okukozesa ensibuko yaffe eya grid Sass okukola eyiyo n’obubonero obusingako obw’amakulu. Tussaamu n’ebintu ebimu ebya CSS eby’ennono okukozesa enkyukakyuka zino eza Sass okusobola okukyukakyuka okusingawo gy’oli.

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

Ebintu eby’okulondako mu giridi

Enkola ya Bootstrap eya grid esobola okukyusakyusa mu bifo byonna omukaaga ebisookerwako, n'ebifo byonna eby'okumenyawo by'olongoosa. Emitendera omukaaga egy’ekisenge ekisookerwako gye giti:

• Entono ennyo (xs) .
• Obutono (sm) .
• Eky’omu makkati (md) .
• Ennene (lg) .
• Ebinene ennyo (xl) .
• Extra ekinene ennyo (xxl) .

Nga bwe kyayogeddwa waggulu, buli emu ku breakpoint zino erina ekintu kyayo, entandikwa ya kiraasi ey’enjawulo, n’ebikyusa. Laba engeri giridi gy’ekyuka okuyita mu bifo bino eby’okumenya:

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 xxl. Okwongerako omuwendo gwonna ogwa kiraasi ezitaliimu yuniti ku buli breakpoint gy’olina era buli mpagi ejja kuba ya bugazi bwe bumu.

<div class="container text-center">
  <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>

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 text-center">
  <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 text-center">
  <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 mukaaga 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 text-center">
  <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 text-center">
  <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 text-center">
  <!-- 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>

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. Nga .row-cols-autoosobola okuwa empagi obugazi bwazo obw’obutonde.

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

<div class="container text-center">
  <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 text-center">
  <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 text-center">
  <div class="row row-cols-auto">
    <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 text-center">
  <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 text-center">
  <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 text-center">
  <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);
  }
}

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 text-center">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="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 nga bwe kiri

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: 1.5rem;
$grid-row-columns:  6;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

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

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@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 {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

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-row-columnsekozesebwa okuteekawo omuwendo ogusinga obunene ogw'ennyiriri eza .row-cols-*, ennamba yonna esukka ekkomo lino esuulibwa amaaso.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !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 %).