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

Lekce 3 - Bootstrap - Typografie

V minulé lekci, Bootstrap - Reboot, jsme si ukázali, jak Bootstrap resetuje CSS styly pomocí Reboot. Již víme, že zavádí určité nové konvence jako např. používání jednotek rem, pouze spodních okrajů nebo že globálně přepíná hodnotu vlastnosti box-sizing.

V dnešním tutoriálu frameworku Bootstrap se budeme bavit o explicitních stylech, tedy těch, jejichž platnost vynutíme přidáním CSS třídy Bootstrapu k danému elementu.

Typografie

Začneme s typografií. Výchozí nastavení typografie, tedy textu a elementů obsahujících text, již známe z Rebootu. Bootstrap nám samozřejmě dále poskytuje třídy, kterými můžeme chování elementů ještě upravovat. Pojďme si je popsat.

Nadpisy

Nadpisy jsou sice již ostylované, ale občas se nám může hodit použít styl nadpisu i na element, který není přímo nadpisem.

Nadpisové třídy

Bootstrap poskytuje třídy .h1.h6, které nastylují libovolný element jako příslušný nadpis:

Nadpisové třídy v Bootstrap
nadpisy_tridy.html

Pokud potřebujeme ještě výraznější text, který ze stránky doslova vyčnívá, využijeme tříd .display-1.display-6:

Nadpisové třídy v Bootstrap
nadpisy_displa­y.html

Zvýraznění odstavců

Podobně můžeme opticky zvýraznit i odstavce, a to přidáním třídy .lead:

Zvýraznění odstavce v Bootstrap
odstavce_lead.html

Podnadpisy

Menší, šedý nadpis můžeme vedle nadpisu zobrazit pomocí elementu <small> se třídou .text-muted:

Podnadpisy v Bootstrap
podnadpisy.html

Zkratky

Pro zkratkový element <abbr> máme k dispozici třídu .initialism, která zmenší text na 90 %. Je to zřejmě z důvodu, že zkratky jsou často psané VELKÝMI PÍSMENY a opticky tak z textu vyčnívají, což je nechtěný efekt. Pokud je zkratka malými písmeny, třídu nepřidáváme. Význam zkratky se zobrazí při podržení kurzoru nad zkratkou:

Zkratky v Bootstrap
zkratky.html

Citace

Elementům <blockquote> přiřazujeme třídu .blockquote. Pokud chceme zmínit i zdroj citace, použijeme v citaci element <footer> s třídou .blockquote-footer:

Citace v Bootstrap
citace.html

Seznamy

Co se týká seznamů, kromě výchozího stylu je můžeme upravovat pomocí dalších tříd.

Seznamy bez odrážek

Určitě jsme se již někdy dostali do situace, kdy jsme potřebovali skrýt odrážky nějakého seznamu, například navigace. K tomu Bootstrap poskytuje třídu .list-unstyled. Nefunguje rekurzivně, pokud bychom tedy potřebovali skrýt odrážky ve víceúrovňovém seznamu, je třeba ji přiřadit i všem vnořeným seznamům:

Seznamy bez odrážek
seznamy_bez_o­drazek.html

Inline seznamy

Podobná situace je výpis prvků seznamu vedle sebe místo pod sebe. Toho docílíme přiřazením třídy .list-inline elementu seznamu a třídy .list-inline-item elementům <li>:

Inline seznamy v Bootstrapu
inline_seznamy.html

Kód

Připravené styly máme i pro běžné tagy pro kód nebo vstup/výstup.

Blokový kód

Pokud potřebujeme někam na stránku vložit část zdrojového kódu, vkládáme ji, jako jsme byli doposud zvyklí, tedy do elementů <pre> a <code>, abychom dosáhli korektní sémantiky. Nezapomeňme v kódu převést speciální HTML znaky na entity:

Blokový kód v Bootstrapu
blokovy_kod.html

Proměnné, vstupy a výstupy

Předstylované máme elementy <code> použité samostatně jako řádkový kód, dále elementy <var> pro proměnné, <kbd> pro vstup z klávesnice a <samp> pro ukázkový výstup:

Vstup a výstup
vstup_a_vystup.html

Utility třídy

Kromě tříd pro konkrétní elementy v Bootstrapu nalezneme také takzvané utility třídy. Jsou to malí pomocníci, které můžeme využít téměř kdekoli a ušetří nám zbytečné psaní vlastních stylů pro triviální formátování. Všechny styly používají vnitřně !important a mají tedy vždy "poslední slovo".

Zarovnání textu

Pro zarovnání textů můžeme využít tříd:

  • .text-start - zarovnání doleva,
  • .text-center - zarovnání na střed,
  • .text-end - zarovnání doprava.

