Konteineri
Konteineri ir Bootstrap pamatelements, kas satur, papildina un izlīdzina jūsu saturu noteiktā ierīcē vai skatvietā.
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 amax-width
katrā adaptīvajā pārtraukuma punktā.container-fluid
, kas irwidth: 100%
visos pārtraukuma punktos.container-{breakpoint}
, kas irwidth: 100%
līdz norādītajam pārtraukuma punktam
Tālāk esošajā tabulā ir parādīts, kā katrs konteiners ir max-width
salīdzināms ar sākotnējo .container
un .container-fluid
katrā pārtraukuma punktā.
Skatiet tos darbībā un salīdziniet tos mūsu režģa piemērā .
Īpaši mazs <576 pikseļi |
Mazs ≥576 pikseļi |
Vidēja ≥768 pikseļi |
Liels ≥992 pikseļi |
X-Large ≥1200 pikseļi |
XX liels ≥1400 pikseļi |
|
---|---|---|---|---|---|---|
.container |
100% | 540 pikseļi | 720 pikseļi | 960 pikseļi | 1140 pikseļi | 1320 pikseļi |
.container-sm |
100% | 540 pikseļi | 720 pikseļi | 960 pikseļi | 1140 pikseļi | 1320 pikseļi |
.container-md |
100% | 100% | 720 pikseļi | 960 pikseļi | 1140 pikseļi | 1320 pikseļi |
.container-lg |
100% | 100% | 100% | 960 pikseļi | 1140 pikseļi | 1320 pikseļi |
.container-xl |
100% | 100% | 100% | 100% | 1140 pikseļi | 1320 pikseļi |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320 pikseļi |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Noklusējuma konteiners
Mūsu noklusējuma .container
klase ir adaptīvs, fiksēta platuma konteiners, kas nozīmē, ka tā max-width
mainā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-width
s katram no augstākajiem pārtraukuma punktiem. Piemēram, .container-sm
ir 100% plats, lai sāktu, līdz sm
tiek 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-fluid
pilna 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 .