Konteynirên

Ç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-{breakpoint}, ku width: 100%heya xala veqetandinê ya diyarkirî ye
• .container-fluid, ku width: 100%li hemû xalên veqetînê 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 .

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

Konteynirên bersivdar dihêlin hûn çînek ku 100% fireh e heya ku bigihîje xala veqetînê ya diyarkirî destnîşan dikin, piştî wê 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 .