Lekce 6 - Bootstrap - Grid systém Bootstrapu
V minulé lekci, Bootstrap - Úvod do grid systémů, jsme si představili grid systémy.
V dnešním tutoriálu CSS frameworku Bootstrap budeme pokračovat s gridy Bootstrapu. Jako vždy si na praktických ukázkách vyzkoušíme, co vše s nimi můžeme dělat.
Responzivní třídy
Hlavní výhodou gridu je, že se nejen zalomí v případě, že se na
stránku nevejde, ale také si můžeme nastavit, kdy se má
zalomit. Kromě tříd ve tvaru col-{číslo}
můžeme
přiřazovat i responzivní třídy jako například .col-sm-3
,
což konkrétně znamená, že od malých zařízení a větších bude sloupec
zabírat 3/12 gridu.
Pro příklad nyní použijme třídy se specifikovaným breakpointem a sloupce definujme pouze od středně velkých viewportů dále. 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:
<div class="container-fluid bg-light"> <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> </div>
Výsledek:
Můžeme 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ůžeme přidat jakoukoli responzivní třídu k jakémukoli sloupci. Jak jsou která zařízení velká a jaké mají breakpointy zkratky jsme si definovali v lekci Bootstrap - Typografie. Pro úplnost si zmiňme, že breakpointy jdou po sobě takto:
sm
,md
,lg
,xl
,xxl
.
Ukažme si ještě jeden příklad, a to když 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. Chování si můžeme ověřit zmenšováním okna prohlížeče:
<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:
Od středně velkých zařízení zabírají oba sloupce polovinu kontejneru.
Na menších zařízeních zabírá první <div>
1/3 a druhý
2/3 kontejneru.
Odsazení
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 .g-0
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ů, zejména pro zastaralý prohlížeč Internet Explorer. Některé se ovšem týkají i moderních prohlížečů. Seznam nahlášených chyb můžeme například nalézt v repozitáři Flexbugs.
Guttery jsou implementované pomocí paddingu po obou stranách každého sloupce a negativních elementů margin na kontejneru. Díky tomu mají sloupce mezery mezi sebou, ale krajní mezeru mezi sebou a okolím kontejneru nevytvoří.
Dále máme třídy .g-
, .gx-
a .gy-
,
které nám poskytují vylepšenou kontrolu nad mezerami mezi sloupci a řádky
v grid systému. Třída .g-
nastavuje stejné mezery jak mezi
sloupci (horizontální), tak mezi řádky (vertikální). Hodnota, kterou
zapíšeme za pomlčku určuje velikost mezery a může být v rozmezí od
0
(bez mezery) do 5
(největší mezera).
Třídy .gx-
a .gy-
jsou specifičtější -
.gx-
se vztahuje pouze na horizontální mezery (mezi sloupci),
zatímco .gy-
určuje pouze vertikální mezery (mezi řádky).
Tímto způsobem mohou designéři jemně upravit rozestupy mezi prvky gridu, a
to buď uniformně pomocí .g-
, nebo selektivně pro horizontální
či vertikální rozestupy.
Ukažme si to na příkladu:
<div class="container-fluid"> <!-- Příklad s globální mezerou --> <div class="row g-3"> <div class="col-4"> <div class="border bg-success text-white">Sloupec 1</div> </div> <div class="col-4"> <div class="border bg-warning text-white">Sloupec 2</div> </div> <div class="col-4"> <div class="border bg-success text-white">Sloupec 3</div> </div> </div> <!-- Příklad s horizontální mezerou --> <div class="row gx-5 my-4"> <div class="col-4"> <div class="border bg-success text-white">Sloupec 1</div> </div> <div class="col-4"> <div class="border bg-warning text-white">Sloupec 2</div> </div> <div class="col-4"> <div class="border bg-success text-white">Sloupec 3</div> </div> </div> <!-- Příklad s vertikální mezerou --> <div class="row gy-5"> <div class="col-4"> <div class="border bg-success text-white">Sloupec 1</div> </div> <div class="col-4"> <div class="border bg-warning text-white">Sloupec 2</div> </div> <div class="col-4"> <div class="border bg-success text-white">Sloupec 3</div> </div> </div> </div>
V tomto příkladu třída .g-3
nastavuje mezeru 3
jak mezi sloupci, tak mezi řádky, .gx-5
nastavuje horizontální
mezery mezi sloupci na velikost 5
, .my-4
je utility
třída pro vertikální margin (y osa), která přidává mezery nad a pod
řádkem a .gy-5
nastavuje vertikální mezery mezi řádky na
velikost 5
.
Výsledek v prohlížeči:
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
, který se používá k nastavení
šířky elementu na 100 % rodičovského elementu:
<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ěme 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
).
Bootstrap nám poskytuje mimo .w-100
ještě další třídy pro
šířku jako .w-25
, .w-50
a .w-75
pro
nastavení šířky elementu na 25 %, 50 % a 75 % rodičovského elementu.
Zarovnání a změna pořadí
Pokud bychom potřebovali sloupce v gridu nějak zarovnat, což by se
teoreticky stávat příliš nemělo, platí pro sloupce kontejneru to samé
jako si řekneme v lekcích Flex utilities a Flex utilities
podruhé. Elementům se třídou .row
tedy přiřazujeme
třídy jako .align-items-center
,
.justify-content-center
nebo .align-self-end
a
podobně.
Nově zavedené třídy v Bootstrap 5, jako jsou
.align-items-xxl-
, .justify-content-xxl-
nabízí
větší kontrolu nad zarovnáním a rozložením prvků na extra extra velkých
obrazovkách.
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-{číslo}
, kde číslo nabývá hodnot 1
-
12
. To vše budeme používat i z výše zmíněné lekce na flex
utilities. Pro kompletnost těchto materiálů si 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é marginy
Ve zmíněných lekcích Flex utilities a Flex utilities
podruhé se podíváme i na hack s automatickými marginy. Pokud některému
sloupci nastavíme třídu .ms-auto
nebo .me-auto
,
posune se zbytek sloupců nalevo, resp. 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 následujícím cvičení, Řešené úlohy k 1.-6. lekci Bootstrap CSS frameworku, si procvičíme nabyté zkušenosti z předchozích lekcí.