Konteenaroota
Qabduulee ijaarsa bu'uuraa Bootstrap kanneen qabiyyee kee meeshaa ykn iddoo ilaalchaa kenname keessatti of keessaa qaban, pad, fi qindeessaniidha.
Akkaataa itti hojjetan
Qabduulee Bootstrap keessatti qaama qindaa'ina bu'uuraa yoo ta'an yeroo sirna tarjaa durtii keenya fayyadamnu barbaachisoodha . Qabduu qabiyyee isaan keessa jiru qabachuuf, paad gochuuf, fi (yeroo tokko tokko) giddugaleessa gochuuf fayyadamu. Qabduulee man'ee ta'uu kan danda'an yoo ta'u, qindaa'inoota baay'een qabduu man'ee hin barbaadan .
Bootstrap qabduu adda addaa sadii waliin dhufa:
.container
max-width
, kan tokkoon tokkoon qabxii cabsuu deebii kennuu irratti a saagu.container-fluid
, kuniswidth: 100%
bakka cabbii hundatti ta’a.container-{breakpoint}
, kuniswidth: 100%
hanga qabxii cabbii ifteessameetti
Gabatee armaan gadii akkaataa tokkoon tokkoon qabduu's max-width
jalqabaa wajjin wal bira qabamee .container
fi .container-fluid
tokkoon tokkoon qabxii cabsuu qaxxaamuree agarsiisa.
Gochaan isaan ilaalii fakkeenya Giriidii keenya keessatti wal bira qabi ilaali .
Dabalata xiqqaa <576px |
Xiqqaa ≥576px |
Giddugaleessa ≥768px |
Guddaa ≥992px |
X-Guddaa ≥1200px |
XX-Guddaa ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% ta'a. | 540px ta'a | 720px ta'a | 960px ta'a | 1140px ta'a | 1320px ta'a |
.container-sm |
100% ta'a. | 540px ta'a | 720px ta'a | 960px ta'a | 1140px ta'a | 1320px ta'a |
.container-md |
100% ta'a. | 100% ta'a. | 720px ta'a | 960px ta'a | 1140px ta'a | 1320px ta'a |
.container-lg |
100% ta'a. | 100% ta'a. | 100% ta'a. | 960px ta'a | 1140px ta'a | 1320px ta'a |
.container-xl |
100% ta'a. | 100% ta'a. | 100% ta'a. | 100% ta'a. | 1140px ta'a | 1320px ta'a |
.container-xxl |
100% ta'a. | 100% ta'a. | 100% ta'a. | 100% ta'a. | 100% ta'a. | 1320px ta'a |
.container-fluid |
100% ta'a. | 100% ta'a. | 100% ta'a. | 100% ta'a. | 100% ta'a. | 100% ta'a. |
Qabduu durtii
Gitni keenya durtii .container
deebii kan kennu, qabduu bal'ina dhaabbataa dha, jechuunis max-width
jijjiiramoota isaa tokkoon tokkoo qabxii cabbii irratti.
<div class="container">
<!-- Content here -->
</div>
Konteenaroota deebii kennan
Qabduu deebii kennaan hanga qabxiin cabbii ifteessame ga'utti gita bal'ina 100% ifteessuu si dandeessisu, sana booda max-width
tokkoon tokkoo tuqaawwan ciccituu ol'aanaaf s hojiirra oolchina. Fakkeenyaaf, hanga tuqaa ciccituu .container-sm
ga'utti jalqabuuf 100% bal'ina qaba sm
, bakka inni md
, lg
, xl
, fi 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>
Meeshaalee dhangala’oo qaban
.container-fluid
Qabduu bal'ina guutuuf fayyadami, bal'ina guutuu bal'ina mul'ataa bal'isuu .
<div class="container-fluid">
...
</div>
Sass jedhama
Akkuma armaan olitti agarsiifame, Bootstrap tartiiba gita qabduu durtii ibsame uuma, kunis qindaa'inoota barbaaddu ijaaruuf si gargaara. Gitoota qabduu durtii ibsaman kana kaartaa Sass (kan keessatti argame _variables.scss
) kan humna isaaniif kennu fooyyessuudhaan dhuunfachuu dandeessa:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Sass dhuunfachuu malees, Sass mixin keenyaan qabduu mataa keessanii uumuu dandeessu.
// 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();
}
Odeeffannoo dabalataa fi fakkeenyota akkaataa kaartaa fi jijjiiramoota Sass keenya fooyyessuuf, maaloo kutaa Sass galmee Giriidi ilaali .