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 26 - Bootstrap - Úvod do grid systémů

HTML a CSS Bootstrap Bootstrap - Úvod do grid systémů

Unicorn College ONEbit hosting 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, Bootsrap - Multimediální objekty a kontejnery, jsme se zabývali mediálními objekty. Dnes jsme se dostali až k dlouho slibovanému grid systému Bootstrapu. Dnešní a příští lekce patří mezi ty nejpřínosnější z celého kurzu, naučíte se používat velmi jednoduchý a účinný nástroj. Grid systém Bootstrapu je od verze 4 postaven na flexboxu, jeho starší verze používali CSS vlastnost float.

Úvod do grid systémů

Na začátek by se slušilo problematiku gridů nastínit, začněme hezky od začátku. Rozdělení obsahu do pravidelné mřížky se netýká jen webů, ale tento princip je používán v podstatě již od středověku a to nejen pro text, ale i pro ilustrace. Nalezneme jej v novinách a časopisech. Možná víte, že loga většiny firem jsou také vytvořena na základě pravidelných tvarů, které k sobě lícují. Kromě toho, že mřížka plní estetickou funkci, je pro lidi takto zarovnaná informace mnohem lépe zpracovatelná. Podívejme se na layout populární Bootstrap šablonu Gantella pro administraci webu:

Šablona Gantella pro Bootstrap

Vidíme, že layout je rozdělený do šesti pomyslných sloupců. Všechny kontejnery na stránce mají potom velikost jen a pouze v násobcích velikosti těchto sloupců. Celý web působí velmi celistvým dojmem.

Pokud budeme prvky pozicovat na stránku jak nás napadne, můžeme dopadnout jako legendární stránky Penzionu na Hrubých lukách, dnes již naštěstí nahrazené jinou verzí.

Stránky penzionu na Hrubých lukách

Tabulky

V dobách již dávno minulých se pro tvorbu layoutů internetových stránek používaly tabulky. Jejich výhodou bylo, že obsah webu byl opticky zarovnán do tabulky, takže rozložení působilo pravidelně a vyváženě. Taková tabulková kostra zastaralého webu by mohla vypadat např. takto:

<table>
        <tr>
                <td colspan="2"><h1>Hlavička</h1></td>
        </tr>
        <tr>
                <td><h2>Menu</h2></td>
                <td>Obsah...</td>
        </tr>
        <tr>
                <td colspan="2"><small>Patička</small></td>
        </tr>
</table>

Výsledek v prohlížeči:

Popovery v Bootstrap
tabulkovy_lay­out.html

Tabulky se pro pozicování prvků na stránce již nepoužívají kvůli 2 závažným nedostatkům.

  • Nejsou sémantické - Tabulku vyhledávače chápou jako nějaký zdroj dat. Pokud do nich vložíme celou stránku nebo i její část s obsahem, nebudou tomu pravděpodobně rozumět, což se nám může projevit nižší návštěvností.
  • Nejsou responzivní - Pokud stránku s tabulkou zmenšíme, tabulka se nezalomí, ale zobrazí se ošklivý posuvník. Na mobilních zařízeních by byl tabulkový web téměř nepoužitelný.

Grid systémy

Webdesigneři přemýšleli nad tím, jak vytvořit mřížku bez elementu <table>, aby se vyhnuli jeho nedostatkům. Tím se vyvinuly tzv. grid systémy. To jsou předpřipravené třídy, které přiřazujeme elementům <div> a ty následně získávají určitou šířku. Systémy obvykle fungují tak, že rodičovský element rozdělí do 12 sloupců. Dříve se k tomu využívala šířka zadaná v procentech, jeden sloupec tedy zabíral 8,33%. Dnes se využívá flexbox. Číslo 12 bylo vybráno proto, že má mnoho dělitelů. Do kontejneru tak můžeme vložit:

  • Element přes celou šířku (velikost 12 sloupců)
  • Element přes polovinu (velikost 6 sloupců)
  • Element přes třetinu šířky (velikost 4 sloupce)
  • Element přes čtvrtinu šířku (velikost 3 sloupců)
  • Element přes 1/6 šířky (velikost 2 sloupců)
  • A element přes 1/12 šířky (velikost 1 sloupců)

Samozřejmě můžeme nastavovat i násobky těchto hodnot, např. vložit do kontejneru element, který zabere 2/3 obsahu a tudíž bude nastavený na šířku 8 sloupců a pod. Naopak nejsme schopni vložit např. 5 elementů vedle sebe, můžeme vložit buď 4 nebo 6. Toto omezení je daní za estetickou pravidelnost danou mřížkou.

Zkusme si příklad s Bootstrapovým gridem:

<div class="container-fluid bg-light">
        <div class="row">
                <div class="col-3 border bg-success text-white">
                        Čtvrtina
                </div>
                <div class="col-3 border bg-success text-white">
                        Čtvrtina
                </div>
                <div class="col-6 border bg-warning">
                        Polovina
                </div>
        </div>
</div>

S kontejnery jsme se již seznámili. Pokud pracujeme s gridem, budeme definovat jeho řádky a sloupce. Řádek obaluje sloupce a definujeme jej jako <div> se třídou .row. Sloupce můžeme definovat několika způsoby, ten nejjednodušší je uvést třídu col- a za pomlčku uvést kolik sloupců gridu má sloupec zabírat. Pokud bychom chtěli všechny sloupce stejně široké, přiřadili bychom jim jen třídu .col.

V příkladu první 2 sloupce zabírají 3/12, tedy čtvrtinu obsahu. Pokud jste si mysleli, že jako webdesigneři nebudete potřebovat zlomky, budete možná trochu zklamaní :) Další zabírá 6/12 gridu, tedy polovinu.

Výsledek v prohlížeči:

Grid v Bootstrap
grid.html

Grid výše zatím není responzivní, jak toho docílit si ukážeme v posledním dílu. Již příště tedy své znalosti frameworku Bootstrap dovršíme a to lekcí Bootstrap - Grid systém Bootstrapu. Těšte se, bude to jízda! :)


 

 

Č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
Miniatura
Následující článek
Bootstrap - Grid systém Bootstrapu
Aktivity (4)

 

 

Komentáře

Avatar
Honza Bittner
Šupák
Avatar
Honza Bittner:28.12.2017 15:18

Design toho penzionu se mi líbí. Asi si udělám portfolio v obdobném stylu... :-`

Odpovědět 28.12.2017 15:18
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Honza Bittner
David Čápka:28.12.2017 16:38

A všimni si jak pečlivě napozicovali ikonky na sluneční paprsky :-O Měl jsem to sem dát jako gif, takhle není vidět, že se všechny ty ikonky ještě profesionálně animují :-D

Odpovědět  +2 28.12.2017 16:38
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
IT Man
Redaktor
Avatar
Odpovídá na David Čápka
IT Man:28.12.2017 16:46

Teď jsem se na to sám podíval ... je možná lepší, že to zde není jako gif.

Odpovědět 28.12.2017 16:46
Cokoliv a kdokoliv může jednou uspět.
Avatar
Petr Balzer
Člen
Avatar
Odpovídá na IT Man
Petr Balzer:28.12.2017 20:11

možná lepší?
Já bych řekl, že to je přímo výhra, protože z těch blikajících ikonek, textu a dalších nesmyslů bude každému spíše blbě (mě z toho bolí oči).

Jinak skvělí příklad, jak by opravdu web neměl vypadat...

Odpovědět  +1 28.12.2017 20:11
Ono to ještě funguje?!?
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 4 zpráv z 4.