11. diel - Grid systém Bootstrapu
V minulej lekcii, Úvod do Bootstrapu, sme si predstavili framework Bootstrap a ukázali si jeho základné princípy.
V kurze sme si už predstavili tzv. Flexbox Grid systém. Dnes sa pozrieme na grid systém od Bootstrapu, z ktorého Flexbox Grid vychádza. Tieto systémy sa od seba nepatrne odlišujú, a to najmä v rôznom pozíciovaní a syntaxi.
Pridanie Bootstrapu do HTML
Ako už vieme, Bootstrap je vo svojej podstate iba veľký súbor mnohých CSS a JS kódu. Ten môžeme do nášho HTML kódu zaviesť dvoma spôsobmi. Buď si môžeme celý framework stiahnuť a naimportovať alebo jednoducho použiť odkaz na cloudové úložisko Bootstrapu. Na oficiálnej stránke skopírujeme link na CSS, ktorý vložíme do nášho 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 vyššie vložíme do HTML hlavičky. Malo by to vyzerať nejako 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>
Na naše účely a pre jednoduchosť budeme používať práve import cez CDN. Ak ale budeme pracovať na väčšom projekte, určite by sme mali Bootstrap stiahnuť a nahrať ho na vlastný server. Je nepravdepodobné, že cloudové úložisko nebude fungovať. Cloudové úložisko môže tiež zvyšovať rýchlosť načítania stránky. Používateľ mohol byť totiž v minulosti už na stránke používajúcej tieto knižnice (odkaz) a tým pádom prehliadač rozpozná, že už má tieto knižnice v cache a nebude ich znova sťahovať. Teraz sa už ale vrhnime na grid systém Bootstrapu.
Responzívne triedy
Bootstrap grid systém funguje na rovnakom princípe ako Flexbox Grid.
Väčšina názvoslovia zostala rovnaká. Máme tu triedu .row,
ktorá nám definuje riadok, do ktorého môžeme vkladať až 12 stĺpčekov.
Ak teraz náhodou neviete o čom je reč, odkážem vás na lekciu Úvod do grid
systémov.
Rovnako ako pri Flexbox Grid sú aj v Bootstrape rovnako
nazvané triedy .col. Syntax je col-X-Y kde:
Xmôže nadobúdať hodnoty od najmenšiehosm(telefóny),md,lgažxl. Týmto udávame, od akej veľkosti zariadenia začína štýl platiť.Ynadobúda hodnoty1až12a udáva, koľko stĺpcov bude element zaberať. Všetky elementy v jednom riadku nemôžu zaberať dohromady viac ako 12 stĺpcov.
Definujme teraz triedy od stredne veľkých zariadení. Čokoľvek menšie bude mať vždy šírku 12 stĺpcov, čo je predvolená šírka. Na malých zariadeniach sa teda stĺpce poskladajú pod seba:
<div class="row"> <div class="col-sm-3 border bg-success text-white"> Quarter </div> <div class="col-sm-3 border bg-success text-white"> Quarter </div> <div class="col-sm-6 border bg-warning"> Half </div> </div>
Z hľadiska grid systému nás zaujímajú vždy len triedy
.row a .col, tie ďalšie Bootstrap triedy sú
pridané pre prehľadnosť ukážky.
Výsledok:
Môžeme vidieť 2 stĺpce, ktoré majú 3/12, teda 1/4. Ďalší má 6/12 - teda 1/2 - súčet všetkého dohromady dá jeden celok (12).
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ívny! 
Tried môžeme priradiť k jednému stĺpcu viacero a tak mu „naprogramovať“, aký má byť široký na rôznych zariadeniach. Môžete pridať akúkoľvek responzívnu triedu k akémukoľvek stĺpcu.
Ukážeme si teda ešte jeden príklad. Nakombinujeme viacero tried pri jednotlivých stĺpcoch tak, aby sa na rôznych zariadeniach správali rôznym spôsobom:
<div class="row"> <div class="col-4 col-md-6 border bg-success text-white">Column 1</div> <div class="col-8 col-md-6 border bg-success text-white">Column 2</div> </div>
Výsledok:
Správanie si môžeme overiť zmenšovaním okna prehliadača. Od stredne veľkých zariadení zaberajú oba stĺpce polovicu kontajnera. Na menších zariadeniach zaberá prvý stĺpec 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 s triedou
.row. Stĺpcom v gride nesmieme pridávať margin,
pretože by elementy s ním boli dohromady širšie ako kontajner a zalomili by
sa. Nič nám však nebráni vložiť do stĺpca ďalší element a
margin nastaviť až tomuto elementu.
Aby grid systém fungoval, všetky priame podelementy riadkov musia byť
vždy stĺpce. Stĺpce môžu obsahovať opäť riadky, gridy teda môžeme
vkladať do seba. Niektoré HTML elementy nemožno zatiaľ použiť ako flex
kontajnery, 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.
Guttery sú implementované pomocou vlastnosti
padding po oboch stranách každého stĺpca a vlastnosti
margin (záporný) na kontajneri. Vďaka tomu majú stĺpce medzery
medzi sebou, ale tie krajné medzeru medzi sebou a okolím kontajnera
nevytvoria.
Automatická šírka
Ak nejakému stĺpcu 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 so
š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"> Column 1 </div> <div class="col-sm-auto border bg-warning"> Column 2 </div> <div class="col col-sm-4 border bg-success text-white"> Column 3 </div> </div> </div>
Živá ukážka:
Kód vyššie zobrazí kontajner s tromi stĺpcami. Ten prvý bude zaberať vždy všetko zvyšné miesto, teda čo najviac. Ten druhý zaberie čo najmenej miesta, len aby sa doňho vošiel jeho obsah. A ten tretí zaberie 4/12 šírky kontajnera. Po zmenšení 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 zalomenia riadku
Ak by sme z nejakého dôvodu potrebovali zalomiť riadok skôr, ako 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"> Column 1 </div> <div class="col-sm border bg-success text-white"> Column 2 </div> <div class="w-100"></div> <div class="col-sm border bg-success text-white"> Column 3 </div> </div> </div>
Výsledok:
Všimnite si, že môžeme použiť aj triedu .col-sm, teda
pridať responzívny breakpoint bez toho, aby sme špecifikovali, koľko
stĺpcov gridu má stĺpec zaberať. K zalomeniu riadku príde 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 potrebujeme stĺpce v gride nejako zarovnať, existuje na to niekoľko
predpripravených štýlov. Elementom s triedou .row priradíme
triedy ako .align-items-center,
.justify-content-center alebo .align-self-end. 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úcu na
.order-X, kde X nadobúda hodnoty 1 -
12. 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"> Second </div> <div class="col-auto border bg-success text-white order-1 align-self-center"> First </div> <div class="col-auto border bg-success text-white align-self-end order-3"> Third </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čnej deklarácii v kóde, nemusíme prázdny
stĺpec vkladať vôbec a nasledujúci stĺpec o kúsok posunúť. Máme k tomu
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 ktoré sa má daný stĺpec posunúť doprava:
<div class="container-fluid"> <div class="row"> <div class="col-md-3 bg-success text-white"> Column 1 </div> <div class="col-md-4 offset-md-4 bg-success text-white"> Column 2 </div> </div> </div>
Ukážka:
Ak by sme chceli nastaviť, aby sa offset od nejakého
breakpointu aplikoval a od nejakého zase nie, vypli by sme pri druhom rozmere
pomocou triedy .offset-{breakpoint}-0.
Automatický margin
Táto vlastnosť má skôr minimálne využitie, ale napriek tomu by sa
niekedy mohla hodiť. Ak stĺpcu nastavíme triedu .ml-auto alebo
.mr-auto, posunie sa zvyšok stĺpcov naľavo alebo napravo:
<div class="container-fluid"> <div class="row"> <div class="col-md-4 border bg-success text-white"> Column 1 </div> <div class="col-md-2 border bg-success text-white"> Column 2 </div> <div class="col-md-2 border bg-success text-white ml-auto"> Column 3 </div> </div> </div>
Ukážka v prehliadači:
To by bolo z grid systému od Bootstrapu všetko. Od Flexbox Gridu sa teda líši trochu inou syntaxou a špecifickejším využitím. Ponúka sa otázka, ktorý z týchto dvoch "frameworkov" používať. Vzhľadom k povahe oboch frameworkov (jeden je svojím spôsobom osekaná verzia toho druhého), je odpoveď pomerne jednoznačná.
Ak pracujeme na projekte, kde využijeme aj zvyšok Bootstrapu (teda všetky štýly pre rôzne HTML elementy), potom je na mieste použiť celý Bootstrap framework. Avšak ak do projektu potrebujeme zakomponovať iba responzívne zarovnávanie (grid systém) a na zvyšok nám bude postačovať CSS, tak je lepšou voľbou skôr Flexbox Grid.
V ďalšej lekcii, Responzívne tabuľky, si ukážeme rôzne spôsoby implementácie responzívnych tabuliek.
