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 se zaměříme na grid systém, jeden z nejdůležitějších nástrojů tohoto frameworku. Dnešní lekce patří společně s lekcí Grid systém Bootstrapu mezi ty nejpřínosnější v celém kurzu, protože si ukážeme, jak snadno a efektivně vytvářet flexibilní a přehledné layouty. Od verze 4 je grid systém Bootstrapu postaven na flexboxu, zatímco starší verze používaly CSS vlastnost float. S příchodem Bootstrapu 5 byly do grid systému přidány nové funkce a vylepšení, například podpora pro CSS grid layout, která umožňuje tvořit ještě flexibilnější a pokročilejší rozvržení stránek.

Úvod do grid systému v Bootstrapu

Než se pustíme do samotného Bootstrap gridu, pojďme si krátce připomenout, odkud princip mřížky pochází. Rozdělení obsahu do pravidelné struktury se netýká jen webů – 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 i časopisech. Možná víte, že loga většiny firem jsou také vytvořena na základě pravidelných tvarů, které přesně lícují. Kromě toho, že mřížka plní estetickou funkci, je takto zarovnaná informace pro lidi mnohem lépe zpracovatelná. Podívejme se na layout populární Bootstrap šablony Gentelella pro administraci webu:

Šablona Gentelella 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 dnes již dávno minulých se ke tvorbě 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 k pozicování prvků na stránce již nepoužívají kvůli dvěma 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 jen její část s obsahem, nebudou tomu vyhledávače 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

Webdesignéři proto 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>. 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 zvoleno kvůli své vysoké dělitelnosti, která umožňuje snadné rozdělení na menší části. 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 šestinu šířky (velikost 2 sloupce),
element přes dvanáctinu šířky (velikost 1 sloupec).

Samozřejmě můžeme nastavovat i násobky těchto hodnot, např. vložit do kontejneru element, který zabere dvě třetiny obsahu, a tudíž bude nastavený na šířku 8 sloupců. Můžeme dokonce vložit i sloupec o velikosti třeba 5, ačkoli nejde o dělitele čísla 12, ale výsledek nemusí ladit s dalším rozvržením jiných elementů.

Zkusme si příklad s gridem v Bootstrapu:

<!DOCTYPE html>
<html lang="cs-cz">
   <head>
      <meta charset="utf-8" />
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

      <title>Grid v Bootstrapu</title>
   </head>
   <body>
      <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>
   </body>
</html>

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> s 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í dva sloupce zabírají 3/12, tedy čtvrtinu obsahu. Pokud jste si mysleli, že jako webdesignéři nebudete potřebovat zlomky, budete možná trochu zklamaní Další sloupec zabírá 6/12 gridu, tedy polovinu.