80 % bodů zdarma na online výuku díky naší Letní akci!
Pouze tento týden sleva až 80 % na e-learning týkající se PHP

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

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

Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

<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
Článok pre vás napísal David Čápka
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
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 sa informačné technológie naučil na Unicorn College - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity (1)

 

 

Komentáre

Avatar
David Dostal
Redaktor
Avatar
David Dostal:6.11.2017 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 :-)

 
Odpovedať
6.11.2017 22:08
Avatar
Martin Štěpaník:28.2.2018 16:49

Dobrý den, potřeboval bych poradit. Správně se mi ukazuje navbar tzv. "burger", ale když na něj kliknu, tak se nic neděje, collapse mam nastaveno. Další problém mám s Carousel, první obrázek načte, ale přepínat na další už nelze. Prohlížeč používám Chrome. Setkal jste se s tímhle prosím někdo? děkuji za případnou pomoc.

Hlavička nadefinovaná zde.

<link rel="stylesheet" href="https:/­/maxcdn.bootstrap­cdn.com/bootstrap/3­.3.7/css/boot­strap.min.css">
<link rel="stylesheet" href="https:/­/cdnjs.cloudfla­re.com/ajax/lib­s/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="http://a­jax.googleapis­.com/ajax/lib­s/jquery/1.4.2/jqu­ery.min.js" type="text/ja­vascript"></scrip­t>
<script src="https://­maxcdn.bootstrap­cdn.com/bootstrap/3­.3.7/js/bootstrap­.min.js"></script

 
Odpovedať
28.2.2018 16:49
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!
Avatar
d.svarc
Člen
Avatar
Odpovedá na Martin Štěpaník
d.svarc:21.3.2018 20:28

Zdravím Martine, s největší pravděpodobností to vypadá na špatně nalinkované .js (JavaScript). Linkují se úplně dole za tagem <footer> v tagu .<script> bude to vypadat nějak takhle:
...

<!-- Bootstrap core JavaScript
=============­========================­============= -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://­code.jquery.com/jqu­ery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3U­ENzmM7KCkRr/rE­9/Qpg6aAZGJwFDMVNA/Gp­GFF93hXpG5KkN" crossorigin="a­nonymous"></scrip­t>
<script>window­.jQuery || document.write('<script src="js/jquery-slim.min.js"><\/scrip­t>')</script>
<script src="js/popper­.min.js"></scrip­t>
<script src="js/bootstrap­.min.js"></scrip­t>
</body>
</html>

Tak jde, v tomhle případě, o ten poslední bootstrap.min.js. Zkontrolovat zda je na své cestě přítomen :-)

Jinak děkuji autorovi za krásný a kvalitní Bootstrap seriál :-)

 
Odpovedať
21.3.2018 20:28
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 3 správy z 3.