5. diel - Bootstrap - Úvod do grid systémov

V predchádzajúcom kvíze, Kvíz - Reboot, typografia a obrázky v Bootstrap, sme si overili nadobudnuté skúsenosti z predchádzajúcich lekcií.

V dnešnom tutoriále Bootstrapu sme sa dostali až ku grid systému. Dnešné lekcie a lekcie Grid systém Bootstrapu patrí medzi tie najprínosnejšie z celého kurzu, naučíme sa používať veľmi jednoduchý a účinný nástroj. Grid systém Bootstrapu je od verzie 4 postavený na flexboxe, jeho staršie verzie používali CSS vlastnosť float. Bootstrap 5 potom priniesol niektoré nové funkcie a vylepšenia vo vzťahu ku grid systému, ako je napríklad podpora pre CSS grid layout, čo umožňuje vytvárať ešte flexibilnejšie a pokročilejšie layouty.

Úvod do grid systémov v Bootstrape

Na začiatok by sa pristalo problematiku gridov načrtnúť, začnime pekne od začiatku. Rozdelenie obsahu do pravidelnej mriežky sa netýka len webov, ale tento princíp je používaný v podstate už od stredoveku a to nielen pre text, ale aj pre ilustrácie. Nájdeme ho v novinách a časopisoch. Možno viete, že logá väčšiny firiem sú tiež vytvorené na základe pravidelných tvarov, ktoré k sebe lícujú. Okrem toho, že mriežka plní estetickú funkciu, je pre ľudí takto zarovnaná informácia oveľa lepšie spracovateľná. Pozrime sa na layout populárnej Bootstrap šablóny Gentlella pre administráciu webu:

Šablóna Gentlella pre Bootstrap - Kompletný kurz CSS frameworku Bootstrap

Vidíme, že layout je rozdelený do šiestich pomyselných stĺpcov. Všetky kontajnery na stránke majú potom veľkosť len a iba v násobkoch veľkosti týchto stĺpcov. Celý web pôsobí veľmi celistvým dojmom.

Ak budeme prvky pozíciovať na stránku ako nás napadne, môžeme dopadnúť ako legendárne stránky Penziónu na Hrubých lúkach, dnes už našťastie nahradené inou verziou:

Stránky penziónu na Hrubých lúkach - Kompletný kurz CSS frameworku Bootstrap

Tabuľky

V dobách už dávno minulých sa na tvorbu layoutov internetových stránok používali tabuľky. Ich výhodou bolo, že obsah webu bol opticky zarovnaný do tabuľky, takže rozloženie pôsobilo pravidelne a vyvážene. Takáto tabuľková kostra zastaraného webu by mohla vyzerať napr. takto:

<table>
    <tr>
        <td colspan="2"><h1>Header</h1></td>
    </tr>
    <tr>
        <td><h2>Menu</h2></td>
        <td>Content...</td>
    </tr>
    <tr>
        <td colspan="2"><small>Footer</small></td>
    </tr>
</table>

Výsledok v prehliadači:

Table Layout

table_layout.html

Tabuľky sa pre pozíciovanie prvkov na stránke už nepoužívajú kvôli 2 závažným nedostatkom:

Nie sú sémantické - tabuľku vyhľadávače chápu ako nejaký zdroj dát. Pokiaľ do nich vložíme celú stránku alebo aj jej časť s obsahom, nebudú tomu pravdepodobne rozumieť, čo sa nám môže prejaviť nižšou návštevnosťou.
Nie sú responzívni - pokiaľ stránku s tabuľkou zmenšíme, tabuľka sa nezalomí, ale zobrazí sa škaredý posuvník. Na mobilných zariadeniach by bol tabuľkový web takmer nepoužiteľný.

Grid systémy

Webdesigneri premýšľali nad tým, ako vytvoriť mriežku bez elementu <table>, aby sa vyhli jeho nedostatkom. Tým sa vyvinuli tzv. grid systémy. To sú predpripravené triedy, ktoré priraďujeme elementom <div> a tie následne získavajú určitú šírku. Systémy obvykle fungujú tak, že rodičovský element rozdelí do 12 stĺpcov. Predtým sa na to využívala šírka zadaná v percentách, jeden stĺpec teda zaberal 8,33 %. Dnes sa využíva flexbox. Číslo 12 bolo vybrané preto, že má mnoho deliteľov. Do kontajnera tak môžeme vložiť:

element cez celú šírku (veľkosť 12 stĺpcov),
element cez polovicu (veľkosť 6 stĺpcov),
element cez tretinu šírky (veľkosť 4 stĺpce),
element cez štvrtinu šírku (veľkosť 3 stĺpcov),
element cez 1/6 šírky (veľkosť 2 stĺpcov),
element cez 1/12 šírky (veľkosť 1 stĺpcov).

Samozrejme môžeme nastavovať aj násobky týchto hodnôt, napr. vložiť do kontajnera element, ktorý zaberie 2/3 obsahu a teda bude nastavený na šírku 8 stĺpcov a podobne. Naopak nie sme schopní vložiť napr. stĺpec o veľkosti 5, môžeme vložiť buď 4 alebo 6. Toto obmedzenie je dané za estetickú pravidelnosť danou mriežkou.

Skúsme si príklad s Bootstrapovým gridom:

<div class="container-fluid bg-light">
    <div class="row">
        <div class="col-3 border bg-success text-white">
            Quater
        </div>
        <div class="col-3 border bg-success text-white">
            Quater
        </div>
        <div class="col-6 border bg-warning">
            Half
        </div>
    </div>
</div>

S kontajnermi sme sa už zoznámili. Pokiaľ pracujeme s gridom, budeme definovať jeho riadky a stĺpce. Riadok obaľuje stĺpce a definujeme ho ako <div> s triedou .row. Stĺpce môžeme definovať niekoľkými spôsobmi, ten najjednoduchší je uviesť triedu col- a za pomlčku uviesť koľko stĺpcov gridu má stĺpec zaberať. Pokiaľ by sme chceli všetky stĺpce rovnako široké, priradili by sme im len triedu .col.

V príklade prvé 2 stĺpce zaberajú 3/12, teda štvrtinu obsahu. Ak ste si mysleli, že ako webdesigneri nebudete potrebovať zlomky, možno budete trochu sklamaní Ďalší zaberá 6/12 gridu, teda polovicu.