Zarovnání můžeme upřesnit i pro různé viewporty, tedy například zarovnávat text na střed pouze od tabletů a na mobilech jej nechat zarovnaný vlevo. K detailním popisu viewportů se v našem kurzu Bootstrapu teprve dostaneme. Zarovnání textu na střed by se pro různé viewporty definovalo následovně:

  • .text-sm-center - text je zarovnaný na střed na malých zařízeních a větších,
  • .text-md-center - text je zarovnaný na střed na středních zařízeních a větších,
  • .text-lg-center - text je zarovnaný na střed na velkých zařízeních a větších,
  • .text-xl-center - text je zarovnaný na střed na extra velkých zařízeních a větších,
  • .text-xxl-center - text je zarovnaný na střed na extra extra velkých zařízeních a větších.

Styly jsou vnitřně implementované vlastností text-align a můžeme je použít samozřejmě i na obrázky v nějakém kontejneru a další inline elementy.

Body zlomu

Když se bavíme o malých, středně velkých, velkých a extra velkých zařízeních, určitě by bylo vhodné zmínit, jak jsou tato zařízení definována. Bootstrap zavádí tzv. breakpointy (body zlomu), což je určitá šířka obrazovky v pixelech, od které ji chápe jako větší zařízení. Ve výchozím nastavení se jedná o tyto body:

Extra malé zařízení Malé zařízení Středně velké Velké Extra velké Extra extra velké
Kompletní kurz CSS frameworku Bootstrap Kompletní kurz CSS frameworku Bootstrap Kompletní kurz CSS frameworku Bootstrap Kompletní kurz CSS frameworku Bootstrap Kompletní kurz CSS frameworku Bootstrap Kompletní kurz CSS frameworku Bootstrap
do 575px 576px - 767px 768px - 991px 992px - 1199px 1200px a více 1400px a více
telefon na výšku telefon na šířku tablet notebook/desktop desktop s velkým monitorem desktop s velkým monitorem

Mezi sloupci tabulky jsou právě breakpointy, dle tabulky zleva od malého zařízení sm, md, lg, xl a xxl.

Zalamování textu

Zalamování textu můžeme zabránit pomocí třídy .text-nowrap.

Zkracování textu

Pokud nás naopak trápí dlouhý text, můžeme jej zkrátit pomocí třídy .text-truncate. Když délka textu překročí šířku rodičovského elementu, zobrazí se na konci tři tečky. Vnitřně používá třída CSS 3 vlastnost text-overflow s hodnotou ellipsis. Zkracování textu funguje pouze s elementy, které mají vlastnost display nastavenou na block nebo inline-block.

Transformace textu

Text můžeme transformovat na VELKÁ nebo malá písmena pomocí CSS tříd:

  • .text-lowercase - text pouze malými písmeny,
  • .text-uppercase - TEXT POUZE VELKÝMI PÍSMENY,
  • .text-capitalize - Zvětší Vždy První Písmeno Slova.

Tučný text a kurzíva

Opticky můžeme font upravit pomocí sady několika dalších tříd. Takový text ovšem nebude mít pro prohlížeč žádný další význam a měli bychom tedy využívat spíše sémantických elementů:

  • .fw-bold - tučný text,
  • .fw-normal - běžná velikost textu,
  • .fw-light - tenký text,
  • .fst-italic - text kurzívou.

Velikost písma

Třídy .fs-1.fs-6 umožňují snadno nastavit velikost písma. Tyto třídy používají stejnou škálu jako výchozí nadpisy HTML. Například .fs-1 nastaví text na velikost odpovídající nadpisu <h1>, zatímco .fs-6 nastaví text na velikost odpovídající nadpisu <h6>. Třídy jsou užitečné pro případy, kdy chceme mít text, který je vizuálně výrazný jako nadpis, ale z hlediska sémantiky HTML chceme použít jiný tag:

Velikosti písem v Bootstrap
velikost_pisem.html

V dnešní lekci jsme si ukázali některé předdefinované styly, které nám ušetří spoustu práce. Přidanou hodnotu Bootstrapu budeme odhalovat více a více v dalších lekcích.

V další lekci, Bootstrap - Obrázky, bude řeč o obrázcích a co s nimi souvisí.


 

Předchozí článek
Bootstrap - Reboot
Všechny články v sekci
Kompletní kurz CSS frameworku Bootstrap
Přeskočit článek
(nedoporučujeme)
Bootstrap - Obrázky
Článek pro vás napsal David Hartinger
Avatar
Uživatelské hodnocení:
771 hlasů
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 se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity