Enkola ya grid
Kozesa grid yaffe ey’amaanyi mobile-first flexbox okuzimba layouts za shapes zonna ne sizes okwebaza enkola y’ennyiriri kkumi na bbiri, tiers mukaaga default responsive, Sass variables ne mixins, ne makumi ga classes ezitegekeddwa edda.
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">
<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-width
bibuuzo by’emikutu, ekitegeeza nti zikwata ku breakpoint eyo n’abo bonna abali waggulu waakyo (okugeza,.col-sm-4
ekwata kusm
,md
,lg
,xl
, nexxl
). 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
.container
ku bugazi bwa pikseli obuddamu,.container-fluid
kuwidth: 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. Kinopadding
olwo 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-4
spans nnya).width
s 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-0
era 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:
xs <576px nga bwe kiri |
sm ≥576px nga bwe kiri |
md ≥768px nga bwe kiri |
lg ≥992px nga bwe kiri |
xl ≥1200px nga bwe kiri |
xxl ≥1400px nga bwe kiri |
|
---|---|---|---|---|---|---|
Ekintu ekiyitibwa Konteyinamax-width |
Tewali (auto) . | 540px nga bwe kiri | 720px nga bwe kiri | 960px nga bwe kiri | 1140px nga bwe kiri | 1320px nga bwe kiri |
Entandikwa y’ekibiina | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# wa empagi | 12. 12 | |||||
Obugazi bwa gutter | 1.5rem (.75rem ku kkono ne ku ddyo) | |||||
Emifulejje egy’ennono | Yee | |||||
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 xs
ku 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">
<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">
<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}-auto
kiraasi 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 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 .col
ne . .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>
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 .row
nga ekisookerwako ku mpagi ezirimu. Nga .row-cols-auto
osobola okuwa empagi obugazi bwazo obw’obutonde.
Kozesa kiraasi zino ez’ennyiriri okukola amangu ensengeka za gridi ezisookerwako oba okufuga ensengeka za kaadi yo n’okusazaamu nga kyetaagisa ku ddaala ly’ennyiriri.
<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-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">
<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>
<div class="container">
<div class="row row-cols-2 row-cols-lg-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">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 .row
n'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-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-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);
// 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 {
@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-columns
ekozesebwa okukola obugazi (mu bitundu ku kikumi) bwa buli mpagi ssekinnoomu ate $grid-gutter-width
eteeka obugazi bw’emidumu gy’empagi.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !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-breakpoints
ne $container-max-widths
ku 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 %
).