Kontajnery
Kontajnery sú základným stavebným kameňom Bootstrapu, ktorý obsahuje, vypĺňa a zarovnáva váš obsah v rámci daného zariadenia alebo výrezu.
Ako fungujú
Kontajnery sú najzákladnejším prvkom rozloženia v Bootstrape a sú potrebné pri použití nášho predvoleného mriežkového systému . Kontajnery sa používajú na uloženie, vyplnenie a (niekedy) vycentrovanie obsahu v nich. Hoci kontajnery môžu byť vnorené, väčšina rozložení nevyžaduje vnorený kontajner.
Bootstrap sa dodáva s tromi rôznymi kontajnermi:
.container
, ktorý nastavuje amax-width
pri každom responzívnom bode prerušenia.container-fluid
, ktorá jewidth: 100%
vo všetkých bodoch zlomu.container-{breakpoint}
, čo jewidth: 100%
až do zadaného bodu zlomu
Nasledujúca tabuľka zobrazuje porovnanie jednotlivých kontajnerov max-width
s originálom .container
a .container-fluid
naprieč jednotlivými bodmi prerušenia.
Pozrite si ich v akcii a porovnajte ich v našom príklade mriežky .
Extra malý <576px |
Malé ≥ 576 pixelov |
Stredná ≥768 pixelov |
Veľký ≥992 pixelov |
X-Large ≥1200 pixelov |
XX-Large ≥1400 pixelov |
|
---|---|---|---|---|---|---|
.container |
100% | 540 pixelov | 720 pixelov | 960 pixelov | 1140 pixelov | 1320 pixelov |
.container-sm |
100% | 540 pixelov | 720 pixelov | 960 pixelov | 1140 pixelov | 1320 pixelov |
.container-md |
100% | 100% | 720 pixelov | 960 pixelov | 1140 pixelov | 1320 pixelov |
.container-lg |
100% | 100% | 100% | 960 pixelov | 1140 pixelov | 1320 pixelov |
.container-xl |
100% | 100% | 100% | 100% | 1140 pixelov | 1320 pixelov |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320 pixelov |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Predvolený kontajner
Naša predvolená .container
trieda je responzívny kontajner s pevnou šírkou, čo znamená, že sa max-width
mení pri každom bode prerušenia.
<div class="container">
<!-- Content here -->
</div>
Responzívne kontajnery
Responzívne kontajnery vám umožňujú určiť triedu, ktorá je 100 % široká, kým sa nedosiahne zadaný bod prerušenia, potom použijeme max-width
s pre každý z vyšších bodov prerušenia. Napríklad .container-sm
má 100 % šírku na začiatok, kým sm
sa nedosiahne bod prerušenia, kde sa zväčší pomocou md
, lg
, xl
a 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>
Nádoby na tekutiny
Použite .container-fluid
pre kontajner plnej šírky, ktorý pokrýva celú šírku výrezu.
<div class="container-fluid">
...
</div>
Sass
Ako je uvedené vyššie, Bootstrap generuje sériu preddefinovaných tried kontajnerov, ktoré vám pomôžu vytvoriť rozloženia, ktoré chcete. Tieto preddefinované triedy kontajnerov môžete prispôsobiť úpravou mapy Sass (nachádza sa v _variables.scss
), ktorá ich poháňa:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Okrem prispôsobenia Sass si môžete tiež vytvoriť svoje vlastné nádoby pomocou nášho Sass mixinu.
// 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();
}
Ďalšie informácie a príklady, ako upraviť naše mapy a premenné Sass, nájdete v sekcii Sass v dokumentácii Grid .