Lekce 6 - Bootstrap - Grid systém Bootstrapu

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Bootstrap - Úvod do grid systémů, jsme si představili grid systémy. V dnešním, posledním tutoriálu kurzu CSS frameworku Bootstrap, přejdeme ke gridům Bootstrapu. Jako vždy si na praktických ukázkách vyzkoušíme co vše s nimi můžeme dělat.

Responzivní třídy

To krásné na gridu je, že se nejen zalomí v případě, že se na stránku nevejde, ale že si můžeme nastavit kdy se má zalomit. Kromě tříd ve tvaru col-{číslo} můžeme přiřazovat i responzivní třídy jako např. .col-sm-3, což konkrétně znamená, že od malých zařízení a větších bude sloupec zabírat 3/12 gridu.

Místo příkladu z konce minulé lekce nyní použijme třídy se specifikovaným breakpointem a sloupce definujme pouze od středně velkých viewportů dále. 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.

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

Grid v Bootstrap
responzivni_grid­.html

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. Jak jsou která zařízení velká a jaké mají breakpointy zkratky jsme si definovali v lekci Bootstrap - Typografie. Pro úplnost si zmiňme, že breakpointy jdou po sobě jako:

  • sm
  • md
  • lg
  • xl

Ukažme si ještě jeden příklad a to když 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. Chování si můžete ověřit zmenšováním okna prohlížeče.

<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

Od středně velkých zařízení zabírají oba sloupce polovinu kontejneru. Na menších zařízeních zabírá první <div> 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í paddingu po obou stranách každého sloupce a negativních marginů 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 byste potřebovali sloupce v gridu nějak zarovnat, což by se teoreticky stávat příliš nemělo, platí pro sloupce kontejneru to samé jako jsme si říkali v detailních lekcích o Flex utilities. Elementům se třídou .row tedy přiřazujeme třídy jako .align-items-center, .justify-content-center nebo .align-self-end a podobně. 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-{číslo}, kde číslo nabývá hodnot 1 - 12. To vše bychom již měli znát z flex utilities. Pro kompletnost těchto materiálů si 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é marginy

Z flex utilities bychom měli znát i hack s automatickými marginy. Pokud některému sloupci nastavíme třídu .ml-auto nebo .mr-auto, posune se zbytek sloupců nalevo, 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ázka:

Grid v Bootstrap
grid_auto_mar­giny.html

V příští lekci, Bootstrap - Tabulky, se podíváme jak se v Bootstrapu stylují tabulky,


 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
6 hlasů
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 sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Předchozí článek
Bootstrap - Úvod do grid systémů
Všechny články v sekci
Kompletní kurz CSS frameworku Bootstrap
Miniatura
Následující článek
Cvičení k 1.-6. lekci Bootstrap CSS frameworku
Aktivity (5)

 

 

Komentáře

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! ;-)

Odpovědět  +1 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..

 
Odpovědět  +1 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.

 
Odpovědět  +1 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>

 
Odpovědět 16.11.2018 13:08
Avatar
Jakub Podskalský:12. července 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.

 
Odpovědět 12. července 19:10
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Jakub Podskalský
David Čápka:12. července 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.

Editováno 12. července 19:18
Odpovědět 12. července 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
Odpovídá na David Čápka
Jakub Podskalský:12. července 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.

 
Odpovědět 12. července 19:37
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.

Zobrazeno 7 zpráv z 7.