Bootstrap mřížky
Bootstrap Grid System
Mřížkový systém Bootstrapu umožňuje až 12 sloupců na stránce.
Pokud nechcete používat všech 12 sloupců jednotlivě, můžete je seskupit a vytvořit širší sloupce:
| rozpětí 1 | rozpětí 1 | rozpětí 1 | rozpětí 1 | rozpětí 1 | rozpětí 1 | rozpětí 1 | rozpětí 1 | rozpětí 1 | rozpětí 1 | rozpětí 1 | rozpětí 1 |
| rozpětí 4 | rozpětí 4 | rozpětí 4 | |||||||||
| rozpětí 4 | rozpětí 8 | ||||||||||
| rozpětí 6 | rozpětí 6 | ||||||||||
| rozpětí 12 | |||||||||||
Mřížkový systém Bootstrapu reaguje a sloupce se automaticky přeuspořádají v závislosti na velikosti obrazovky.
Třídy mřížky
Bootstrap grid systém má čtyři třídy:
xs(pro telefony – obrazovky o šířce menší než 768 pixelů)sm(pro tablety – obrazovky o šířce rovné nebo větší než 768 pixelů)md(pro malé notebooky – obrazovky o šířce rovné nebo větší než 992 pixelů)lg(pro notebooky a stolní počítače – obrazovky o šířce rovné nebo větší než 1200 pixelů)
Výše uvedené třídy lze kombinovat a vytvářet dynamičtější a flexibilnější rozvržení.
Základní struktura Bootstrap Grid
Níže je uvedena základní struktura Bootstrap mřížky:
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
Za prvé; vytvořit řádek ( <div
class="row">). Poté přidejte požadovaný počet sloupců (značky s příslušnými
.col-*-*třídami). Všimněte si, že čísla v .col-*-*by měla být vždy 12 pro každý řádek.
Níže jsme shromáždili několik příkladů základních rozložení mřížky Bootstrap.
Tři stejné sloupce
Následující příklad ukazuje, jak získat tři sloupce stejné šířky počínaje tabletami a škálovat na velké stolní počítače. Na mobilních telefonech nebo obrazovkách o šířce menší než 768 pixelů se sloupce automaticky složí:
Příklad
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Dva nestejné sloupce
Následující příklad ukazuje, jak získat dva sloupce různé šířky počínaje tabletami a škálovat na velké stolní počítače:
Příklad
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Tip: Více o mřížkách Bootstrap se dozvíte později v tomto tutoriálu.