Bootstrap 4 kontejnery
Kontejnery
Z předchozí kapitoly jste se dozvěděli, že Bootstrap vyžaduje obsahující prvek k zabalení obsahu webu.
Kontejnery se používají k vyplnění obsahu uvnitř nich a k dispozici jsou dvě třídy kontejnerů:
- Třída
.containerposkytuje responzivní kontejner s pevnou šířkou - Třída
.container-fluidposkytuje kontejner plné šířky , který pokrývá celou šířku zobrazované oblasti
Pevný kontejner
Použijte .containertřídu k vytvoření responzivního kontejneru s pevnou šířkou.
Všimněte si, že jeho šířka ( max-width) se bude měnit na různých velikostech obrazovky:
|
Extra malý <576px |
Malý ≥576 pixelů |
Střední ≥768 pixelů |
Velké ≥992 pixelů |
Extra velký ≥1200px |
|
|---|---|---|---|---|---|
| max. šířka | 100% | 540 pixelů | 720 pixelů | 960 pixelů | 1140 pixelů |
Otevřete níže uvedený příklad a změňte velikost okna prohlížeče, abyste viděli, že šířka kontejneru se bude měnit v různých bodech přerušení:
Příklad
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Nádoba na kapalinu
Použijte .container-fluidtřídu k vytvoření kontejneru plné šířky, který bude vždy pokrývat celou šířku obrazovky ( widthje vždy 100%):
Příklad
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Polstrování nádoby
Ve výchozím nastavení mají kontejnery odsazení vlevo a vpravo 15 pixelů, bez horního nebo spodního odsazení. Proto často používáme nástroje pro oddělování , jako je extra výplň a okraje, aby vypadaly ještě lépe. Například .pt-3znamená „přidat horní odsazení o velikosti 16 pixelů“:
Příklad
<div class="container pt-3"></div>
Mnohem více se o utilitách pro rozestupy dozvíte v naší kapitole BS4 Utilities .
Hranice a barva kontejneru
Spolu s kontejnery se často používají i další nástroje, jako jsou okraje a barvy:
Příklad
Moje první bootstrapová stránka
Tento kontejner má okraj a nějaké další vycpávky a okraje.
Moje první bootstrapová stránka
Tento kontejner má tmavou barvu pozadí a bílý text a nějaké další odsazení a okraje.
Moje první bootstrapová stránka
Tento kontejner má modrou barvu pozadí a bílý text a nějaké další odsazení a okraje.
<div class="container p-3 my-3 border"></div>
<div class="container
p-3 my-3 bg-dark
text-white"></div>
<div class="container p-3 my-3 bg-primary
text-white"></div>
Mnohem více se o barvách a pomůckách pro ohraničení dozvíte v naší kapitole Barvy BS4 a kapitole Pomůcky BS4 .
Responzivní kontejnery
Třídy můžete také použít .container-sm|md|lg|xlk vytvoření responzivních kontejnerů.
Kontejner max-widthse bude měnit na různých velikostech obrazovky/výřezech:
| Třída |
Extra malý <576px |
Malý ≥576 pixelů |
Střední ≥768 pixelů |
Velké ≥992 pixelů |
Extra velký ≥1200px |
|---|---|---|---|---|---|
.container-sm |
100% | 540 pixelů | 720 pixelů | 960 pixelů | 1140 pixelů |
.container-md |
100% | 100% | 720 pixelů | 960 pixelů | 1140 pixelů |
.container-lg |
100% | 100% | 100% | 960 pixelů | 1140 pixelů |
.container-xl |
100% | 100% | 100% | 100% | 1140 pixelů |
Příklad
<div class="container-sm">.container-sm</div>
<div
class="container-md">.container-md</div>
<div
class="container-lg">.container-lg</div>
<div
class="container-xl">.container-xl</div>
Věděl jsi?
W3.CSS je vynikající alternativou k Bootstrap 4.
W3.CSS je menší, rychlejší a snáze se používá.
Pokud se chcete naučit W3.CSS, přejděte do našeho kurzu W3.CSS .