Konteynirên
Konteyner bloka avakirina bingehîn a Bootstrap-ê ye ku naveroka we di nav amûrek an nihêrînek diyarkirî de vedihewîne, pêve dike û li hev dike.
Çawa ew dixebitin
Konteyner di Bootstrap de hêmana sêwirana herî bingehîn in û dema ku pergala meya torê ya xwerû bikar tînin hewce ne . Konteyner têne bikar anîn ku naverokê di hundurê xwe de bihewînin, pêxin û (carinan) navend bikin. Digel ku konteynir dikarin hêlîn bibin, pir layoutan hewcedarî konteynirek hêlîn nakin.
Bootstrap bi sê konteynerên cihêreng tê:
.container
, ya kumax-width
li her xala veqetandinê ya bersivdar a destnîşan dike.container-fluid
, kuwidth: 100%
li hemû xalên veqetînê ye.container-{breakpoint}
, kuwidth: 100%
heya xala veqetandinê ya diyarkirî ye
Tabloya jêrîn destnîşan dike ka her konteynir çawa max-width
bi orîjînalê re .container
û .container-fluid
li seranserê her xala veqetandinê berhev dike.
Wan di çalakiyê de bibînin û wan di mînaka meya Grid de bidin ber hev .
Zêde piçûk <576px |
Piçûk ≥576px |
Navîn ≥768px |
Mezin ≥992px |
X-Large ≥1200px |
XX-Mezin ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Konteynir standard
Dersa .container
meya xwerû konteynirek bersivdar, bi firehî sabît e, tê vê wateyê ku max-width
di her xala veqetandinê de guheztina wê.
<div class="container">
<!-- Content here -->
</div>
Konteynirên bersivdar
Konteynerên bersivdar dihêlin hûn çînek ku 100% fireh e heya ku bigihîje xala veqetandinê ya diyarkirî destnîşan dikin, piştî ku em max-width
s-yê ji bo her yek ji xalên veqetandinê yên bilindtir bicîh dikin. Mînakî, .container-sm
100% fireh e ku dest pê bike heya ku xala sm
veqetînê bigihîje, li wir dê bi md
, lg
, xl
, û 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>
Konteynirên şilekê
Ji .container-fluid
bo konteynirek firehiya tevahî bikar bînin, ku tevahiya firehiya dîmenderê vedigire.
<div class="container-fluid">
...
</div>
Sass
Wekî ku li jor hatî destnîşan kirin, Bootstrap rêzek dersên konteynerê yên pêşwext diafirîne da ku ji we re bibe alîkar ku hûn nexşeyên ku hûn dixwazin ava bikin. Hûn dikarin van çînên konteynerê yên pêşwextkirî bi guheztina nexşeya Sass (li dîtin _variables.scss
) ku wan hêzdar dike xweş bikin:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Ji bilî xweşkirina Sass-ê, hûn dikarin bi Sass mixin-a me re konteynerên xwe jî biafirînin.
// 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();
}
Ji bo bêtir agahdarî û nimûneyên li ser ka meriv çawa nexşe û guhêrbarên me yên Sass biguhezîne, ji kerema xwe serî li beşa Sass ya belgeya Grid bidin .