Kontejneri
Kontejneri su osnovni građevni blok Bootstrapa koji sadrže, dodaju i poravnavaju vaš sadržaj unutar određenog uređaja ili okvira za prikaz.
Kako rade
Kontejneri su najosnovniji element rasporeda u Bootstrapu i potrebni su kada se koristi naš zadani grid sistem . Kontejneri se koriste za sadržavanje, punjenje i (ponekad) centriranje sadržaja unutar njih. Dok kontejneri mogu biti ugniježđeni, većina izgleda ne zahtijeva ugniježđeni kontejner.
Bootstrap dolazi s tri različita kontejnera:
.container
, koji postavlja amax-width
na svaku tačku prekida.container-fluid
, što jewidth: 100%
na svim tačkama prekida.container-{breakpoint}
, što jewidth: 100%
do navedene tačke prekida
Tabela ispod ilustruje kako se svaki kontejner max-width
upoređuje sa originalom .container
i .container-fluid
preko svake tačke prekida.
Pogledajte ih u akciji i uporedite ih u našem Grid primjeru .
Ekstra mali <576px |
Mala ≥576px |
Srednje ≥768px |
Veliki ≥992px |
X-Large ≥1200px |
XX-Veliki ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Zadani kontejner
Naša zadana .container
klasa je prilagodljivi kontejner fiksne širine, što znači da se max-width
mijenja na svakoj tački prekida.
<div class="container">
<!-- Content here -->
</div>
Responzivni kontejneri
Responzivni kontejneri vam omogućavaju da navedete klasu koja je 100% široka dok se ne dostigne navedena tačka prekida, nakon čega primenjujemo max-width
s za svaku od viših tačaka prekida. Na primjer, .container-sm
širina je 100% za početak dok se sm
ne dostigne tačka prekida, gdje će se povećavati 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>
Posude za tečnost
Koristi .container-fluid
se za kontejner pune širine, koji obuhvata cijelu širinu okvira za prikaz.
<div class="container-fluid">
...
</div>
Sass
Kao što je gore prikazano, Bootstrap generiše seriju unapred definisanih klasa kontejnera kako bi vam pomogao da izgradite izglede koje želite. Možete prilagoditi ove unaprijed definirane klase kontejnera modificiranjem Sass mape (koja se nalazi u _variables.scss
) koja ih pokreće:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Osim prilagođavanja Sass-a, također možete kreirati vlastite kontejnere 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 primjera o tome kako modificirati naše Sass mape i varijable, pogledajte odjeljak Sass u Grid dokumentaciji .