Bootstrap 4 Grids
Bootstrap 4 Grid System
Mřížkový systém Bootstrapu je postaven na flexboxu a umožňuje až 12 sloupců přes stránku.
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 reaguje a sloupce se automaticky přeuspořádají v závislosti na velikosti obrazovky.
Ujistěte se, že součet je 12 nebo méně (není nutné, abyste použili všech 12 dostupných sloupců).
Třídy mřížky
Mřížkový systém Bootstrap 4 má pět tříd:
.col-(extra malá zařízení – šířka obrazovky menší než 576 pixelů).col-sm-(malá zařízení – šířka obrazovky 576 pixelů nebo větší).col-md-(střední zařízení – šířka obrazovky rovna nebo větší než 768 pixelů).col-lg-(velká zařízení – šířka obrazovky rovna nebo větší než 992 pixelů).col-xl-(xlarge zařízení - šířka obrazovky rovna nebo větší než 1200px)
Výše uvedené třídy lze kombinovat a vytvářet dynamičtější a flexibilnější rozvržení.
Tip: Každá třída se zvětšuje, takže pokud chcete nastavit stejné šířky pro
sma md, stačí zadat pouze sm.
Základní struktura Bootstrap 4 Grid
Níže je uvedena základní struktura mřížky Bootstrap 4:
<!-- Control the column width, and how they should appear on different
devices -->
<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>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
První příklad: vytvořte řádek ( <div
class="row">). Poté přidejte požadovaný počet sloupců (značky s příslušnými
.col-*-*třídami). První hvězdička (*) představuje odezvu: sm, md, lg nebo xl, zatímco druhá hvězdička představuje číslo, jehož součet by měl být 12 pro každý řádek.
Druhý příklad: místo přidávání čísla ke každému colnechejte bootstrap, aby se postaral o rozvržení, aby vytvořil sloupce stejné šířky: dva "col"prvky = 50% šířka každého sloupce. tři sloupce = 33,33 % šířky na každý sloupec. čtyři sloupce = 25% šířka atd. Můžete také použít .col-sm|md|lg|xl, aby sloupce byly responzivní.
Níže jsme shromáždili několik příkladů základních rozložení mřížky Bootstrap 4.
Tři stejné sloupce
Následující příklad ukazuje, jak vytvořit tři sloupce stejné šířky na všech zařízeních a šířkách obrazovky:
Příklad
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
Responzivní sloupce
Následující příklad ukazuje, jak vytvořit čtyři sloupce stejné šířky počínaje tabletami a škálovat na extra velké plochy. Na mobilních telefonech nebo obrazovkách, které jsou menší než 576 pixelů, se sloupce automaticky naskládají na sebe :
Příklad
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Dva nerovnoměrně reagující sloupce
Následující příklad ukazuje, jak získat dva sloupce různé šířky počínaje tabletami a škálovat na velké extra plochy:
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 4 se dozvíte později v tomto tutoriálu.