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 Bootstrap sa dostaneme ku grid systému. Dnešná lekcia a lekcia Grid systém v Bootstrap patrí medzi tie najprínosnejšie z celého kurzu, keďže sa naučíme používať veľmi jednoduchý a účinný nástroj. Grid systém v Bootstrap je od verzie 4 postavený na flexboxe, ale 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 Bootstrap

Na začiatok by sa patrilo načrtnúť problematiku gridov, takže začnime pekne od začiatku. Rozdelenie obsahu do pravidelnej mriežky sa netýka len webov, keďže tento princíp je používaný v podstate už od stredoveku a to nielen v texte, ale aj pri ilustráciách. 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é do seba zapadajú. 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 v násobkoch veľkosti týchto stĺpcov. Celý web tak pôsobí veľmi celistvým dojmom.

Ak budeme prvky poziciovať na stránku ako nás napadne, môžeme dopadnúť ako legendárne stránky Penziónu na Hrubých lúkach, dnes sú 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. 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 poziciovanie 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 môže prejaviť nižšou návštevnosťou.
Nie sú responzívne - 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

Weboví dizajnéri premýšľali nad tým, ako vytvoriť mriežku bez elementu <table>, aby sa vyhli jeho nedostatkom. Tak sa vyvinuli tzv. grid systémy. Ide o 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 rozdelia 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 šírky (veľkosť 6 stĺpcov),
element cez tretinu šírky (veľkosť 4 stĺpce),
element cez štvrtinu šírku (veľkosť 3 stĺpce),
element cez 1/6 šírky (veľkosť 2 stĺpce),
element cez 1/12 šírky (veľkosť 1 stĺpcec).

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. Môžeme dokonca vložiť aj stĺpec o veľkosti napríklad 5, hoci to nie je deliteľ čísla 12 a nemusí ladiť s ďalším rozvrhnutím iných elementov.

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 weboví dizajnéri nebudete potrebovať zlomky, možno budete trochu sklamaní Ďalší zaberá 6/12 gridu, teda polovicu.