Lekce 11 - Grid systém Bootstrapu
V minulé lekci, Úvod do Bootstrapu, jsme si uvedli framework Bootstrap a ukázali jeho základní principy.
Pár lekcí zpátky, jsme si uvedli tzv. Flexbox Grid systém. Dnes se podíváme na Grid systém od Bootstrapu, ze kterého Flexbox Grid vychází. Oba systémy od sebe mají nepatrné odlišnosti, zejména pak v různém pozicování a syntaxi.
Přidání Bootstrapu do HTML
Jak už víme, Bootstrap je ve své podstatě jen velký soubor mnoha CSS & 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 našeho HTML:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
Kód výše vložíme do HTML hlavičky. Mělo by to vypadat nějak takto:
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Bootstrap</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" 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. Cloudové úložiště může také zvyšovat rychlost načítání stránky. Uživatel mohl být totiž v minulosti již na stránce používající tyto knihovny (odkaz) a tím pádem prohlížeč rozpozná, že už tyto knihovny má v cache a nebude je znovu stahovat. 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 řádku, do které můžeme vkládat až 12 sloupečků.
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 Flex-box Grid jsou i u Bootstrapu stejně
nazvané třídy .col. Syntaxe je col-X-Y kde:
Xmůže nabývat hodnot od nejmenšíhosm(telefony),md,lgažxl. 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šechny elementy v jednom řádku nemohou zabírat dohromady více než 12 sloupců.
Definujme nyní třídy od středně velkých zařízení. Cokoli menšího bude mít vždy šířku 12 sloupců, což je výchozí šířka. Na malých zařízeních se tedy sloupce poskládají pod sebe.
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).
<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>
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. Můžeme jej
případně odstranit a to přidáním třídy .no-gutters elementu
se třídou .row. Sloupcům v gridu nesmíme přidávat margin,
protože by elementy s ním byly dohromady širší než kontejner a zalomily by
se. 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. Některé HTML elementy nelze
jako flex kontejnery zatím použít, to jsou např. <button>
nebo <fieldset>. K flexboxu bylo nahlášeno několik bugů,
asi tušíte, že zejména pro zastaralý prohlížeč Internet Explorer.
Některé se ovšem týkají i moderních prohlížečů. Seznam reportovaných
chyb naleznete zde.
Guttery jsou implementované pomocí
vlastnosti padding po obou stranách každého sloupce a
vlastnosti margin (záporný) na kontejneru. 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
přiřadíme třídy jako .align-items-center,
.justify-content-center nebo .align-self-end. 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 začínající na
.order-X, kde X nabývá hodnot 1 -
12. Uveďme jeden příklad za všechny:
<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 .ml-auto nebo
.mr-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 ml-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 Flex-box 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.
