Kontejneri
Spremnici su temeljni građevni blok Bootstrapa koji sadrži, postavlja i usklađuje vaš sadržaj unutar određenog uređaja ili okvira za prikaz.
Kako rade
Kontejneri su najosnovniji element izgleda u Bootstrapu i potrebni su kada se koristi naš zadani grid sustav . Spremnici se koriste za držanje, podmetanje i (ponekad) centriranje sadržaja unutar njih. Iako se spremnici mogu ugniježditi, većina izgleda ne zahtijeva ugniježđeni spremnik.
Bootstrap dolazi s tri različita spremnika:
.container
, koji postavlja amax-width
na svakoj točki prijelaza.container-fluid
, koji jewidth: 100%
na svim prijelomnim točkama.container-{breakpoint}
, što jewidth: 100%
do navedene prijelomne točke
Donja tablica ilustrira kako se svaki spremnik max-width
uspoređuje s izvornikom .container
i .container-fluid
preko svake prijelomne točke.
Pogledajte ih na djelu i usporedite ih u našem primjeru mreže .
Izuzetno mali <576px |
Mali ≥576px |
Srednje ≥768 px |
Veliki ≥992 px |
X-Large ≥1200 px |
XX-veliki ≥1400 px |
|
---|---|---|---|---|---|---|
.container |
100% | 540 px | 720 px | 960 px | 1140 px | 1320 px |
.container-sm |
100% | 540 px | 720 px | 960 px | 1140 px | 1320 px |
.container-md |
100% | 100% | 720 px | 960 px | 1140 px | 1320 px |
.container-lg |
100% | 100% | 100% | 960 px | 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% |
Zadani spremnik
Naša zadana .container
klasa je responzivni spremnik fiksne širine, što znači da se max-width
mijenja na svakoj prekidnoj točki.
<div class="container">
<!-- Content here -->
</div>
Responzivni spremnici
Responzivni spremnici omogućuju vam da navedete klasu koja je 100% široka dok se ne dosegne navedena prijelomna točka, nakon čega primjenjujemo max-width
s za svaku od viših prijelomnih točaka. Na primjer, .container-sm
širina je 100% za početak dok se sm
ne dosegne prijelomna točka, gdje će se povećati s md
, lg
, xl
i 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>
Spremnici za tekućinu
Koristite .container-fluid
za spremnik pune širine, koji obuhvaća cijelu širinu prozora.
<div class="container-fluid">
...
</div>
Sass
Kao što je gore prikazano, Bootstrap generira niz unaprijed definiranih klasa spremnika kako bi vam pomogao da izgradite izglede koje želite. Možete prilagoditi ove unaprijed definirane klase spremnika modificiranjem Sass karte (pronađene u _variables.scss
) koja ih pokreće:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Osim prilagodbe Sass-a, također možete izraditi vlastite spremnike s 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 više informacija i primjere o tome kako modificirati naše Sass mape i varijable, pogledajte odjeljak Sass u Grid dokumentaciji .