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

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
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

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í.


 

 

Článok pre vás napísal David Čápka
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sa informačné technológie naučil na Unicorn College - prestížnej súkromnej vysokej škole IT a ekonómie.
Predchádzajúci článok
Bootstrap - Úvod do grid systémov
Všetky články v sekcii
Kompletný kurz CSS frameworku Bootstrap
Miniatúra
Nasledujúci článok
Riešené úlohy k 1.-6. lekciu Bootstrap CSS frameworku
Aktivity (1)

 

 

Komentáre

Avatar
David Koníček:10.1.2018 10:56

Musím uznat, že tohle byl hodně povedený seriál. Vyplatilo se vydržet do konce! ;-)

Odpovedať
10.1.2018 10:56
Věř, běž a dokážeš!
Avatar
Štěpán Karlovec:20.5.2018 21:02

Super seriál ! děkuji..

 
Odpovedať
20.5.2018 21:02
Avatar
Josef Horváth:6.8.2018 14:11

Konečně jsem se dostal do samotného závěru tutoriálu a musím říct, že se mi jeho celkové zpracování velmi líbilo. Tímto děkuji autorovi za hezké vysvětlení a spoustu praktických ukázek.

 
Odpovedať
6.8.2018 14:11
Avatar
Jan Jurníček:16.11.2018 13:08

Drobná poznámka: U příkladu se sloupců s šířkou col-auto a bez stanovené šířky jsem zkusil přesunout Sloupec 1 bez stanovené šířky na konec seznamu sloupců:

<div class="container-fluid">
<div class="row">
<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 class="col border bg-success text-white">
Sloupec 1
</div>
</div>
</div>

Při tomto pořadí se poslední Sloupec 1 nezalomí pod Sloupec 3 ani na mobilních zařízeních a zůstává s ním ve stejném řádku. Ale lze to ošetřit tak, že se před tento sloupec vloží vynucené zalomení pro šířky menší, než malé:

<div class="w-100 d-sm-none"></div>

 
Odpovedať
16.11.2018 13:08
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!
Avatar
Jakub Podskalský:12.7.2019 19:10

Pěkné, jen je tento článek trochu pomatený v tom, že je na některou část potřeba znalost x lekcí po tomhle, což nedává smysl (konkrétně flex utilities). :( A přijde mi bezvýznamné toho tolik přeskočit a přečíst si o tamtom, protože všechno na sebe nějak navazuje.

 
Odpovedať
12.7.2019 19:10
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovedá na Jakub Podskalský
David Čápka:12.7.2019 19:17

Jinak to napsat nejde, protože většina Bootstrap komponent využívá nějaké utilities, případně rovnou jiné komponenty. Těžko najdeš kurz, kde budou jen věci, které nic jiného nepožadují. A začínat dlouhým seznamem všech utilities je zas docela nudné. To není problém článku.

Editované 12.7.2019 19:18
Odpovedať
12.7.2019 19:17
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Odpovedá na David Čápka
Jakub Podskalský:12.7.2019 19:37

Chápu, šlo mi jen o to, že nevím jak postupovat. Pro pochopení je třeba nakouknout o 12 lekcí dopředu, tam zas ale můžou být věci, které se probírají mezi těmito dvěma. Zkusím tohle teda zatím neřešit a jít dál. Stejně si nikdy nebudu pamatovat úplně všechno a budu muset googlit pokaždé, kdy už budu psát kód.

 
Odpovedať
12.7.2019 19:37
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 7 správy z 7.