9. diel - Grid systém Bootstrap

V minulej lekcii, Úvod do Bootstrap , 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 Bootstrap, z ktorého Flexbox Grid vychádza. Oba systémy od seba majú nepatrné odlišnosti, najmä potom v rôznom pozicovanie a syntax.

Pridanie Bootstrap do HTML

Ako už vieme, Bootstrap je vo svojej podstate len veľký súbor mnohých CSS & 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 Bootstrap. 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. Používateľ mohol byť totiž v minulosti už na stránke používajúce tieto knižnice (odkaz) a tým pádom prehliadač rozpozná, že už tieto knižnice má v cache a nebude ich znovu sťahovať. Teraz sa už ale vrhneme na Grid systém Bootstrap.

Responzívne triedy

Bootstrap grid systém funguje na rovnakom princípe ako Flexbox Grid. Väčšina názvoslovie zostala rovnaká. Máme tu triedu .row, ktorá nám definuje riadku, do ktorej môžeme vkladať až 12 stĺpcov. Ak teraz náhodou neviete o čom je reč, odkáže vás na minulú lekciu Úvod do grid systémov.

Rovnako ako u Flex-box Grid sú aj u Bootstrap rovnako nazvanej triedy .col. Syntax je col-XY 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ĺpca poskladajú pod seba.

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

<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ýsledok:

Grid v Bootstrap

responzivni_grid.html

Môžeme vidieť 2 stĺpce, ktoré majú 3/12, teda 1/4. Ďalšie má 6/12 - teda 1/2 - dokopy 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ívne!:)

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

Ukážeme si teda ešte jeden príklad. Nakombinujete viac tried pri jednotlivých stĺpcov 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">Sloupec 1</div>
    <div class="col-8 col-md-6 border bg-success text-white">Sloupec 2</div>
</div>

výsledok:

Grid v Bootstrap

responzivni_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 sa triedou .row. Stĺpcom v gride nesmieme pridávať margin, pretože by elementy s ním boli dohromady širší ako kontajner a zalomil by sa. Nič nám však nebráni vložiť do stĺpca ďalšej element a margin nastaviť až tomuto elementu. Aby grid systém fungoval, musí 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.

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

Automatická šírka

Ak nejakému stĺpci 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. Ak sa v gride nachádza mix stĺpcov sa š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">
            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ážka:

Grid v Bootstrap

grid_automaticka_sirka.html

Kód vyššie zobrazí kontajner s tromi stĺpci. Ten prvý bude zaberať vždy všetko zvyšné miesto, teda čo najviac. Ten druhý zaberie čo najmenej miesta, len aby sa do neho vošiel jeho obsah. A ten tretí zaberie 4/12 šírky kontajnera. Po zmenšenie 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 zalomenie riadku

Ak by sme z nejakého dôvodu potrebovali zalomiť riadok skôr, než 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">
            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ýsledok:

Grid v Bootstrap

grid_zalomeni.html

Všimnite si, že môžeme použiť aj triedu .col-sm, teda pridať responzívne breakpoint, bez toho aby sme špecifikovali koľko stĺpcov gridu má stĺpec zaberať. K zalomenie 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

Ak potrebujeme stĺpce v gride nejako zarovnať, existuje na to niekoľko predpripravených štýlov. Elementom sa 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úce 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">
            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ážka:

Grid v 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čné deklaráciu v kóde, nemusíme prázdny stĺpec vkladať vôbec a nasledujúce stĺpec a kus posunúť. Máme na to 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 ktorej sa má daný stĺpec posunúť 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ážka:

Grid v Bootstrap

grid_offsety.html

Ak by sme chceli nastaviť, aby sa offset od nejakého Breakpoint aplikoval a od nejakého zase nie, vypli by sme u druhého rozmeru pomocou triedy .offset-{breakpoint}-0.

Automatický `margin`

Táto vlastnosť má skôr minimálne využitie, avšak aj napriek tomu by sa niekedy mohla hodiť. Ak 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">
            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ážka v prehliadači:

Grid v Bootstrap

grid_auto_marginy.html

Tak to by bolo z grid systému od Bootstrap všetko. Od Flex-box gridu sa teda líši trochu inú syntaxou a špecifickejších využitím. Ponúka sa otázka, ktorý z týchto dvoch "frameworkov" používať. Vzhľadom na povahu oboch frameworkov (jeden je svojím spôsobom osekanie verzia toho druhého), tak odpoveď je pomerne jednoznačná. Ak pracujeme na projekte, kde využijeme aj zbytok Bootstrap (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ívne 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

9. diel - Grid systém Bootstrap

Pridanie Bootstrap do HTML

Responzívne triedy

Čo by sme mali vedieť

Automatická šírka

Vynútenie zalomenie riadku

Zarovnanie a zmena poradia

Offsety

Automatický margin

Automatický `margin`