Ebintu ebiteekebwamu ebintu
Containers kye kizimba ekikulu ekya Bootstrap ekirimu, pad, era nga kikwataganya ebirimu byo munda mu kyuma oba viewport eweereddwa.
Engeri gye zikolamu
Containers ze kintu ekisinga obukulu eky'ensengeka mu Bootstrap era zeetaagibwa nga okozesa enkola yaffe eya grid eya bulijjo . Ebitereke bikozesebwa okuteekebwamu, okupa, n’okussa (oluusi) wakati ebirimu munda mu byo. Wadde nga ebitereke bisobola okuteekebwa mu kisu, ensengeka ezisinga tezeetaaga kibya kya kiyumba.
Bootstrap ejja n’ebintu bisatu eby’enjawulo:
.container
, eteeka amax-width
ku buli breakpoint eddamu.container-fluid
, nga kino kiriwidth: 100%
ku bifo byonna eby’okumenya.container-{breakpoint}
, nga kino kibeerawidth: 100%
okutuusa ku kifo ekiragiddwa eky’okumenyawo
Omulongooti wansi gulaga engeri buli container's max-width
gyegerageranya ku original .container
era .container-fluid
okubuna buli breakpoint.
Zirabe nga zikola era ozigeraageranye mu kyokulabirako kyaffe ekya Grid .
Obutono obw'enjawulo <576px |
Obutono ≥576px |
Eky’omu makkati ≥768px |
Ennene ≥992px |
X- Ekinene ≥1200px |
XX- Ekinene ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% . | 540px nga bwe kiri | 720px nga bwe kiri | 960px nga bwe kiri | 1140px nga bwe kiri | 1320px nga bwe kiri |
.container-sm |
100% . | 540px nga bwe kiri | 720px nga bwe kiri | 960px nga bwe kiri | 1140px nga bwe kiri | 1320px nga bwe kiri |
.container-md |
100% . | 100% . | 720px nga bwe kiri | 960px nga bwe kiri | 1140px nga bwe kiri | 1320px nga bwe kiri |
.container-lg |
100% . | 100% . | 100% . | 960px nga bwe kiri | 1140px nga bwe kiri | 1320px nga bwe kiri |
.container-xl |
100% . | 100% . | 100% . | 100% . | 1140px nga bwe kiri | 1320px nga bwe kiri |
.container-xxl |
100% . | 100% . | 100% . | 100% . | 100% . | 1320px nga bwe kiri |
.container-fluid |
100% . | 100% . | 100% . | 100% . | 100% . | 100% . |
Ekintu ekisookerwako
Ekibiina kyaffe ekisookerwako .container
kye kiddamu, ekitereka eky’obugazi obutakyukakyuka, ekitegeeza max-width
enkyukakyuka zaakyo ku buli kifo eky’okumenya.
<div class="container">
<!-- Content here -->
</div>
Ebitereke ebiddamu
Ebitereke ebiddamu bikusobozesa okulaga kiraasi egazi 100% okutuusa ng’ekifo eky’okumenya ekiragiddwa kituuse, oluvannyuma ne tukozesa max-width
s ku buli kimu ku bifo eby’okumenya eby’oku ntikko. Okugeza, .container-sm
is 100% wide okutandika okutuusa nga sm
breakpoint etuuse, gyejja okulinnya ne md
, lg
, xl
, ne xxl
.
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Ebintu ebiteekebwamu amazzi
Kozesa .container-fluid
ku kibya eky'obugazi obujjuvu, ekibunye obugazi bwonna obw'ekifo eky'okulaba.
<div class="container-fluid">
...
</div>
Sass nga bwe kiri
Nga bwe kiragibwa waggulu, Bootstrap ekola omuddirirwa gwa kiraasi za konteyina ezitegekeddwa edda okukuyamba okuzimba ensengeka z’oyagala. Oyinza okulongoosa kiraasi zino ez'ebintu ebiteekeddwateekeddwa edda ng'okyusa maapu ya Sass (esangibwa mu _variables.scss
) eziwa amaanyi:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Ng’oggyeeko okulongoosa Sass, osobola n’okukola ebitereke byo nga okozesa mixin yaffe eya Sass.
// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
padding-right: $padding-x;
padding-left: $padding-x;
margin-right: auto;
margin-left: auto;
}
// Usage
.custom-container {
@include make-container();
}
Okumanya ebisingawo n’ebyokulabirako ku ngeri y’okukyusaamu maapu zaffe eza Sass n’enkyukakyuka, laba ekitundu kya Sass eky’ebiwandiiko bya Grid .