3. diel - Bootstrap - Typografia

V minulej lekcii, Bootstrap - Reboot, sme si ukázali, 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šnom tutoriáli frameworku Bootstrap sa budeme baviť o explicitných štýloch, teda tých, ktorých platnosť vynútime pridaním CSS triedy Bootstrapu k danému elementu.

Typografia

Začneme s typografiou. Východiskové nastavenie typografie, teda textu a elementov obsahujúcich text, už poznáme z Rebootu. 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ž naštýlované, 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é naštýlujú ľubovoľný element ako príslušný nadpis:

Ak potrebujeme ešte výraznejší text, ktorý zo stránky doslova vyčnieva, využijeme tried .display-1 až .display-6:

Zvýraznenie odstavcov

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

Podnadpisy

Menší, šedý nadpis môžeme vedľa nadpisu zobraziť pomocou elementu <small> s 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 nežiaduci efekt. Ak 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 zmieniť aj zdroj citácie, použijeme v citácii element <footer> s triedou .blockquote-footer:

Zoznamy

Čo sa týka zoznamov, okrem východiskového štýlu ich môžeme upravovať pomocou ďalších tried.

Zoznamy bez odrážok

Určite sme sa už niekedy dostali do situácie, keď sme potrebovali skryť odrážky nejakého zoznamu, napríklad navigácie. K tomu Bootstrap poskytuje triedu .list-unstyled. Nefunguje rekurzívne, ak by sme teda potrebovali skryť odráž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 namiesto pod sebou. Toho 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émantiku. Nezabudnime v kóde previesť špeciálne HTML znaky na entity:

Premenné, vstupy a výstupy

Predštýlované 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étne elementy v Bootstrapu nájdeme aj takzvané utility triedy. Sú to malí pomocníci, ktorých môžeme využiť takmer kdekoľvek a ušetriť 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-start - zarovnanie doľava,
• .text-center - zarovnanie na stred,
• .text-end - zarovnanie doprava.

Zarovnanie môžeme upresniť aj pre rôzne viewporty, teda napríklad zarovnávať text na stred iba od tabletov a na mobiloch ho nechať zarovnaný vľavo. K detailným popisu viewportov sa v našom kurze Bootstrapu ešte dostaneme. Zarovnanie textu na stred by sa pre rôzne viewporty 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,
• .text-xxl-center - text je zarovnaný na stred na extra 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 kontejneri 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é zmieniť, ako sú tieto zariadenia definované. Bootstrap zavádza tzv. breakpointy (body zlomu), čo je určitá šírka obrazovky v pixeloch, od ktorej ju chápe ako väčšie zariadenie. Vo východiskovom nastavení sa jedná o tieto body:

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

Medzi stĺpcami tabuľky sú práve breakpointy, podľa tabuľky zľava od malého zariadenia sm, md, lg, xl a xxl.

Zalamovanie textu

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

Skracovanie textu

Ak nás naopak trápi dlhý text, môžeme ho skrátiť pomocou triedy .text-truncate. Keď dĺžka textu prekročí šírku rodičovského elementu, zobrazí sa na konci tri bodky. Vnútorne používa trieda 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 IBA VEĽKÝMI PÍSMENAMI,
• .text-capitalize - Zväčší Vždy Prvé Písmeno Slova.

Tučný text a kurzíva

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

• .fw-bold - tučný text,
• .fw-normal - bežná veľkosť textu,
• .fw-light - tenký text,
• .fst-italic - text kurzívou.

Veľkosť písma

Triedy .fs-1 až .fs-6 umožňujú ľahko nastaviť veľkosť písma. Tieto triedy používajú rovnakú škálu ako východiskové nadpisy HTML. Napríklad .fs-1 nastaví text na veľkosť zodpovedajúcu nadpisu <h1>, zatiaľ čo .fs-6 nastaví text na veľkosť zodpovedajúcu nadpisu <h6>. Triedy sú užitočné pre prípady, keď chceme mať text, ktorý je vizuálne výrazný ako nadpis, ale z hľadiska sémantiky HTML chceme použiť iný tag:

V dnešnej lekcii sme si ukázali niektoré preddefinované štýly, ktoré nám ušetria veľa práce. Pridanú hodnotu Bootstrapu budeme odhaľovať viac a viac v ďalších lekciách.

V ďalšej lekcii, Bootstrap - Obrázky, bude reč o obrázkoch a čo s nimi súvisí.