6. diel - Bootstrap - Grid systém Bootstrap
V minulej lekcii, Bootstrap - Úvod do grid systémov , sme si predstavili grid systémy. V dnešnom, poslednom tutoriálu kurze CSS frameworku Bootstrap, prejdeme ku gridům Bootstrap. Ako vždy si na praktických ukážkach vyskúšame čo všetko s nimi môžeme robiť.
Responzívne triedy
To krásne na gride je, že sa nielen zalomia v prípade, že sa na stránku
nezmestí, ale že si môžeme nastaviť kedy sa má zalomiť. Okrem tried v
tvare col-{číslo}
môžeme priraďovať aj responzívne triedy
ako napr. .col-sm-3
, čo konkrétne znamená, že od malých
zariadení a väčších bude stĺpec zaberať 3/12 gridu.
Namiesto príkladu z konca minulej lekcie teraz použime triedy so špecifikovaným Breakpoint a stĺpce definujme iba od stredne veľkých Viewport ďalej. Čokoľvek menšieho bude mať vždy šírku 12 stĺpcov, čo je predvolená šírka. Na malých zariadeniach sa teda stĺpca poskladajú pod seba.
<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ýsledok:
Môžete si skúsiť zmenšiť okno prehliadača a pozrieť sa na ukážku vyššie. Elementy sa zalomia a naskladajú pod seba. Náš obsah stránky je teda rozdelený do "tabuľky" a zároveň je responzívne!
Tried môžeme priradiť k jednému stĺpci viac a tak mu "naprogramovať" ako má byť široký na rôznych zariadeniach. Môžete pridať akúkoľvek responzívne triedu k akémukoľvek stĺpci. Ako sú ktoré zariadenia veľké a aké majú hraničnými skratky sme si definovali v lekcii Bootstrap - Typografia. Pre úplnosť si spomeňme, že hraničnými idú po sebe ako:
sm
md
lg
xl
Ukážme si ešte jeden príklad a to keď nakombinujete viac tried pri jednotlivých stĺpcov tak, aby sa na rôznych zariadeniach správali rôznym spôsobom. Správanie si môžete overiť zmenšovaním okna prehliadača.
<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ýsledok:
Od stredne veľkých zariadení zaberajú oba stĺpce polovicu kontajnera. Na
menších zariadeniach zaberá prvý <div>
1/3 a druhý 2/3
kontajnera.
Čo by sme mali vedieť
Elementy stĺpcov majú okolo seba padding, tomu sa v kontexte Bootstrap grid
systému hovorí Gutter. Môžeme ho prípadne odstrániť a to
pridaním triedy .no-gutters
elementu sa triedou .row
.
Stĺpcom v gride nesmieme pridávať margin, pretože by elementy s ním boli
dohromady širší ako kontajner a zalomil by sa. Nič nám však nebráni
vložiť do stĺpca ďalšej element a margin nastaviť až tomuto elementu. Aby
grid systém fungoval, musí byť vždy všetky priame podelementy riadkov
stĺpca. Stĺpce môžu obsahovať opäť riadky, gridy teda môžeme vkladať
do seba. Niektoré HTML elementy nemožno ako flex kontajnery zatiaľ použiť,
to sú napr. <button>
alebo <fieldset>
. K
flexboxu bolo nahlásených niekoľko bugov, asi tušíte, že najmä pre
zastaraný prehliadač Internet Explorer. Niektoré sa však týkajú aj
moderných prehliadačov. Zoznam reportovaných chýb nájdete tu.
Gutter sú implementované pomocou padding
u po
oboch stranách každého stĺpca a negatívnych margin
ov na
kontajnera. Vďaka tomu majú stĺpca medzery medzi sebou, ale tie krajné
medzeru medzi sebou a okolím kontajnera nevytvorí.
Automatická šírka
Ak nejakému stĺpci nastavíme šírku pomocou triedy v tvare
.col-{breakpoint}-auto
, jeho šírka sa nastaví tak, aby sa do
stĺpca vošiel jeho obsah, a zvyšok šírky bude rozdelený medzi
zostávajúce stĺpce podľa pravidiel definovaných v gride. S automatickou
šírkou súvisí aj využitie zvyšku kontajnera. Ak sa v gride nachádza mix
stĺpcov sa špecifikovanou šírkou a stĺpcov označených len triedou
.col
, vyplní stĺpec s .col
zvyšné miesto.
Oboje si vyskúšajme:
<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ážka:
Kód vyššie zobrazí kontajner s tromi stĺpci. Ten prvý bude zaberať vždy všetko zvyšné miesto, teda čo najviac. Ten druhý zaberie čo najmenej miesta, len aby sa do neho vošiel jeho obsah. A ten tretí zaberie 4/12 šírky kontajnera. Po zmenšenie na viewport pod malé zariadenia sa všetky stĺpce zoradia pod seba.
Automatická šírka stĺpcov je skôr technologická vychytávka než štýl, ktorý budete často používať. Práve šírka stanovená nie na základe obsahu elementu, ale na zadanom počte stĺpcov, tvorí pridanú hodnotu gridu.
Vynútenie zalomenie riadku
Ak by sme z nejakého dôvodu potrebovali zalomiť riadok skôr, než ho v
skutočnosti ukončíme, môžeme na tento účel do gridu vložiť stĺpec s
triedou .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ýsledok:
Všimnite si, že môžeme použiť aj triedu .col-sm
, teda
pridať responzívne breakpoint, bez toho aby sme špecifikovali koľko stĺpcov
gridu má stĺpec zaberať. K zalomenie riadku dôjde aj vo chvíli, keď by
súčet šírok jeho stĺpcov presiahol 12 stĺpcov (napr. .col-4
a
.col-9
).
Zarovnanie a zmena poradia
Ak by ste potrebovali stĺpca v gride nejako zarovnať, čo by sa teoreticky
stávať príliš nemalo, platí pre stĺpce kontajnera to isté ako sme si
hovorili v detailných
lekciách o Flex utilities. Elementom sa triedou .row
teda
priraďujeme triedy ako .align-items-center
,
.justify-content-center
alebo .align-self-end
a
podobne. Rovnako tak môžeme meniť skutočné poradie stĺpcov v riadku bez
ohľadu na ich poradie v kóde, stačí im priradiť jednu z tried začínajúce
na .order-{číslo}
, kde číslo nadobúda hodnoty 1
-
12
. To všetko by sme už mali poznať z flex utilities. Pre
kompletnosť týchto materiálov si uveďme jeden príklad za všetky:
<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ážka:
Offsety
Občas nejaký stĺpec nevyužijeme a chceme namiesto neho ponechať voľné
miesto. Aby sme sa vyhli jeho zbytočné deklaráciu v kóde, nemusíme prázdny
stĺpec vkladať vôbec a nasledujúce stĺpec a kus posunúť. Máme na to k
dispozícii triedy vo formáte .offset-{číslo}
, prípadne
.offset-{breakpoint}-číslo
, pričom číslo určuje počet
stĺpcov (z 12), o ktorej sa má daný stĺpec posunúť 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ážka:
Ak by sme chceli nastaviť, aby sa offset od nejakého
Breakpoint aplikoval a od nejakého zase nie, vypli by sme u druhého rozmeru
pomocou triedy .offset-{breakpoint}-0
.
Automatické marginy
Z flex utilities by sme mali poznať aj hack s automatickými marginy. Ak
niektorému stĺpci nastavíme triedu .ml-auto
alebo
.mr-auto
, posunie sa zvyšok stĺpcov naľavo, 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 ml-auto"> Sloupec 3 </div> </div> </div>
ukážka:
V budúcej lekcii, Riešené úlohy k 1.-6. lekciu Bootstrap CSS frameworku , sa pozrieme ako sa v Bootstrap štýlom tabuľky,
V nasledujúcom cvičení, Riešené úlohy k 1.-6. lekciu Bootstrap CSS frameworku, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.