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
až .h6
, které
nastylují libovolný element jako příslušný nadpis:
Pokud potřebujeme ještě výraznější text, který ze
stránky doslova vyčnívá, využijeme tříd .display-1
až
.display-6
:
Zvýraznění odstavců
Podobně můžeme opticky zvýraznit i odstavce, a to přidáním třídy
.lead
:
Podnadpisy
Menší, šedý nadpis můžeme vedle nadpisu zobrazit pomocí elementu
<small>
se třídou .text-muted
:
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:
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
:
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:
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>
:
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:
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:
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é |
---|---|---|---|---|---|
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
až .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:
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í.