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í.

2. diel - Bootstrap - Reboot

V minulej lekcii, Úvod do CSS frameworku Bootstrap , sme si vysvetlili prečo je dobré používať CSS framework a vyskúšali si editovať jednu z šablón CSS frameworku Bootstrap. Počas online kurzu si stručne popíšeme jednotlivé časti tohto frameworku, aby ste získali prehľad v čom všetkom vám môže pomôcť a ako sa dané štýly používajú. Uvidíte, že toho ponúka naozaj veľa.

Reboot

Začnime pekne od podlahy. Už sme hovorili o tom, že HTML má nejaké základné štýly. Tie nie sú z historických dôvodov vždy úplne chytro nastavené a tiež sa môže stať, že budú v rôznych prehliadačoch nastavenej rôzne alebo že bude ich používanie neefektívne. Bootstrap obsahuje tzv. Reboot, čo je kód definujúce predvolené štýly. Reboot je postavený na projekte Normalize, ktorý si kladie za cieľ nastaviť optimálnu východiskovú štýly, aby bola tvorba dizajnu čo najjednoduchšie. Niekedy sa tomuto nastavenia všeobecne hovorí aj CSS reset. Reboot upravuje priamo predvolený štýl elementov bez nutnosti pridať k nim akejkoľvek triedy a to nasledujúcim spôsobom:

Box sizing

Vlastnosť box-sizing je globálne nastavená na hodnotu border-box, čím sa veľkosť elementov vždy počíta ako celková veľkosť aj s rámčekom a padding. Iste poznáte z boxového modelu. Takéto zadávanie je oveľa intuitívnejšie a umožňuje používať aj percenta, pretože napr. `Width: 50%; zaberie naozaj polovicu stránky aj keď má element rámček a vnútorný okraj. Pokiaľ o tomto neviete, práca bootstrappingom by vás mohla značne prekvapiť.

Boxového modelu v CSS - Kompletný kurz CSS frameworku Bootstrap

Jednotky rem

Font v <body> je nastavený na 1rem. Jednotka rem je preferovaná a označuje relatívnu veľkosť k veľkosti písmena M koreňového elementu stránky <html>. Túto veľkosť Bootstrap neupravuje, ale definuje podľa nej všetky ďalšie rozmery. Keď si používateľ nastaví väčšie písmo, napríklad že zle vidí, alebo že používa mobilné zariadenie, všetky písma používajúci jednotku rem sa přeškálují tiež a škálovať sa budú napr. Aj marginy. Môžete si skúsiť nastaviť elementu <html> inú veľkosť písma a uvidíte, ako sa přeškáluje aj grid a ďalšie súčasti Bootstrap. U vlastných štýlov je dobré tieto konvencie tiež dodržiavať.

Štýly pre body

<body> sa nastavuje východiskový font-family, line-height, text-align a background-color.

Font stack

V posledných rokoch si Apple, Microsoft a Google vytvorili pekné fonty a používajú ich ako predvolený na svojich zariadeniach. Prečo je nepoužívať aj na webe, keď sú k dispozícii? Bootstrap definuje tzv. "Native font stack", kde sú tieto fonty vymenované a jeden z nich sa na niektorom systéme vždy nájde. Sú to fonty San Francisco (Apple), Sego UI (Windows) a Roboto (Google Android). Ďalšie systémy spadnú na "Helvetica Neue", Arial a sans-serif. Podporované sú tiež Emoji fonty "Apple Color Emoji", "Sego UI Emoji", "Sego UI Symbol". Môžete teda vkladať farebné emoji do vašich textov, bez toho aby ste čokoľvek linkovali.

Zvislé okraje

Bootstrap odporúča u elementov nezadávať oba zvislé okraje (margin-top a margin-bottom), pretože splývajú dohromady a nikdy neviete aká veľká medzera medzi dvoma elementmi v skutočnosti bude. To je ďalšia konvencie, ktorú by ste mali dodržiavať, teda zadávať iba margin-bottom. Bootstrap toto nastaví napr. Pre všetky nadpisy <h1><h6>, ktorým odstráni margin-top.

Výchozí nadpisy v Bootstrap
nadpisy.html

To isté platí aj pre odseky <p> a zoznamy <ul>, <ol>, <dl>. Vnorené zoznamy dokonca nemajú vôbec žiadny margin. Položky definičného zoznamu <dd> majú ľavý margin 0 a spodnú margin 0.5rem.

Výchozí seznamy v Bootstrap
seznamy.html

Tabuľky

Tabuľky majú border-style nastavený na collapse, upravené vykresľovanie <caption> a unifikovaný text-align.

Výchozí tabulky v Bootstrap
tabulky.html

Formuláre

<fieldset> elementy nemajú rámček ani okraje, aby mohli slúžiť len ako wrappery, <legend> je ostylovaný ako nadpis, <labely> sú inline bloky, aby mohli mať okraje. Normalizované sú aj ďalšie elementy ako <input>, <select>, <textarea> a <button>. Ak ste niekedy bojovali za rovnakú veľkosť elementu <select> v rôznych prehliadačoch na rôznych operačných systémoch, iste Reboot oceníte :) Všetky <textarea> elementy možno rozťahovať iba na výšku, pretože rozťahovanie na šírku často spôsobí vytečeniu elementu zo stránky.

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

Ďalšie elementy

Veľmi podobné zmeny sú vykonané tiež v elementoch <address> (font nie je kurzíva a bol pridaný margin-bottom). Jednotlivé riadky adresy by sme mali oddeľovať pomocou <br>. <blockquote> má opäť dolná margin, <abbr> získal bodkované podčiarknutie. Možno poznáte atribút hidden z HTML 5, ktorý slúži na skrývanie elementov. Bootstrap k jeho štýlu dodáva ešte !important, aby nedošlo k jeho prepísanie. Avšak pozor, táto technika nie je kompatibilný so skrývaním a odkrývaním elementov pomocou jQuery. K téme viditeľnosti sa dostaneme ďalej v kurze. Všetkým mobilným ovládacím prvkom je nastavené touch-action: manipulation pre odchytenie nechcených dvojklik v Internet Exploreri a Edge.

V budúcej lekcii, Bootstrap - Typografia , sa budeme zaoberať typografiou.


 

Predchádzajúci článok
Úvod do CSS frameworku Bootstrap
Všetky články v sekcii
Kompletný kurz CSS frameworku Bootstrap
Preskočiť článok
(neodporúčame)
Bootstrap - Typografia
Článok pre vás napísal David Hartinger
Avatar
Užívateľské hodnotenie:
4 hlasov
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 sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity