Zabojniki
Vsebniki so temeljni gradnik Bootstrapa, ki vsebujejo, oblagajo in poravnajo vašo vsebino znotraj dane naprave ali vidnega polja.
Kako delujejo
Vsebniki so najosnovnejši element postavitve v Bootstrapu in so potrebni pri uporabi našega privzetega mrežnega sistema . Vsebniki se uporabljajo za shranjevanje, oblaganje in (včasih) središče vsebine v njih. Medtem ko so vsebniki lahko ugnezdeni, večina postavitev ne zahteva ugnezdenega vsebnika.
Bootstrap ima tri različne vsebnike:
.container
, ki nastavi amax-width
na vsaki odzivni prekinitveni točki.container-fluid
, ki jewidth: 100%
na vseh prelomnih točkah.container-{breakpoint}
, ki jewidth: 100%
do podane prelomne točke
Spodnja tabela prikazuje max-width
primerjavo posameznega vsebnika z izvirnikom .container
in .container-fluid
na vsaki prelomni točki.
Oglejte si jih v akciji in jih primerjajte v našem primeru mreže .
Zelo majhen <576 slikovnih pik |
Majhna ≥576 slikovnih pik |
Srednje ≥768 slikovnih pik |
Velika ≥992 slikovnih pik |
X-Large ≥1200 slikovnih pik |
XX-veliko ≥1400 slikovnih pik |
|
---|---|---|---|---|---|---|
.container |
100 % | 540 slikovnih pik | 720 slikovnih pik | 960 slikovnih pik | 1140 slikovnih pik | 1320 slikovnih pik |
.container-sm |
100 % | 540 slikovnih pik | 720 slikovnih pik | 960 slikovnih pik | 1140 slikovnih pik | 1320 slikovnih pik |
.container-md |
100 % | 100 % | 720 slikovnih pik | 960 slikovnih pik | 1140 slikovnih pik | 1320 slikovnih pik |
.container-lg |
100 % | 100 % | 100 % | 960 slikovnih pik | 1140 slikovnih pik | 1320 slikovnih pik |
.container-xl |
100 % | 100 % | 100 % | 100 % | 1140 slikovnih pik | 1320 slikovnih pik |
.container-xxl |
100 % | 100 % | 100 % | 100 % | 100 % | 1320 slikovnih pik |
.container-fluid |
100 % | 100 % | 100 % | 100 % | 100 % | 100 % |
Privzeti vsebnik
Naš privzeti .container
razred je odziven vsebnik s fiksno širino, kar pomeni, da max-width
se spremeni ob vsaki prelomni točki.
<div class="container">
<!-- Content here -->
</div>
Odzivni vsebniki
Odzivni vsebniki vam omogočajo, da določite razred, ki je 100 % širok, dokler ni dosežena podana prelomna točka, po kateri uporabimo max-width
s za vsako od višjih prelomnih točk. Na primer, .container-sm
je 100-odstotno širok za začetek, dokler sm
ni dosežena točka prekinitve, kjer se poveča z md
, lg
, xl
in 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>
Posode za tekočino
Uporabite .container-fluid
za vsebnik polne širine, ki zajema celotno širino vidnega polja.
<div class="container-fluid">
...
</div>
Sass
Kot je prikazano zgoraj, Bootstrap generira niz vnaprej določenih razredov vsebnikov, ki vam pomagajo zgraditi želene postavitve. Te vnaprej določene razrede vsebnikov lahko prilagodite tako, da spremenite zemljevid Sass (najdete ga v _variables.scss
), ki jih poganja:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Poleg prilagajanja Sass lahko ustvarite tudi lastne vsebnike z našim Sass mixinom.
// 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();
}
Za več informacij in primere o tem, kako spremeniti naše zemljevide in spremenljivke Sass, glejte razdelek Sass v dokumentaciji Grid .