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 zaoberať explicitnými štýlmi, teda tými, 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ú už síce 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, použijeme triedy .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 o 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. Na to Bootstrap poskytuje triedu .list-unstyled. Nefunguje rekurzívne, takže ak by sme 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 zo zoznamu vedľa seba namiesto pod sebou. 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 správnu sémantiku. Nezabudnime v kóde previesť špeciálne HTML znaky na entity:

Premenné, vstupy a výstupy

Máme predštýlované 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 Bootstrape nájdeme aj takzvané utility triedy. Sú to malí pomocníci, ktorých môžeme využiť takmer kdekoľvek a ušetria 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 na tabletoch a na mobiloch ho nechať zarovnaný vľavo. K detailnému popisu viewportov sa v našom kurze Bootstrap 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 a väčších zariadeniach,
• .text-md-center - text je zarovnaný na stred na stredných a väčších zariadeniach,
• .text-lg-center - text je zarovnaný na stred na veľkých a väčších zariadeniach,
• .text-xl-center - text je zarovnaný na stred na extra veľkých a väčších zariadeniach,
• .text-xxl-center - text je zarovnaný na stred na extra extra veľkých a väčších zariadeniach.

Š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é spomenúť, 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.

Zalomenie textu

Zalomeniu 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, zobrazia 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 súboru 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é elementy:

• .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é v prípadoch, 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ť aj naďalej v ďalších lekciách.

V ďalšej lekcii, Bootstrap - Obrázky, sa budeme venovať obrázkom a všetkému, čo s nimi súvisí.