MS Office week
Pouze tento týden sleva až 80 % na e-learning týkající se MS Office
50 % bodů zdarma na online výuku díky naší Slevové akci!

Lekce 9 - Grid systém Bootstrapu

V minulé lekci, Úvod do Bootstrapu, jsme si uvedli framework Bootstrap a ukázali jeho základní principy.

Pár lekcí zpátky, jsme si uvedli tzv. Flexbox Grid systém. Dnes se podíváme na Grid systém od Bootstrapu, ze kterého Flexbox Grid vychází. Oba systémy od sebe mají nepatrné odlišnosti, zejména pak v různém pozicování a syntaxi.

Přidání Bootstrapu do HTML

Jak už víme, Bootstrap je ve své podstatě jen velký soubor mnoha CSS & JS kódu. Ten můžeme do našeho HTML kódu zavést dvěma způsoby. Buď si můžeme celý framework stáhnout a naimportovat nebo jednoduše použít odkaz na cloudové úložiště Bootstrapu. Na oficiální stránce zkopírujeme link na CSS, který vložíme do našeho HTML:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

Kód výše vložíme do HTML hlavičky. Mělo by to vypadat nějak takto:

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>

Pro účely a jednoduchost budeme používat právě import přes CDN. Pokud ale budeme pracovat na větším projektu, určitě bychom měli Bootstrap stáhnout a nahrát ho na vlastní server. Je sice nepravděpodobné, že cloudové úložiště nebude fungovat. Cloudové úložiště může také zvyšovat rychlost načítání stránky. Uživatel mohl být totiž v minulosti již na stránce používající tyto knihovny (odkaz) a tím pádem prohlížeč rozpozná, že už tyto knihovny má v cache a nebude je znovu stahovat. Nyní se už ale vrhneme na Grid systém Bootstrapu.

Responzivní třídy

Bootstrap grid systém funguje na stejném principu jako Flexbox Grid. Většina názvosloví zůstala stejná. Máme tady třídu .row, která nám definuje řádku, do které můžeme vkládat až 12 sloupečků. Pokud nyní náhodou nevíte o čem je řeč, odkáži vás na minulou lekci Úvod do grid systémů.

Stejně jako u Flex-box Grid jsou i u Bootstrapu stejně nazvané třídy .col. Syntaxe je col-X-Y kde:

  • X může nabývat hodnot od nejmenšího sm (telefony), md, lgxl. Tímto udáváme, od jaké velikosti zařízení začíná styl platit.
  • Y nabývá hodnot 112 a udává, kolik sloupců bude element zabírat. Všechny elementy v jednom řádku nemohou zabírat dohromady více než 12 sloupců.

Definujme nyní třídy od středně velkých zařízení. Cokoli menšího bude mít vždy šířku 12 sloupců, což je výchozí šířka. Na malých zařízeních se tedy sloupce poskládají pod sebe.

Z hlediska grid systému nás zajímají vždy jen třídy .row a .col, ty další jsou přidány pro přehlednost ukázky (bootstrap třídy).

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

Výsledek:

Grid v Bootstrap
responzivni_grid­.html

Můžeme vidět 2 sloupce, které mají 3/12, tedy 1/4. Další má 6/12 - tedy 1/2 - dohromady součet všeho dá celek (12)

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Můžete si zkusit zmenšit okno prohlížeče a podívat se na ukázku výše. Elementy se zalomí a naskládají pod sebe. Náš obsah stránky je tedy rozdělený do "tabulky" a zároveň je responzivní! :)

Tříd můžeme přiřadit k jednomu sloupci více a tak mu "naprogramovat" jak má být široký na různých zařízeních. Můžete přidat jakoukoli responzivní třídu k jakémukoli sloupci.

Ukážeme si tedy ještě jeden příklad. Nakombinujeme více tříd u jednotlivých sloupců tak, aby se na různých zařízeních chovaly různým způsobem:

<div class="row">
    <div class="col-4 col-md-6 border bg-success text-white">Sloupec 1</div>
    <div class="col-8 col-md-6 border bg-success text-white">Sloupec 2</div>
