Lekce 11 - Grid systém Bootstrapu
V minulé lekci, Úvod do Bootstrapu, jsme si uvedli framework Bootstrap a ukázali jeho základní principy.
V kurzu jsme si již uvedli tzv. Flexbox Grid systém. V tomto tutoriálu responzivního webdesignu se podíváme na grid systém od Bootstrapu. Konceptuálně jsou si přístupy velmi podobné. Oba staví na flexboxu a dělení řádku do 12 sloupců. V praxi se liší hlavně v detailech syntaxe, dostupných utility třídách a v tom, že Bootstrap grid je součástí širšího frameworku.
Přidání Bootstrapu do HTML
Jak už víme, Bootstrap je ve své podstatě jen velký soubor mnoha CSS a JS kódu. Ten můžeme do našeho HTML kódu zavést dvěma způsoby. Buď si můžeme celý framework stáhnout a naimportovat nebo jednoduše použít odkaz na cloudové úložiště Bootstrapu. Na oficiální stránce zkopírujeme link na CSS, který vložíme do hlavičky našeho HTML souboru:
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Bootstrap</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous"> </head>
Pro účely a jednoduchost budeme používat právě import přes CDN. Pokud ale budeme pracovat na větším projektu, určitě bychom měli Bootstrap stáhnout a nahrát ho na vlastní server. Je sice nepravděpodobné, že cloudové úložiště nebude fungovat. CDN je pohodlné pro jednoduchost a dostupnost. Nelze se ale spoléhat na to, že uživatel bude mít knihovnu z jiné stránky automaticky v cache. Ve větších projektech se často používá lokální balíčkování (build) kvůli kontrole verze a načítání. Nyní se už ale vrhneme na Grid systém Bootstrapu.
Responzivní třídy
Bootstrap grid systém funguje na stejném principu jako Flexbox Grid.
Většina názvosloví zůstala stejná. Máme tady třídu .row,
která nám definuje řádek. Do něj vkládáme sloupce (.col*) a
jejich šířky se typicky vyjadřují v jednotkách 1–12 (tj. 12 dílů na
řádek). Pokud se kombinace šířek nevejde, sloupce se zalomí na další
řádek. Pokud nyní náhodou nevíte, o čem je řeč, odkáži vás na minulou
lekci Úvod do
grid systémů.
Stejně jako u Flexbox Grid jsou i u Bootstrapu stejně
nazvané třídy .col. Syntaxe je col-X-Y, kde:
Xje buď vynechané (výchozí chování pro nejmenší šířky), nebo má hodnotusm,md,lg,xlaxxl. Tímto udáváme, od jaké velikosti zařízení začíná styl platit.Ynabývá hodnot1až12a udává, kolik sloupců bude element zabírat. V rámci jednoho řádku je vhodné, aby součet šířek sloupců nepřesáhl 12. Pokud součet přesáhne 12, sloupce se zalomí na další řádek.
Definujme nyní třídy od sm výše. Cokoli menšího (tj.
xs) bude mít výchozí chování. Sloupce zaberou celou šířku
řádku (12/12) a poskládají se pod sebe:
<div class="row"> <div class="col-sm-3 border bg-success text-white"> Čtvrtina </div> <div class="col-sm-3 border bg-success text-white"> Čtvrtina </div> <div class="col-sm-6 border bg-warning"> Polovina </div> </div>
Z hlediska grid systému nás zajímají vždy jen třídy
.row a .col, ty další jsou přidány pro
přehlednost ukázky (bootstrap třídy).
Výsledek:
Můžeme vidět 2 sloupce, které mají 3/12, tedy 1/4. Další má 6/12 - tedy 1/2 - dohromady součet všeho dá celek (12).
Můžete si zkusit zmenšit okno prohlížeče a podívat se na ukázku
výše. Elementy se zalomí a naskládají pod sebe. Náš obsah stránky je
tedy rozdělený do "tabulky" a zároveň je responzivní! 
Tříd můžeme přiřadit k jednomu sloupci více a tak mu "naprogramovat" jak má být široký na různých zařízeních. Můžete přidat jakoukoli responzivní třídu k jakémukoli sloupci.
Ukážeme si tedy ještě jeden příklad. Nakombinujeme více tříd u jednotlivých sloupců tak, aby se na různých zařízeních chovaly různým způsobem:
<div class="row"> <div class="col-4 col-md-6 border bg-success text-white">Sloupec 1</div> <div class="col-8 col-md-6 border bg-success text-white">Sloupec 2</div> </div>
Výsledek:
Chování si můžeme ověřit zmenšováním okna prohlížeče. Od středně velkých zařízení zabírají oba sloupce polovinu kontejneru. Na menších zařízeních zabírá první sloupec 1/3 a druhý 2/3 kontejneru.
Co bychom měli vědět
Elementy sloupců mají kolem sebe padding, tomu se v kontextu
Bootstrap grid systému říká gutter. Guttery lze v
Bootstrapu 5 řídit utility třídami .g-*, případně zvlášť
.gx-* (vodorovně) a .gy-* (svisle). Pokud je chceme
odstranit úplně, použijte na .row třídu .g-0.
Sloupcům v gridu není vhodné přidávat "nahodilé" horizontální
margin-left či margin-right, protože tím můžeme
rozbít šířku řádku a sloupce se začnou zalamovat neočekávaně. Pokud
potřebujeme rozestupy, preferujeme gutter utility. Nic nám ovšem nebrání
vložit do sloupce další element a margin nastavit až tomuto elementu. Aby
grid systém fungoval, musí být vždy všechny přímé podelementy řádků
sloupce. Sloupce mohou obsahovat opět řádky, gridy tedy můžeme vkládat do
sebe. U některých formulářových prvků můžete narazit na specifické
chování prohlížeče. Pokud flex layout nefunguje podle očekávání, často
pomůže obalit obsah do vnořeného prvku a flex aplikovat na něj.
Guttery jsou implementované pomocí padding po
obou stranách každého sloupce a záporných okrajů (margin) na
.row. Díky tomu mají sloupce mezery mezi sebou, ale ty krajní
mezeru mezi sebou a okolím kontejneru nevytvoří.
Automatická šířka
Pokud nějakému sloupci nastavíme šířku pomocí třídy ve tvaru
.col-{breakpoint}-auto, jeho šířka se nastaví tak, aby se do
sloupce vešel jeho obsah, a zbytek šířky bude rozdělen mezi zbývající
sloupce podle pravidel definovaných v gridu. S automatickou šířkou souvisí
i využití zbytku kontejneru. Pokud se v gridu nalézá mix sloupců se
specifikovanou šířkou a sloupců označených jen třídou .col,
vyplní sloupec s .col zbylé místo.
Obojí si vyzkoušejme:
<div class="container-fluid"> <div class="row"> <div class="col border bg-success text-white"> Sloupec 1 </div> <div class="col-sm-auto border bg-warning"> Sloupec 2 </div> <div class="col col-sm-4 border bg-success text-white"> Sloupec 3 </div> </div> </div>
Živá ukázka:
Kód výše zobrazí kontejner se třemi sloupci. Ten první bude zabírat vždy všechno zbylé místo, tedy co nejvíce. Ten druhý zabere co nejméně místa, jen aby se do něj vešel jeho obsah. A ten třetí zabere 4/12 šířky kontejneru. Po zmenšení na viewport pod malá zařízení se všechny sloupce seřadí pod sebe.
Automatická šířka sloupců je spíše technologická vychytávka než styl, který budete často používat. Právě šířka stanovená nikoli na základě obsahu elementu, ale na zadaném počtu sloupců, tvoří přidanou hodnotu gridu.
Vynucení zalomení řádku
Pokud bychom z nějakého důvodu potřebovali zalomit řádek dříve, než
jej ve skutečnosti ukončíme, můžeme za tímto účelem do gridu vložit
sloupec s třídou .w-100:
<div class="container-fluid"> <div class="row"> <div class="col-sm border bg-success text-white"> Sloupec 1 </div> <div class="col-sm border bg-success text-white"> Sloupec 2 </div> <div class="w-100"></div> <div class="col-sm border bg-success text-white"> Sloupec 3 </div> </div> </div>
Výsledek:
Všimněte si, že můžeme použít i třídu .col-sm, tedy
přidat responzivní breakpoint, aniž bychom specifikovali kolik sloupců gridu
má sloupec zabírat. K zalomení řádku dojde také ve chvíli, když by
součet šířek jeho sloupců přesáhl 12 sloupců (např. .col-4
a .col-9).
Zarovnání a změna pořadí
Pokud potřebujeme sloupce v gridu nějak zarovnat, existuje na to několik
předpřipravených stylů. Elementům se třídou .row (flex
kontejner) přiřadíme třídy jako .align-items-* a
.justify-content-*. Jednotlivým sloupcům (flex items) pak
můžeme přiřadit .align-self-*, pokud potřebujeme výjimku pro
konkrétní sloupec. Stejně tak můžeme měnit skutečné pořadí sloupců v
řádku bez ohledu na jejich pořadí v kódu, stačí jim přiřadit jednu z
tříd .order-1 až .order-5 a dále
.order-first nebo .order-last:
<div class="container-fluid"> <div class="row justify-content-center bg-light" style="height: 150px;"> <div class="col-auto border bg-success text-white order-2 align-self-start"> Druhý </div> <div class="col-auto border bg-success text-white order-1 align-self-center"> První </div> <div class="col-auto border bg-success text-white align-self-end order-3"> Třetí </div> </div> </div>
A živá ukázka:
Offsety
Občas nějaký sloupec nevyužijeme a chceme místo něj ponechat volné
místo. Abychom se vyhnuli jeho zbytečné deklaraci v kódu, nemusíme
prázdný sloupec vkládat vůbec a následující sloupec a kus posunout. Máme
k tomu k dispozici třídy ve formátu .offset-{číslo},
případně .offset-{breakpoint}-číslo, přičemž číslo
určuje počet sloupců (z 12), o které se má daný sloupec posunout
doprava.
<div class="container-fluid"> <div class="row"> <div class="col-md-3 bg-success text-white"> Sloupec 1 </div> <div class="col-md-4 offset-md-4 bg-success text-white"> Sloupec 2 </div> </div> </div>
Ukázka:
Pokud bychom chtěli nastavit, aby se offset od nějakého
breakpointu aplikoval a od nějakého zase ne, vypnuli bychom u druhého
rozměru pomocí třídy .offset-{breakpoint}-0.
Automatický margin
Tato vlastnost má spíše minimální využití, nicméně i přesto by se
někdy mohla hodit. Pokud sloupci nastavíme třídu .ms-auto nebo
.me-auto, posune se zbytek sloupců nalevo nebo napravo:
<div class="container-fluid"> <div class="row"> <div class="col-md-4 border bg-success text-white"> Sloupec 1 </div> <div class="col-md-2 border bg-success text-white"> Sloupec 2 </div> <div class="col-md-2 border bg-success text-white ms-auto"> Sloupec 3 </div> </div> </div>
Ukázka v prohlížeči:
Tak to by bylo z grid systému od Bootstrapu vše. Od Flexbox gridu se tedy liší trochu jinou syntaxí a specifičtějším využitím. Nabízí se otázka, který z těchto dvou "frameworků" používat. Vzhledem k povaze obou frameworků (jeden je svým způsobem osekaná verze toho druhého), tak odpověď je poměrně jednoznačná. Pokud pracujeme na projektu, kde využijeme i zbytek Bootstrapu (tedy veškeré styly pro různé HTML elementy), pak je na místě použít logicky celý Bootstrap framework. Nicméně pokud do projektu potřebujeme zakomponovat pouze responzivní zarovnávání (grid systém) a CSS již ve zbytku máme své, tak je lepší volba spíše Flexbox Grid.
V další lekci, Responzivní tabulky, si ukážeme různé způsoby responzivních tabulek.
Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 4x (9.49 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS
