Containers

Hoe't se wurkje

Containers binne it meast basale layout-elemint yn Bootstrap en binne ferplicht by it brûken fan ús standert rastersysteem . Containers wurde brûkt om de ynhâld yn har te befetsjen, te paden en (soms) te sintrum. Wylst konteners kinne wurde nested, hawwe de measte yndielingen gjin nestede kontener nedich.

Bootstrap komt mei trije ferskillende konteners:

• .container, dy't in max-widthby elk responsyf brekpunt stelt
• .container-{breakpoint}, dat is width: 100%oant it oantsjutte brekpunt
• .container-fluid, dat is width: 100%by alle brekpunten

De tabel hjirûnder yllustrearret hoe't elke kontener max-widthfergeliket mei it orizjineel .containeren .container-fluidoer elk brekpunt.

Sjoch se yn aksje en fergelykje se yn ús Grid-foarbyld .

Standert container

Us standertklasse .containeris in reageare kontener mei fêste breedte, wat betsjut dat de max-widthferoaringen by elk brekpunt binne.

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

Responsive konteners

Responsive containers kinne jo in klasse oantsjutte dy't 100% breed is oant it oantsjutte breakpoint wurdt berikt, wêrnei't wy max-widths tapasse foar elk fan 'e hegere breakpoints. Bygelyks, .container-smis 100% breed om te begjinnen oant it smbrekpunt wurdt berikt, wêr't it opskale sil mei md, lg, xl, en 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>

Fluid konteners

Brûk .container-fluidfoar in folsleine breedte container, oerspant de hiele breedte fan de viewport.

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

Sass

Lykas hjirboppe toand, genereart Bootstrap in searje foarôf definieare kontenerklassen om jo te helpen de yndielingen te bouwen dy't jo winskje. Jo kinne dizze foarôf definieare kontenerklassen oanpasse troch de Sass-kaart te wizigjen (fûn yn _variables.scss) dy't har machtigje:

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

Neist it oanpassen fan de Sass, kinne jo ek jo eigen konteners meitsje mei ús 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();
}

Foar mear ynformaasje en foarbylden oer hoe't jo ús Sass-kaarten en fariabelen feroarje kinne, ferwize asjebleaft nei de Sass-seksje fan 'e Grid-dokumintaasje .