</div>

Výsledek:

Grid v Bootstrap
responzivni_grid_2­.html

Chování si můžeme ověřit zmenšováním okna prohlížeče. Od středně velkých zařízení zabírají oba sloupce polovinu kontejneru. Na menších zařízeních zabírá první sloupec 1/3 a druhý 2/3 kontejneru.

Co bychom měli vědět

Elementy sloupců mají kolem sebe padding, tomu se v kontextu Bootstrap grid systému říká gutter. Můžeme jej případně odstranit a to přidáním třídy .no-gutters elementu se třídou .row. Sloupcům v gridu nesmíme přidávat margin, protože by elementy s ním byly dohromady širší než kontejner a zalomily by se. Nic nám ovšem nebrání vložit do sloupce další element a margin nastavit až tomuto elementu. Aby grid systém fungoval, musí být vždy všechny přímé podelementy řádků sloupce. Sloupce mohou obsahovat opět řádky, gridy tedy můžeme vkládat do sebe. Některé HTML elementy nelze jako flex kontejnery zatím použít, to jsou např. <button> nebo <fieldset>. K flexboxu bylo nahlášeno několik bugů, asi tušíte, že zejména pro zastaralý prohlížeč Internet Explorer. Některé se ovšem týkají i moderních prohlížečů. Seznam reportovaných chyb naleznete zde.

Guttery jsou implementované pomocí vlastnosti padding po obou stranách každého sloupce a  vlastnosti margin (záporný) na kontejneru. Díky tomu mají sloupce mezery mezi sebou, ale ty krajní mezeru mezi sebou a okolím kontejneru nevytvoří.

Automatická šířka

Pokud nějakému sloupci nastavíme šířku pomocí třídy ve tvaru .col-{breakpoint}-auto, jeho šířka se nastaví tak, aby se do sloupce vešel jeho obsah, a zbytek šířky bude rozdělen mezi zbývající sloupce podle pravidel definovaných v gridu. S automatickou šířkou souvisí i využití zbytku kontejneru. Pokud se v gridu nalézá mix sloupců se specifikovanou šířkou a sloupců označených jen třídou .col, vyplní sloupec s .col zbylé místo.

Obojí si vyzkoušejme:

<div class="container-fluid">
    <div class="row">
        <div class="col border bg-success text-white">
            Sloupec 1
        </div>
        <div class="col-sm-auto border bg-warning">
            Sloupec 2
        </div>
        <div class="col col-sm-4 border bg-success text-white">
            Sloupec 3
        </div>
    </div>
</div>

Živá ukázka:

Grid v Bootstrap
grid_automatic­ka_sirka.html

Kód výše zobrazí kontejner se třemi sloupci. Ten první bude zabírat vždy všechno zbylé místo, tedy co nejvíce. Ten druhý zabere co nejméně místa, jen aby se do něj vešel jeho obsah. A ten třetí zabere 4/12 šířky kontejneru. Po zmenšení na viewport pod malá zařízení se všechny sloupce seřadí pod sebe.

Automatická šířka sloupců je spíše technologická vychytávka než styl, který budete často používat. Právě šířka stanovená nikoli na základě obsahu elementu, ale na zadaném počtu sloupců, tvoří přidanou hodnotu gridu.

Vynucení zalomení řádku

Pokud bychom z nějakého důvodu potřebovali zalomit řádek dříve, než jej ve skutečnosti ukončíme, můžeme za tímto účelem do gridu vložit sloupec s třídou .w-100:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm border bg-success text-white">
            Sloupec 1
        </div>
        <div class="col-sm border bg-success text-white">
            Sloupec 2
        </div>
        <div class="w-100"></div>
        <div class="col-sm border bg-success text-white">
            Sloupec 3
        </div>
    </div>
</div>

Výsledek:

Grid v Bootstrap
grid_zalomeni.html

Všimněte si, že můžeme použít i třídu .col-sm, tedy přidat responzivní breakpoint, aniž bychom specifikovali kolik sloupců gridu má sloupec zabírat. K zalomení řádku dojde také ve chvíli, když by součet šířek jeho sloupců přesáhl 12 sloupců (např. .col-4 a .col-9).

Zarovnání a změna pořadí

Pokud potřebujeme sloupce v gridu nějak zarovnat, existuje na to několik předpřipravených stylů. Elementům se třídou .row přiřadíme třídy jako .align-items-center, .justify-content-center nebo .align-self-end. Stejně tak můžeme měnit skutečné pořadí sloupců v řádku bez ohledu na jejich pořadí v kódu, stačí jim přiřadit jednu z tříd začínající na .order-X, kde X nabývá hodnot 1 - 12. Uveďme jeden příklad za všechny:

<div class="container-fluid">
    <div class="row justify-content-center bg-light" style="height: 150px;">
        <div class="col-auto border bg-success text-white order-2 align-self-start">
            Druhý
        </div>
        <div class="col-auto border bg-success text-white order-1 align-self-center">
            První
        </div>
        <div class="col-auto border bg-success text-white align-self-end order-3">
            Třetí
        </div>
    </div>
</div>

A živá ukázka:

Grid v Bootstrap
grid_flex_uti­lities.html

Offsety

Občas nějaký sloupec nevyužijeme a chceme místo něj ponechat volné místo. Abychom se vyhnuli jeho zbytečné deklaraci v kódu, nemusíme prázdný sloupec vkládat vůbec a následující sloupec a kus posunout. Máme k tomu k dispozici třídy ve formátu .offset-{číslo}, případně .offset-{breakpoint}-číslo, přičemž číslo určuje počet sloupců (z 12), o které se má daný sloupec posunout doprava.

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 bg-success text-white">
            Sloupec 1
        </div>
        <div class="col-md-4 offset-md-4 bg-success text-white">
            Sloupec 2
        </div>
    </div>
</div>

Ukázka:

Grid v Bootstrap
grid_offsety.html

Pokud bychom chtěli nastavit, aby se offset od nějakého breakpointu aplikoval a od nějakého zase ne, vypnuli bychom u druhého rozměru pomocí třídy .offset-{breakpoint}-0.

Automatický margin

Tato vlastnost má spíše minimální využití, nicméně i přesto by se někdy mohla hodit. Pokud sloupci nastavíme třídu .ml-auto nebo .mr-auto, posune se zbytek sloupců nalevo nebo napravo:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4 border bg-success text-white">
            Sloupec 1
        </div>
        <div class="col-md-2 border bg-success text-white">
            Sloupec 2
        </div>
        <div class="col-md-2 border bg-success text-white ml-auto">
            Sloupec 3
        </div>
    </div>
</div>

Ukázka v prohlížeči:

Grid v Bootstrap
grid_auto_mar­giny.html

Tak to by bylo z grid systému od Bootstrapu vše. Od Flex-box gridu se tedy liší trochu jinou syntaxí a specifičtějším využitím. Nabízí se otázka, který z těchto dvou "frameworků" používat. Vzhledem k povaze obou frameworků (jeden je svým způsobem osekaná verze toho druhého), tak odpověď je poměrně jednoznačná. Pokud pracujeme na projektu, kde využijeme i zbytek Bootstrapu (tedy veškeré styly pro různé HTML elementy), pak je na místě použít logicky celý Bootstrap framework. Nicméně pokud do projektu potřebujeme zakomponovat pouze responzivní zarovnávání (grid systém) a CSS již ve zbytku máme své, tak je lepší volba spíše Flexbox Grid.

V další lekci, Responzivní tabulky, si ukážeme různé způsoby responzivních tabulek.


 

Předchozí článek
Úvod do Bootstrapu
Všechny články v sekci
Responzivní webdesign
Článek pro vás napsal Štěpán Zavadil
Avatar
Jak se ti líbí článek?
2 hlasů
Autor se věnuje tvorbě webových aplikací v JavaScriptu
Aktivity (3)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!