Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 2 - Bootstrap - Reboot

V minulé lekci, Úvod do CSS frameworku Bootstrap, jsme si vysvětlili, proč bychom měli frameworky používat, představili jsme si její šablony a ukázali, kde je najít zdarma.

V tomto Bootstrap tutoriálu si stručně popíšeme základní a neoddělitelnou součást stylování frameworku Bootstrap nazvanou Reboot, abychom získali přehled v čem všem nám může framework pomoci a jak se dané styly používají.

Normalizace stylů v Bootstrapu

Pro využívání frameworku je důležité pochopit jeho koncepty a styly, které využívá. Důležitost klíčových konceptů, které Bootstrap používá, jako jsou responzivní design, mobilní přístupnost, databáze komponentů a CSS stylů, možnost customizace a snadné použití, jsme si již vysvětlili. Nyní se zaměříme na klíčovou součást Bootstrapu, která je pro jeho fungování nezbytná. Jde o normalizaci stylování prostřednictvím Rebootu. Díky němu v Bootstrapu unifikujeme principy box modelu, typografie, používání okrajů a také způsoby, jakými Bootstrap upravuje a zjednodušuje styling tabulek, formulářů a dalších HTML elementů.

Reboot

Reboot je sada základních CSS pravidel, která zajišťuje, že všechny webové stránky vypadají konzistentně napříč různými webovými prohlížeči. Reboot zjednodušuje vývojářům práci tím, že eliminuje potřebu psát cross-browser kompatibilní kód pro základní elementy. Kromě vizuální konzistence, Reboot umožňuje, aby webové stránky byly nejen vizuálně přitažlivé, ale také funkční a přístupné pro všechny uživatele. 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. Nyní vysvětlíme potřebné principy Rebootu pro naši další práci s Bootstrapem.

Box sizing

Vlastnost box-sizing, která určuje, jak prohlížeče vypočítávají celkovou šířku a výšku elementů, určitě známe z box modelu. Je totiž klíčová pro správné fungování layoutů ve webovém designu. V Bootstrapu je globálně nastavená vlastnost box-sizing na hodnotu border-box, čímž se velikost elementů vždy počítá jako celková velikost i s rámečkem a paddingem. Takovéto zadávání je mnohem intuitivnější a umožňuje používat i procenta, protože například width: 50%; zabere opravdu polovinu stránky, i když má element rámeček a vnitřní okraj:

Boxmodel v CSS - Kompletní kurz CSS frameworku Bootstrap

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ůžeme si zkusit nastavit elementu <html> jinou velikost písma a uvidíme, 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

Základní styly, které se aplikují na <body> jsou font-family, font-size, line-height, text-align a background-color. V rámci používání těchto základních stylů se často setkáme také se předdefinovanou sadou písem (tzv. font stack) pro různé webové stránky.

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ůžeme tedy vkládat barevné emoji do vašich textů, aniž bychom cokoli linkovali.

Okraje

V Bootstrapu je zvláštní pozornost věnována okrajům (margins) a odsazením (padding), aby bylo zajištěno konzistentní a intuitivní chování napříč různými prohlížeči. Reboot obvykle zahrnuje resetování marginů a paddingů na elementech HTML, jako jsou <body>, nadpisy <h1><h6> a další. Tato pravidla pomáhají předcházet nejednoznačnosti výsledného vertikálního prostoru mezi prvky, jelikož okraje mohou splývat.

Bootstrap doporučuje u elementů nezadávat oba okraje (margin-top a margin-bottom), protože splývají dohromady a nikdy nevíme jak velká mezera mezi dvěma elementy ve skutečnosti bude. To je další konvence, kterou bychom měli dodržovat, tedy zadávat pouze margin-bottom. Bootstrap toto tedy 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 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 jsou rovněž stylovány specifickými pravidly, aby zajišťovaly konzistentní a čistý vzhled. Mají definovaný border-style na collapse, což znamená, že rámečky mezi buňkami tabulky jsou sloučeny do jednoho tenčího rámečku. Namísto toho, aby byly zobrazeny jako oddělené rámy pro každou buňku. Dále mají upravené vykreslování <caption> a unifikovaný text-align, který zajišťuje, že text ve všech buňkách tabulky je uniformně zarovnán, což zvyšuje přehlednost a usnadňuje čtení dat v tabulce:

Výchozí tabulky v Bootstrap
tabulky.html

Formuláře

Elementy <fieldset> nemají rámeček ani okraje, aby mohly sloužit jen jako wrappery. Element <legend> je ostylovaný jako nadpis. Elementy <label> jsou nastaveny jako inline bloky, což jim umožňuje mít okraje. Normalizovány jsou i další elementy jako <input>, <select>, <textarea> a <button>. Pokud jsme 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íme :) 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 a line-height). Jednotlivé řádky adresy bychom měli oddělovat pomocí <br>. <blockquote> má opět dolní margin, <abbr> získal tečkované podtržení. Atribut hidden z HTML 5 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í. Ukážeme si první třídy, kterými stylujeme nadpisy a podnadpisy, citace, zkratky a seznamy. Seznámíme se s utility třídami.


 

Předchozí článek
Úvod do CSS frameworku Bootstrap
Všechny články v sekci
Kompletní kurz CSS frameworku Bootstrap
Přeskočit článek
(nedoporučujeme)
Bootstrap - Typografie
Článek pro vás napsal David Hartinger
Avatar
Uživatelské hodnocení:
701 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity