Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

6. diel - Bootstrap - Grid systém Bootstrap

V minulej lekcii, Bootstrap - Úvod do grid systémov , sme si predstavili grid systémy. V dnešnom, poslednom tutoriálu kurze CSS frameworku Bootstrap, prejdeme ku gridům Bootstrap. Ako vždy si na praktických ukážkach vyskúšame čo všetko s nimi môžeme robiť.

Responzívne triedy

To krásne na gride je, že sa nielen zalomia v prípade, že sa na stránku nezmestí, ale že si môžeme nastaviť kedy sa má zalomiť. Okrem tried v tvare col-{číslo} môžeme priraďovať aj responzívne triedy ako napr. .col-sm-3, čo konkrétne znamená, že od malých zariadení a väčších bude stĺpec zaberať 3/12 gridu.

Namiesto príkladu z konca minulej lekcie teraz použime triedy so špecifikovaným Breakpoint a stĺpce definujme iba od stredne veľkých Viewport ďalej. Č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.

<div class="container-fluid bg-light">
    <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>
</div>

výsledok:

Grid v Bootstrap
responzivni_grid­.html

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. Ako sú ktoré zariadenia veľké a aké majú hraničnými skratky sme si definovali v lekcii Bootstrap - Typografia. Pre úplnosť si spomeňme, že hraničnými idú po sebe ako:

  • sm
  • md
  • lg
  • xl

Ukážme si ešte jeden príklad a to keď nakombinujete viac tried pri jednotlivých stĺpcov tak, aby sa na rôznych zariadeniach správali rôznym spôsobom. Správanie si môžete overiť zmenšovaním okna prehliadača.

<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

Od stredne veľkých zariadení zaberajú oba stĺpce polovicu kontajnera. Na menších zariadeniach zaberá prvý <div> 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 padding u po oboch stranách každého stĺpca a negatívnych margin ov 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_automatic­ka_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 by ste potrebovali stĺpca v gride nejako zarovnať, čo by sa teoreticky stávať príliš nemalo, platí pre stĺpce kontajnera to isté ako sme si hovorili v detailných lekciách o Flex utilities. Elementom sa triedou .row teda priraďujeme triedy ako .align-items-center, .justify-content-center alebo .align-self-end a podobne. 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-{číslo}, kde číslo nadobúda hodnoty 1 - 12. To všetko by sme už mali poznať z flex utilities. Pre kompletnosť týchto materiálov si 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_uti­lities.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é marginy

Z flex utilities by sme mali poznať aj hack s automatickými marginy. Ak niektorému stĺpci nastavíme triedu .ml-auto alebo .mr-auto, posunie sa zvyšok stĺpcov naľavo, resp. 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:

Grid v Bootstrap
grid_auto_mar­giny.html

V budúcej lekcii, Riešené úlohy k 1.-6. lekciu Bootstrap CSS frameworku , sa pozrieme ako sa v Bootstrap štýlom tabuľky,

V nasledujúcom cvičení, Riešené úlohy k 1.-6. lekciu Bootstrap CSS frameworku, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.


 

Predchádzajúci článok
Bootstrap - Úvod do grid systémov
Všetky články v sekcii
Kompletný kurz CSS frameworku Bootstrap
Preskočiť článok
(neodporúčame)
Riešené úlohy k 1.-6. lekciu Bootstrap CSS frameworku
Článok pre vás napísal David Hartinger
Avatar
Užívateľské hodnotenie:
1 hlasov
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity