Bootstrap 4 Grid System

Bootstrap 4 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:

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.

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.

Pravidla systému mřížky

Některá pravidla gridového systému Bootstrap 4:

• Řá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 .row a .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
• Největší rozdíl mezi Bootstrap 3 a Bootstrap 4 je ten, že Bootstrap 4 nyní používá flexbox místo plováků. Velkou výhodou flexboxu je, že sloupce mřížky bez zadané šířky se automaticky rozloží jako „sloupce stejné šířky“ (a stejné výšky). Příklad: Tři prvky s .col-smbudou mít každý automaticky šířku 33,33 % od malého bodu přerušení a výše. Tip: Pokud se chcete o Flexboxu dozvědět více, můžete si přečíst náš CSS Flexbox Tutorial .

Základní struktura Bootstrap 4 Grid

Níže je uvedena základní struktura mřížky Bootstrap 4:

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 vždy 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í.

Možnosti mřížky

Následující tabulka shrnuje, jak mřížkový systém Bootstrap 4 funguje na různých velikostech obrazovek:

Příklady

Následující kapitoly ukazují příklady gridových systémů pro různá zařízení a šířky obrazovky:

• Naskládané do vodorovné polohy
• Extra malé rozvržení
• Malá zařízení
• Střední zařízení
• Velká zařízení
• Extra velká zařízení
• Další příklady mřížky