Letní akce! Lákají tě IT školení C#, Javy a PHP v Brně? Přihlas se a napiš nám do zpráv kód "BRNO 500" pro slevu 500 Kč na libovolný brněnský kurz. Lze kombinovat se slevami uvedenými u školení i použít pro více kurzů. Akce končí 28.7.

Lekce 27 - Bootstrap - Grid systém Bootstrapu

HTML a CSS Bootstrap Bootstrap - Grid systém Bootstrapu

ONEbit hosting 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

Gratuluji! Nyní ovládáte mocný nástroj, který vám umožní tvořit šablony mnohem rychleji, než to zvládnou ostatní, kteří jej neznají. A to se vám určitě bude hodit! Vývoj softwaru zabere spoustu času, když jej někde dokážete ušetřit, budete úspěšnější :)


 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
1 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.
Miniatura
Všechny články v sekci
Bootstrap
Aktivity (3)

 

 

Komentáře

Avatar
David Koníček:10. ledna 10:56

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

Odpovědět 10. ledna 10:56
Věř, běž a dokážeš!
Avatar
Štěpán Karlovec:20. května 21:02

Super seriál ! děkuji..

 
Odpovědět 20. května 21:02
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 2 zpráv z 2.