Biçe ser naveroka sereke Biçe navîgasyon belgeyan
in English

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 ku max-widthli her xala veqetandinê ya bersivdar a destnîşan dike
  • .container-fluid, ku width: 100%li hemû xalên veqetînê ye
  • .container-{breakpoint}, ku width: 100%heya xala veqetandinê ya diyarkirî ye

Tabloya jêrîn destnîşan dike ka her konteynir çawa max-widthbi orîjînalê re .containerû .container-fluidli 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 .containermeya xwerû konteynirek bersivdar, bi firehî sabît e, tê vê wateyê ku max-widthdi 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-widths-yê ji bo her yek ji xalên veqetandinê yên bilindtir bicîh dikin. Mînakî, .container-sm100% fireh e ku dest pê bike heya ku xala smveqetî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-fluidbo 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 .