3. diel - Bootstrap - Typografia

V minulej lekcii, Bootstrap - Reboot , sme si popísali ako Bootstrap resetuje CSS štýly pomocou Reboot. Už vieme, že zavádza určité nové konvencie ako napr. Používanie jednotiek rem, iba spodných okrajov alebo že globálne prepína hodnotu vlastnosti box-sizing. V dnešnej lekcii sa budeme baviť už o explicitných štýloch, teda tých, ktorých platnosť vynútime pridaním CSS triedy Bootstrap k danému elementu.

Typografie

Začneme s typografiou. Predvolené nastavenie typografie, teda textu a elementov obsahujúcich text, už poznáme z reboot. Bootstrap nám samozrejme ďalej poskytuje triedy, ktorými môžeme správanie elementov ešte upravovať. Poďme si ich popísať.

Nadpisy

Nadpisy sú síce už ostylované, ale občas sa nám môže hodiť použiť štýl nadpisu aj na element, ktorý nie je priamo nadpisom.

Nadpisové triedy

Bootstrap poskytuje triedy .h1 až .h6, ktoré nastylují ľubovoľný element ako príslušný nadpis:

Ak potrebujeme ešte výraznejšie text, ktorý zo stránky doslova vyčnieva, môžeme využiť tried .display-1 až .display-4:

Zvýraznenie odsekov

Podobne môžeme opticky zvýrazniť aj odseky a to pridaním triedy .lead:

Podnadpisy

Menšie, šedý nadpis môžeme vedľa nadpisu zobraziť pomocou elementu <small> sa triedou .text-muted:

Skratky

Pre skratkové element <abbr> máme k dispozícii triedu .initialism, ktorá zmenší text na 90%. Je to zrejme z dôvodu, že skratky sú často písané veľkými písmenami a opticky tak z textu vyčnievajú, čo je nechcený efekt. Pokiaľ je skratka malými písmenami, triedu nepridávame. Význam skratky sa zobrazí pri podržaní kurzora nad skratkou.

Citácie

Elementom <blockquote> priraďujeme triedu .blockquote. Ak chceme spomenúť aj zdroj citácie, použijeme v citácii element <footer> s triedou .blockquote-footer.

Zoznamy

Čo sa týka zoznamov, okrem počiatočného štýle je môžeme upravovať pomocou ďalších tried.

Zoznamy bez odrážok

Určite ste sa už niekedy dostali do situácie, kedy ste potrebovali skryť zarážky nejakého zoznamu, napr. Navigácia. K tomu Bootstrap poskytuje triedu .list-unstyled. Nefunguje rekurzívne, ak by ste teda potrebovali skryť zarážky vo viacúrovňovom zozname, je potrebné ju priradiť aj všetkým vnoreným zoznamom.

Inline zoznamy

Podobná situácia je výpis prvkov zoznamu vedľa seba miesto pod seba. To docielime priradením triedy .list-inline elementu zoznamu a triedy .list-inline-item elementom <li>.

Kód

Pripravené štýly máme aj pre bežné tagy pre kód alebo vstup / výstup.

Blokový kód

Ak potrebujeme niekam na stránku vložiť časť zdrojového kódu, vkladáme ju ako sme boli doteraz zvyknutí, teda do elementov <pre> a <code>, aby sme dosiahli korektný sémantiky. Bootstrap nám pre blokové kódy ponúka len triedu .pre-scrollable, čím sa elementu <pre> nastaví maximálna výška na 350px a zvyšok obsahu sa roluje zvisle. Nezabudnite v kóde previesť špeciálne HTML znaky na entity.

Premenné, vstupy a výstupy

Předstylované máme elementy <code> použité samostatne ako riadkový kód, ďalej elementy <var> pre premenné, <kbd> pre vstup z klávesnice a <samp> pre ukážkový výstup.

Utility triedy

Okrem tried pre konkrétny elementy v Bootstrap nájdeme tiež tzv. Utility triedy. Sú to malí pomocníci, ktoré môžeme využiť takmer kdekoľvek a ušetrí nám zbytočné písanie vlastných štýlov pre triviálne formátovanie. Všetky štýly používajú vnútorne !important a majú teda vždy "posledné slovo".

Zarovnanie textu

Pre zarovnanie textov môžeme využiť tried:

• .text-left - Zarovnanie doľava
• .text-center - Zarovnanie na stred
• .text-right - Zarovnanie doprava
• .text-justify - Zarovnanie do bloku

Zarovnanie môžeme upresniť aj pre rôzne Viewport, teda napr. Zarovnávať text na stred iba od tabletov a na mobiloch ho nechať zarovnaný vľavo. K detailnom popise Viewport sa v našom kurze Bootstrap ešte len dostaneme. Zarovnanie textu na stred by sa pre rôzne Viewport definovalo nasledovne:

• .text-sm-center - Text je zarovnaný na stred na malých zariadeniach a väčších
• .text-md-center - Text je zarovnaný na stred na stredných zariadeniach a väčších
• .text-lg-center - Text je zarovnaný na stred na veľkých zariadeniach a väčších
• .text-xl-center - Text je zarovnaný na stred na extra veľkých zariadeniach a väčších

Štýly sú vnútorne implementované vlastnosťou text-align a môžeme ich použiť samozrejme aj na obrázky v nejakom kontajneri a ďalšie inline elementy.

Body zlomu

Keď sa bavíme o malých, stredne veľkých, veľkých a extra veľkých zariadeniach, určite by bolo vhodné spomenúť ako sú tieto zariadenia definovaná. Bootstrap zavádza tzv. Hraničnými (body zlomu), čo je určitá šírka obrazovky v pixeloch, od ktorej ju chápe ako väčšie zariadenia. V predvolenom nastavení sa jedná o tieto body:

Extra malé zariadenie	malé zariadenie	stredne veľké	veľké	extra veľké
do 575px	576px - 767px	768px - 991px	992px - 1199px	1200px a viac
telefón na výšku	telefón na šírku	tablet	notebook / desktop	desktop s veľkým monitorom

Medzi stĺpci tabuľky sú práve hraničnými, zľava sm, md, lg, xl.

Zalamovanie textu

Zalamovanie textu môžeme zabrániť pomocou triedy .text-nowrap.

Skracovanie textu

Ak nás naopak trápia dlhý text, môžeme ho skrátiť pomocou triedy .text-truncate. Vnútorne používa CSS 3 vlastnosť text-overflow s hodnotou ellipsis. Skracovanie textu funguje iba s elementmi, ktoré majú vlastnosť display nastavenú na block alebo inline-block.

Transformácia textu

Text môžeme transformovať na VEĽKÉ alebo malé písmená pomocou CSS tried:

• .text-lowercase - Text iba malými písmenami
• .text-uppercase - TEXT LEN VEĽKÝMI PÍSMENAMI
• .text-capitalize - Zväčší Vždy Prvý Písmeno Slová

Tučný text a kurzíva

Opticky môžeme font upravená pomocou sady niekoľkých ďalších tried. Takýto text však nebude mať pre prehliadač žiadny ďalší význam a mali by sme teda využívať skôr sémantických elementov.

• .font-weight-bold - Tučný text
• .font-weight-normal - Bežná veľkosť textu
• .font-weight-light - Tenký text
• .font-italic - Text kurzívou

V dnešnej lekcii sme si ukázali niektoré preddefinované štýly, ktoré nám ušetria veľa práce. Pridanú hodnotu Bootstrap budeme odhaľovať viac a viac v ďalších lekciách. V tej nasledujúcej, Bootstrap - Obrázky , bude reč o obrázkoch a všetkým čo s nimi súvisí.