Lekce 5 - Bootstrap - Úvod do grid systémů

V předchozím kvízu, Kvíz - Reboot, typografie a obrázky v Bootstrap, jsme si ověřili nabyté zkušenosti z předchozích lekcí.

V dnešním tutoriálu Bootstrapu jsme se dostali až ke grid systému. Dnešní lekce a lekce Grid systém Bootstrapu patří mezi ty nejpřínosnější z celého kurzu, naučíme se používat velmi jednoduchý a účinný nástroj. Grid systém Bootstrapu je od verze 4 postaven na flexboxu, jeho starší verze používaly CSS vlastnost float. Bootstrap 5 pak přinesl některé nové funkce a vylepšení ve vztahu ke grid systému, jako je například podpora pro CSS grid layout, což umožňuje vytvářet ještě flexibilnější a pokročilejší layouty.

Úvod do grid systémů v Bootstrapu

Na začátek by se slušelo problematiku gridů nastínit, začněme hezky od začátku. Rozdělení obsahu do pravidelné mřížky se netýká jen webů, ale tento princip je používán v podstatě již od středověku a to nejen pro text, ale i pro ilustrace. Nalezneme jej v novinách a časopisech. Možná víte, že loga většiny firem jsou také vytvořena na základě pravidelných tvarů, které k sobě lícují. Kromě toho, že mřížka plní estetickou funkci, je pro lidi takto zarovnaná informace mnohem lépe zpracovatelná. Podívejme se na layout populární Bootstrap šablony Gentlella pro administraci webu:

Šablona Gentlella pro Bootstrap - Kompletní kurz CSS frameworku Bootstrap

Vidíme, že layout je rozdělený do šesti pomyslných sloupců. Všechny kontejnery na stránce mají potom velikost jen a pouze v násobcích velikosti těchto sloupců. Celý web působí velmi celistvým dojmem.

Pokud budeme prvky pozicovat na stránku jak nás napadne, můžeme dopadnout jako legendární stránky Penzionu na Hrubých lukách, dnes již naštěstí nahrazené jinou verzí:

Stránky penzionu na Hrubých lukách - Kompletní kurz CSS frameworku Bootstrap

Tabulky

V dobách již dávno minulých se pro tvorbu layoutů internetových stránek používaly tabulky. Jejich výhodou bylo, že obsah webu byl opticky zarovnán do tabulky, takže rozložení působilo pravidelně a vyváženě. Taková tabulková kostra zastaralého webu by mohla vypadat např. takto:

<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ýsledek v prohlížeči:

Tabulkový layout

tabulkovy_layout.html

Tabulky se pro pozicování prvků na stránce již nepoužívají kvůli 2 závažným nedostatkům:

Nejsou sémantické - tabulku vyhledávače chápou jako nějaký zdroj dat. Pokud do nich vložíme celou stránku nebo i její část s obsahem, nebudou tomu pravděpodobně rozumět, což se nám může projevit nižší návštěvností.
Nejsou responzivní - pokud stránku s tabulkou zmenšíme, tabulka se nezalomí, ale zobrazí se ošklivý posuvník. Na mobilních zařízeních by byl tabulkový web téměř nepoužitelný.

Grid systémy

Webdesigneři přemýšleli nad tím, jak vytvořit mřížku bez elementu <table>, aby se vyhnuli jeho nedostatkům. Tím se vyvinuly tzv. grid systémy. To jsou předpřipravené třídy, které přiřazujeme elementům <div> a ty následně získávají určitou šířku. Systémy obvykle fungují tak, že rodičovský element rozdělí do 12 sloupců. Dříve se k tomu využívala šířka zadaná v procentech, jeden sloupec tedy zabíral 8,33 %. Dnes se využívá flexbox. Číslo 12 bylo vybráno proto, že má mnoho dělitelů. Do kontejneru tak můžeme vložit:

element přes celou šířku (velikost 12 sloupců),
element přes polovinu (velikost 6 sloupců),
element přes třetinu šířky (velikost 4 sloupce),
element přes čtvrtinu šířky (velikost 3 sloupce),
element přes 1/6 šířky (velikost 2 sloupce),
element přes 1/12 šířky (velikost 1 sloupec).

Samozřejmě můžeme nastavovat i násobky těchto hodnot, např. vložit do kontejneru element, který zabere 2/3 obsahu a tudíž bude nastavený na šířku 8 sloupců a podobně. Můžeme dokonce vložit i sloupec o velikosti třeba 5, byť to není dělitel čísla 12 a nemusí to ladit s dalším rozvržením jiných elementů.

Zkusme si příklad s Bootstrapovým gridem:

<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 kontejnery jsme se již seznámili. Pokud pracujeme s gridem, budeme definovat jeho řádky a sloupce. Řádek obaluje sloupce a definujeme jej jako <div> se třídou .row. Sloupce můžeme definovat několika způsoby, ten nejjednodušší je uvést třídu col- a za pomlčku uvést kolik sloupců gridu má sloupec zabírat. Pokud bychom chtěli všechny sloupce stejně široké, přiřadili bychom jim jen třídu .col.

V příkladu první 2 sloupce zabírají 3/12, tedy čtvrtinu obsahu. Pokud jste si mysleli, že jako webdesigneři nebudete potřebovat zlomky, budete možná trochu zklamaní Další zabírá 6/12 gridu, tedy polovinu.