Konteineri

Kā viņi strādā

Konteineri ir visvienkāršākais Bootstrap izkārtojuma elements, un tie ir nepieciešami, izmantojot mūsu noklusējuma režģa sistēmu . Konteineri tiek izmantoti, lai saturētu tajos, ievietotu tos un (dažreiz) centrētu tos. Lai gan konteinerus var ligzdot, lielākajai daļai izkārtojumu nav nepieciešams ligzdots konteiners.

Bootstrap komplektācijā ietilpst trīs dažādi konteineri:

• .container, kas iestata a max-widthkatrā adaptīvajā pārtraukuma punktā
• .container-{breakpoint}, kas ir width: 100%līdz norādītajam pārtraukuma punktam
• .container-fluid, kas ir width: 100%visos pārtraukuma punktos

Tālāk esošajā tabulā ir parādīts, kā katrs konteiners ir max-widthsalīdzināms ar sākotnējo .containerun .container-fluidkatrā pārtraukuma punktā.

Skatiet tos darbībā un salīdziniet tos mūsu režģa piemērā .

Noklusējuma konteiners

Mūsu noklusējuma .containerklase ir adaptīvs, fiksēta platuma konteiners, kas nozīmē, ka tā max-widthmainās katrā pārtraukuma punktā.

<div class="container">
  <!-- Content here -->
</div>

Atsaucīgi konteineri

Adaptīvie konteineri ļauj norādīt klasi, kas ir 100% plata, līdz tiek sasniegts norādītais pārtraukuma punkts, pēc kura mēs piemērojam max-widths katram no augstākajiem pārtraukuma punktiem. Piemēram, .container-smir 100% plats, lai sāktu, līdz smtiek sasniegts pārtraukuma punkts, kur tas tiks palielināts ar md, lg, xl, un 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>

Šķidruma tvertnes

Izmantojiet .container-fluidpilna platuma konteineram, kas aptver visu skatvietas platumu.

<div class="container-fluid">
  ...
</div>

Sass

Kā parādīts iepriekš, Bootstrap ģenerē virkni iepriekš definētu konteineru klašu, lai palīdzētu jums izveidot vēlamos izkārtojumus. Varat pielāgot šīs iepriekš definētās konteineru klases, pārveidojot Sass karti (atrodams _variables.scss), kas tās nodrošina:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Papildus Sass pielāgošanai varat arī izveidot savus konteinerus, izmantojot mūsu Sass mixin.

// 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();
}

Lai iegūtu papildinformāciju un piemērus par to, kā modificēt mūsu Sass kartes un mainīgos, lūdzu, skatiet Grid dokumentācijas Sass sadaļu .