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

V minulej lekcii, Bootstrap - Obrázky , sme sa venovali obrázkom. Dnes sme sa dostali k samotnému grid systému Bootstrap. Dnešné a budúci lekcie patrí medzi tie najprínosnejšie z celého kurzu, naučíte sa používať veľmi jednoduchý a účinný nástroj. Grid systém Bootstrap je od verzie 4 postavený na flexboxu, jeho staršie verzie používali CSS vlastnosť float.

Úvod do grid systémov

Na začiatok by sa slušilo 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ácie oveľa lepšie spracovateľná. Pozrime sa na layout populárnej Bootstrap šablónu Gantella pre administráciu webu:

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

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

Tabuľky

V dobách už dávno minulých sa pre 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. Nasledovne:

<table>
    <tr>
        <td colspan="2"><h1>Hlavička</h1></td>
    </tr>
    <tr>
        <td><h2>Menu</h2></td>
        <td>Obsah...</td>
    </tr>
    <tr>
        <td colspan="2"><small>Patička</small></td>
    </tr>
</table>

Výsledok v prehliadači:

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

• Nie sú sémantickej - Tabulku vyhľadávače chápu ako nejaký zdroj údajov. 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žšia návštevnosťou.
• Nie sú responzívne - Ak stránku s tabuľkou zmenšíme, tabuľka sa nezalomí, ale zobrazí sa škaredý posúvač. Na mobilných zariadeniach by bol tabuľkový web takmer nepoužiteľný.

Grid systémy

Webdesignéri 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 zvyčajne fungujú tak, že rodičovský element rozdelí do 12 stĺpcov. Skôr sa k tomu 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)
• A 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 pod. Naopak nie sme schopní vložiť napr. 5 elementov vedľa seba, môžeme vložiť buď 4 alebo 6. Toto obmedzenie je daňou za estetickú pravidelnosť danú mriežkou.

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

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

S kontajnermi sme sa už zoznámili. Ak pracujeme s GRID, budeme definovať jeho riadky a stĺpce. Riadok obaľuje stĺpce a definujeme ho ako <div> sa triedou .row. Stĺpce môžeme definovať niekoľkými spôsobmi, ten najjednoduchšie je uviesť triedu col- a za pomlčku uviesť koľko stĺpcov gridu má stĺpec zaberať. Ak 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 webdesigner nebudete potrebovať zlomky, budete možno trochu sklamaní Ďalšie zaberá 6/12 gridu, teda polovicu.

Výsledok v prehliadači:

Grid vyššie zatiaľ nie je responzívne, ako to docieliť si ukážeme nabudúce. Už nabudúce teda svoje vedomosti gridu dovŕšite a to lekcií Bootstrap - Grid systém Bootstrap . Tešte sa, bude to jazda!