Containers
Containers binne in fûnemintele boublok fan Bootstrap dy't jo ynhâld befetsje, pad en ôfstimme binnen in bepaald apparaat of viewport.
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 inmax-width
by elk responsyf brekpunt stelt.container-fluid
, dat iswidth: 100%
by alle brekpunten.container-{breakpoint}
, dat iswidth: 100%
oant it oantsjutte brekpunt
De tabel hjirûnder yllustrearret hoe't elke kontener max-width
fergeliket mei it orizjineel .container
en .container-fluid
oer elk brekpunt.
Sjoch se yn aksje en fergelykje se yn ús Grid-foarbyld .
Ekstra lyts <576px |
Lyts ≥576px |
Medium ≥768px |
Grutte ≥992px |
X-Large ≥1200px |
XX-grut ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140 px | 1320 px |
.container-sm |
100% | 540px | 720px | 960px | 1140 px | 1320 px |
.container-md |
100% | 100% | 720px | 960px | 1140 px | 1320 px |
.container-lg |
100% | 100% | 100% | 960px | 1140 px | 1320 px |
.container-xl |
100% | 100% | 100% | 100% | 1140 px | 1320 px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320 px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Standert container
Us standertklasse .container
is in reageare kontener mei fêste breedte, wat betsjut dat de max-width
feroaringen 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-width
s tapasse foar elk fan 'e hegere breakpoints. Bygelyks, .container-sm
is 100% breed om te begjinnen oant it sm
brekpunt 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-fluid
foar 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 .