Bootstrap Grid System
Bootstrap Grid System
Mřížkový systém Bootstrapu 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 Bootstrapu je citlivý a sloupce se přeuspořádají v závislosti na velikosti obrazovky: Na velké obrazovce by to mohlo vypadat lépe s obsahem uspořádaným do tří sloupců, ale na malé obrazovce by bylo lepší, kdyby byly položky obsahu naskládané. nad sebou.
Tip: Pamatujte, že počet sloupců mřížky by měl být dvanáct na řádek. Kromě toho se sloupce budou skládat bez ohledu na výřez.
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í.
Tip: Každá třída se zvětšuje, takže pokud chcete nastavit stejné šířky pro xs a sm, stačí zadat xs.
Pravidla systému mřížky
Některá pravidla systému Bootstrap grid:
- Řádky musí být umístěny v rámci
.container(pevná šířka) nebo.container-fluid(plná šířka), aby bylo zajištěno správné zarovnání a odsazení - Pomocí řádků vytvořte vodorovné skupiny sloupců
- Obsah by měl být umístěn ve sloupcích a pouze sloupce mohou být přímými potomky řádků
- Předdefinované třídy jako
.rowa.col-sm-4jsou k dispozici pro rychlé vytváření rozvržení mřížky - Sloupce vytvářejí žlábky (mezery mezi obsahem sloupců) pomocí výplně. Tato výplň je posunuta v řádcích pro první a poslední sloupec prostřednictvím záporného okraje
.rows - Sloupce mřížky se vytvářejí zadáním počtu 12 dostupných sloupců, které chcete rozložit. Například tři stejné sloupce by použily tři
.col-sm-4 - Šířky sloupců jsou v procentech, takže jsou vždy proměnlivé a mají velikost vzhledem k jejich rodičovskému prvku
Základní struktura Bootstrap Grid
Níže je uvedena základní struktura Bootstrap mřížky:
<div class="container">
<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>
</div>
Chcete-li tedy vytvořit požadované rozložení, vytvořte kontejner ( <div
class="container">). Dále vytvořte řá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.
Možnosti mřížky
Následující tabulka shrnuje, jak systém Bootstrap grid funguje na více zařízeních:
| Extra small <768px |
Small >=768px |
Medium >=992px |
Large >=1200px |
|
|---|---|---|---|---|
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Suitable for | Phones | Tablets | Small Laptops | Laptops & Desktops |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| # of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
Příklady
Následující kapitoly ukazují příklady gridových systémů pro různá zařízení: