11. diel - Grid systém Bootstrapu

V minulej lekcii, Úvod do Bootstrapu, sme si uviedli framework Bootstrap a ukázali jeho základné princípy.

Pár lekcií späť, sme si uviedli tzv. Flexbox Grid systém. Dnes sa pozrieme na Grid systém od Bootstrapu, z ktorého Flexbox Grid vychádza. Oba systémy od seba majú nepatrné odlišnosti, najmä v rôznom pozíciovaní a syntaxi.

Pridanie Bootstrapu do HTML

Ako už vieme, Bootstrap je vo svojej podstate iba veľký súbor mnohých CSS a JS kódu. Ten môžeme do nášho HTML kódu zaviesť dvoma spôsobmi. Buď si môžeme celý framework stiahnuť a naimportovať alebo jednoducho použiť odkaz na cloudové úložisko Bootstrapu. Na oficiálnej stránke skopírujeme link na CSS, ktorý vložíme do nášho 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 vyššie vložíme do HTML hlavičky. Malo by to vyzerať nejako 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>

Na účely a jednoduchosť budeme používať práve import cez CDN. Pokiaľ ale budeme pracovať na väčšom projekte, určite by sme mali Bootstrap stiahnuť a nahrať ho na vlastný server. Je síce nepravdepodobné, že cloudové úložisko nebude fungovať. Cloudové úložisko môže tiež zvyšovať rýchlosť načítania stránky. Užívateľ mohol byť totiž v minulosti už na stránke používajúcej tieto knižnice (odkaz) a tým pádom prehliadač rozpozná, že už tieto knižnice má v cache a nebude ich znova sťahovať. Teraz sa už ale vrhneme na Grid systém Bootstrapu.

Responzívne triedy

Bootstrap grid systém funguje na rovnakom princípe ako Flexbox Grid. Väčšina názvosloví zostala rovnaká. Máme tu triedu .row, ktorá nám definuje riadok, do ktorého môžeme vkladať až 12 stĺpčekov. Pokiaľ teraz náhodou neviete o čom je reč, odkážem vás na lekciu Úvod do grid systémov.

Rovnako ako pri Flexbox Grid sú aj pri Bootstrape rovnako nazvané triedy .col. Syntax je col-X-Y kde:

X môže nadobúdať hodnoty od najmenšieho sm (telefóny), md, lg až xl. Týmto udávame, od akej veľkosti zariadenia začína štýl platiť.
Y nadobúda hodnoty 1 až 12 a udáva, koľko stĺpcov bude element zaberať. Všetky elementy v jednom riadku nemôžu zaberať dohromady viac ako 12 stĺpcov.

Definujme teraz triedy od stredne veľkých zariadení. Čokoľvek menšieho bude mať vždy šírku 12 stĺpcov, čo je predvolená šírka. Na malých zariadeniach sa teda stĺpce poskladajú pod seba:

<div class="row">
    <div class="col-sm-3 border bg-success text-white">
        Quarter
    </div>
    <div class="col-sm-3 border bg-success text-white">
        Quarter
    </div>
    <div class="col-sm-6 border bg-warning">
        Half
    </div>
</div>

Z hľadiska grid systému nás zaujímajú vždy len triedy .row a .col, tie ďalšie bootstrap triedy sú pridané pre prehľadnosť ukážky.

Výsledok:

Grid in Bootstrap

responsive_grid.html

Môžeme vidieť 2 stĺpce, ktoré majú 3/12, teda 1/4. Ďalší má 6/12 - teda 1/2 - dohromady súčet všetkého dá celok (12).

Môžete si skúsiť zmenšiť okno prehliadača a pozrieť sa na ukážku vyššie. Elementy sa zalomia a naskladajú pod seba. Náš obsah stránky je teda rozdelený do "tabuľky" a zároveň je responzívny!

Tried môžeme priradiť k jednému stĺpcu viac a tak mu „naprogramovať“ aký má byť široký na rôznych zariadeniach. Môžete pridať akúkoľvek responzívnu triedu k akémukoľvek stĺpcu.

Ukážeme si teda ešte jeden príklad. Nakombinujeme viac tried pri jednotlivých stĺpcoch tak, aby sa na rôznych zariadeniach správali rôznym spôsobom:

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

Výsledok:

Grid in Bootstrap

responsive_grid_2.html

Správanie si môžeme overiť zmenšovaním okna prehliadača. Od stredne veľkých zariadení zaberajú oba stĺpce polovicu kontajnera. Na menších zariadeniach zaberá prvý stĺpec 1/3 a druhý 2/3 kontajnera.

Čo by sme mali vedieť

Elementy stĺpcov majú okolo seba padding, tomu sa v kontexte Bootstrap grid systému hovorí gutter. Môžeme ho prípadne odstrániť a to pridaním triedy .no-gutters elementu s triedou .row. Stĺpcom v gride nesmieme pridávať margin, pretože by elementy s ním boli dohromady širšie ako kontajner a zalomili by sa. Nič nám však nebráni vložiť do stĺpca ďalší element a margin nastaviť až tomuto elementu.

Aby grid systém fungoval, musia byť vždy všetky priame podelementy riadkov stĺpca. Stĺpce môžu obsahovať opäť riadky, gridy teda môžeme vkladať do seba. Niektoré HTML elementy nemožno ako flex kontajnery zatiaľ použiť, to sú napr. <button> alebo <fieldset>.

K flexboxu bolo nahlásených niekoľko bugov, asi tušíte, že najmä pre zastaraný prehliadač Internet Explorer. Niektoré sa však týkajú aj moderných prehliadačov. Zoznam reportovaných chýb nájdete tu.

Guttery sú implementované pomocou vlastnosti padding po oboch stranách každého stĺpca a vlastnosti margin (záporný) na kontajneri. Vďaka tomu majú stĺpce medzery medzi sebou, ale tie krajnú medzeru medzi sebou a okolím kontajnera nevytvoria.

Automatická šírka

Pokiaľ nejakému stĺpcu nastavíme šírku pomocou triedy v tvare .col-{breakpoint}-auto, jeho šírka sa nastaví tak, aby sa do stĺpca vošiel jeho obsah, a zvyšok šírky bude rozdelený medzi zostávajúce stĺpce podľa pravidiel definovaných v gride. S automatickou šírkou súvisí aj využitie zvyšku kontajnera. Pokiaľ sa v gride nachádza mix stĺpcov so špecifikovanou šírkou a stĺpcov označených len triedou .col, vyplní stĺpec s .col zvyšné miesto.

Oboje si vyskúšajme:

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

Živá ukážka:

Grid in Bootstrap

grid_automatic_width.html

Kód vyššie zobrazí kontajner s tromi stĺpcami. Ten prvý bude zaberať vždy všetko zvyšné miesto, teda čo najviac. Ten druhý zaberie čo najmenej miesta, len aby sa doňho vošiel jeho obsah. A ten tretí zaberie 4/12 šírky kontajnera. Po zmenšení na viewport pod malé zariadenia sa všetky stĺpce zoradia pod seba.

Automatická šírka stĺpcov je skôr technologická vychytávka než štýl, ktorý budete často používať. Práve šírka stanovená nie na základe obsahu elementu, ale na zadanom počte stĺpcov, tvorí pridanú hodnotu gridu.

Vynútenie zalomenia riadku

Ak by sme z nejakého dôvodu potrebovali zalomiť riadok skôr, ako ho v skutočnosti ukončíme, môžeme na tento účel do gridu vložiť stĺpec s triedou .w-100:

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

Výsledok:

Grid in Bootstrap

grid_break.html

Všimnite si, že môžeme použiť aj triedu .col-sm, teda pridať responzívny breakpoint bez toho, aby sme špecifikovali koľko stĺpcov gridu má stĺpec zaberať. K zalomeniu riadku dôjde aj vo chvíli, keď by súčet šírok jeho stĺpcov presiahol 12 stĺpcov (napr. .col-4 a .col-9).

Zarovnanie a zmena poradia

Pokiaľ potrebujeme stĺpce v gride nejako zarovnať, existuje na to niekoľko predpripravených štýlov. Elementom s triedou .row priradíme triedy ako .align-items-center, .justify-content-center alebo .align-self-end. Rovnako tak môžeme meniť skutočné poradie stĺpcov v riadku bez ohľadu na ich poradie v kóde, stačí im priradiť jednu z tried začínajúcu na .order-X, kde X nadobúda hodnoty 1 - 12. Uveďme jeden príklad za všetky:

<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">
            Second
        </div>
        <div class="col-auto border bg-success text-white order-1 align-self-center">
            First
        </div>
        <div class="col-auto border bg-success text-white align-self-end order-3">
            Third
        </div>
    </div>
</div>

A živá ukážka:

Grid in Bootstrap

grid_flex_utilities.html

Offsety

Občas nejaký stĺpec nevyužijeme a chceme namiesto neho ponechať voľné miesto. Aby sme sa vyhli jeho zbytočnej deklarácii v kóde, nemusíme prázdny stĺpec vkladať vôbec a nasledujúci stĺpec o kus posunúť. Máme k tomu k dispozícii triedy vo formáte .offset-{číslo}, prípadne .offset-{breakpoint}-{číslo}, pričom číslo určuje počet stĺpcov (z 12), o ktoré sa má daný stĺpec posunúť doprava:

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

Ukážka:

Grid in Bootstrap

grid_offsets.html

Ak by sme chceli nastaviť, aby sa offset od nejakého breakpointu aplikoval a od nejakého zase nie, vypli by sme pri druhom rozmere pomocou triedy .offset-{breakpoint}-0.

Automatický `margin`

Táto vlastnosť má skôr minimálne využitie, ale napriek tomu by sa niekedy mohla hodiť. Pokiaľ stĺpci nastavíme triedu .ml-auto alebo .mr-auto, posunie sa zvyšok stĺpcov naľavo alebo napravo:

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

Ukážka v prehliadači:

Grid in Bootstrap

grid_auto_margins.html

Tak to by bolo z grid systému od Bootstrapu všetko. Od Flexbox gridu sa teda líšia trochu inou syntaxou a špecifickejším využitím. Ponúka sa otázka, ktorý z týchto dvoch "frameworkov" používať. Vzhľadom na povahu oboch frameworkov (jeden je svojim spôsobom osekaná verzia toho druhého), tak odpoveď je pomerne jednoznačná.

Pokiaľ pracujeme na projekte, kde využijeme aj zvyšok Bootstrapu (teda všetky štýly pre rôzne HTML elementy), potom je na mieste použiť logicky celý Bootstrap framework. Avšak ak do projektu potrebujeme zakomponovať iba responzívne zarovnávanie (grid systém) a CSS už vo zvyšku máme svoje, tak je lepšia voľba skôr Flexbox Grid.

V ďalšej lekcii, Responzívne tabuľky, si ukážeme rôzne spôsoby responzívnych tabuliek.

Článok pre vás napísal Štěpán Zavadil

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

Autor se věnuje tvorbě webových aplikací v JavaScriptu

Aktivity

11. diel - Grid systém Bootstrapu

Pridanie Bootstrapu do HTML

Responzívne triedy

Čo by sme mali vedieť

Automatická šírka

Vynútenie zalomenia riadku

Zarovnanie a zmena poradia

Offsety

Automatický margin

Automatický `margin`