Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

2. díl - Bootstrap - Reboot

HTML a CSS Bootstrap Bootstrap - Reboot

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, Úvod do CSS frameworku Bootstrap, jsme si vysvětlili proč je dobré používat CSS framework a vyzkoušeli si editovat jednu z šablon CSS frameworku Bootstrap. Během online kurzu si stručně popíšeme jednotlivé části tohoto frameworku, abyste získali přehled v čem všem vám může pomoci a jak se dané styly používají. Uvidíte, že toho nabízí opravdu mnoho.

Reboot

Začněme hezky od podlahy. Již jsme hovořili o tom, že HTML má nějaké základní styly. Ty nejsou z historických důvodů vždy úplně chytře nastavené a také se může stát, že budou v různých prohlížečích nastavené různě nebo že bude jejich používání neefektivní. Bootstrap obsahuje tzv. Reboot, což je kód definující výchozí styly. Reboot je postavený na projektu Normalize, který si klade za cíl nastavit optimální výchozí styly, aby byla tvorba designu co nejjednodušší. Někdy se tomuto nastavení obecně říká i CSS reset. Reboot upravuje přímo výchozí styl elementů bez nutnosti přidat k nim jakékoli třídy a to následujícím způsobem:

Box sizing

Vlastnost box-sizing je globálně nastavena na hodnotu border-box, čímž se velikost elementů vždy počítá jako celková velikost i s rámečkem a paddingem. Jistě znáte z boxmodelu. Takovéto zadávání je mnohem intuitivnější a umožňuje používat i procenta, protože např. `width: 50%; zabere opravdu polovinu stránky i když má element rámeček a vnitřní okraj. Pokud o tomto nevíte, práce s Bootstrapem by vás mohla značně překvapit.

Boxmodel v CSS

Jednotky rem

Font v <body> je nastaven na 1rem. Jednotka rem je preferována a označuje relativní velikost k velikosti písmene M kořenového elementu stránky <html>. Tuto velikost Bootstrap neupravuje, ale definuje podle ní všechny další rozměry. Když si uživatel nastaví větší písmo, třeba že špatně vidí, nebo že používá mobilní zařízení, všechna písma používající jednotku rem se přeškálují také a škálovat se budou např. i marginy. Můžete si zkusit nastavit elementu <html> jinou velikost a uvidíte, jak se přeškáluje i grid a další součásti Bootstrapu. U vlastních stylů je dobré tyto konvence také dodržovat.

Styly pro body

<body> se nastavuje výchozí font-family, line-height, text-align a background-color.

Font stack

V posledních letech si Apple, Microsoft a Google vytvořily pěkné fonty a používají je jako výchozí na svých zařízeních. Proč je nepoužívat i na webu, když jsou k dispozici? Bootstrap definuje tzv. "Native font stack", kde jsou tyto fonty vyjmenované a jeden z nich se na některém systému vždy najde. Jsou to fonty San Francisco (Apple), Segoe UI (Windows) a Roboto (Google Android). Další systémy spadnou na "Helvetica Neue", Arial a sans-serif. Podporovány jsou také Emoji fonty "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol". Můžete tedy vkládat barevné emoji do vašich textů, aniž byste cokoli linkovali.

Svislé okraje

Bootstrap doporučuje u elementů nezadávat oba svislé okraje (margin-top a margin-bottom), protože splývají dohromady a nikdy nevíte jak velká mezera mezi dvěma elementy ve skutečnosti bude. To je další konvence, kterou byste měli dodržovat, tedy zadávat pouze margin-bottom. Bootstrap toto nastaví např. pro všechny nadpisy <h1><h6>, kterým odstraní margin-top.

Výchozí nadpisy v Bootstrap
nadpisy.html

To samé platí i pro odstavce <p> a seznamy <ul>, <ol>, <dl>. Vnořené seznamy dokonce nemají vůbec žádný margin. Položky definičního seznamu <dd> mají levý margin 0 a spodní margin 0.5rem.

Výchozí seznamy v Bootstrap
seznamy.html

Tabulky

Tabulky mají border-style nastavený na collapse, upravené vykreslování <caption> a unifikovaný text-align.

Výchozí tabulky v Bootstrap
tabulky.html

Formuláře

<fieldset> elementy nemají rámeček ani okraje, aby mohly sloužit jen jako wrappery, <legend> je ostylovaný jako nadpis, <labely> jsou inline bloky, aby mohly mít okraje. Normalizovány jsou i další elementy jako <input> , <select>, <textarea> a <button>. Pokud jste někdy bojovali za stejnou velikost elementu <select> v různých prohlížečích na různých operačních systémech, jistě Reboot oceníte :) Všechny textarea elementy lze roztahovat pouze na výšku, protože roztahování na šířku často způsobí vytečení elementu ze stránky.

Výchozí formuláře v Bootstrap
formulare.html

Další elementy

Velmi podobné změny jsou provedeny také v elementech <address> (font není kurzíva a byl přidán margin-bottom). Jednotlivé řádky adresy bychom měli oddělovat pomocí <br>. <blockquote> má opět dolní margin, <abbr> získal tečkované podtržení. Možná znáte atribut hidden z HTML 5, který slouží ke skrývání elementů. Bootstrap k jeho stylu dodává ještě !important, aby nedošlo k jeho přepsání. Ovšem pozor, tato technika není kompatibilní se skrýváním a odkrýváním elementů pomocí jQuery. K tématu viditelnosti se dostaneme dále v kurzu. Všem mobilním ovládacím prvkům je nastaveno touch-action: manipulation pro odchycení nechtěných dvojkliků v Internet Exploreru a Edge.

V příští lekci, Bootstrap - Typografie, se budeme zabývat typografií.


 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
8 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 se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Předchozí článek
Úvod do CSS frameworku Bootstrap
Miniatura
Všechny články v sekci
Bootstrap
Miniatura
Následující článek
Bootstrap - Typografie
Aktivity (4)

 

 

Komentáře

Avatar
David Dostal
Redaktor
Avatar
David Dostal:6. listopadu 22:08

Je super, že tu popisuješ i jak jednotlivé styly fungují. Většina návodů na bootstrap popisuje jen třídy jak něco ostylovat a toto jim dost chybí. Spousta webů podle toho pak i vypadá. Jsem rád, že tu na Bootstrap vzniká kvalitní seriál, díky :-)

 
Odpovědět 6. listopadu 22:08
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 1 zpráv z 1.