Lekce 3 - Bootstrap - Typografie

V minulé lekci, Bootstrap - Reboot, jsme si ukázali, jak Bootstrap resetuje CSS styly pomocí Rebootu. Již víme, že zavádí určité nové konvence, jako např. používání jednotek rem či pouze spodních okrajů, a ž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 o těch, jejichž platnost vynutíme přidáním CSS třídy Bootstrapu k danému elementu.

Typografie

Začněme 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, jimiž 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:

Nadpisové třídy v Bootstrapu

nadpisy_tridy.html

Zdrojový kód ukázky

<body>
    <p class="h1">Nadpis h1</p>
    <p class="h2">Nadpis h2</p>
    <p class="h3">Nadpis h3</p>
    <p class="h4">Nadpis h4</p>
    <p class="h5">Nadpis h5</p>
    <p class="h6">Nadpis h6</p>
</body>

V ukázkách zdrojového kódu uvádíme pouze obsah <body>. Pro správné fungování stylů Bootstrapu přidejte do <head> následující kód:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

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

Nadpisové třídy v Bootstrapu

nadpisy_display.html

Zdrojový kód ukázky

<body>
    <h1 class="display-1">Display 1</h1>
    <h1 class="display-2">Display 2</h1>
    <h1 class="display-3">Display 3</h1>
    <h1 class="display-4">Display 4</h1>
    <h1 class="display-5">Display 5</h1>
    <h1 class="display-6">Display 6</h1>
</body>

V ukázkách zdrojového kódu uvádíme pouze obsah <body>. Pro správné fungování stylů Bootstrapu přidejte do <head> následující kód:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

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 Bootstrapu

odstavce_lead.html

Zdrojový kód ukázky

<body>
    <p class="lead">Tento text obsahuje důležitou informaci a je lépe viditelný díky třídě .lead.</p>
</body>

V ukázkách zdrojového kódu uvádíme pouze obsah <body>. Pro správné fungování stylů Bootstrapu přidejte do <head> následující kód:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

Podnadpisy

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

Podnadpisy v Bootstrapu

podnadpisy.html

Zdrojový kód ukázky

<body>
    <h1>
        Bootstrap kurz
        <small class="text-muted">Krok za krokem</small>
    </h1>
</body>

V ukázkách zdrojového kódu uvádíme pouze obsah <body>. Pro správné fungování stylů Bootstrapu přidejte do <head> následující kód:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

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 ní:

Zkratky v Bootstrapu

zkratky.html

Zdrojový kód ukázky

<body>
    <p>Zkratka <abbr title="Hypertextový značkovací jazyk">HTML</abbr> zde vyčnívá.</p>
    <p>V tomto řádku je zkratka <abbr class="initialism" title="Kaskádové styly">CSS</abbr> zmenšená.</p>
</body>

V ukázkách zdrojového kódu uvádíme pouze obsah <body>. Pro správné fungování stylů Bootstrapu přidejte do <head> následující kód:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

Citace

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

Citace v Bootstrapu

citace.html

Zdrojový kód ukázky

<body>
    <blockquote class="blockquote">
        <p>Internet? Ten nás nezajímá.</p>
        <footer class="blockquote-footer">Bill Gates, 1993</footer>
    </blockquote>
</body>

V ukázkách zdrojového kódu uvádíme pouze obsah <body>. Pro správné fungování stylů Bootstrapu přidejte do <head> následující kód:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

Seznamy

Seznamy můžeme kromě výchozího stylu upravovat také pomocí dalších tříd.

Seznamy bez odrážek

Určitě jsme se všichni 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. Ta nefunguje rekurzivně, proto je třeba ji přiřadit i všem vnořeným seznamům, pokud bychom potřebovali skrýt odrážky ve víceúrovňovém seznamu:

Seznamy bez odrážek

seznamy_bez_odrazek.html

Zdrojový kód ukázky

<body>
<ul class="list-unstyled">
    <li>První položka</li>
    <li>Druhá položka</li>
    <li>
        <ul>
            <li>První položka vnořeného seznamu</li>
            <li>Druhá položka vnořeného seznamu</li>
        </ul>
    </li>
    <li>Třetí položka</li>
</ul>
</body>

V ukázkách zdrojového kódu uvádíme pouze obsah <body>. Pro správné fungování stylů Bootstrapu přidejte do <head> následující kód:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

Inline seznamy

Podobnou situací 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

Zdrojový kód ukázky

<body>
    <ul class="list-inline">
        <li class="list-inline-item">První položka</li>
        <li class="list-inline-item">Druhá položka</li>
        <li class="list-inline-item">Třetí položka</li>
    </ul>
</body>

V ukázkách zdrojového kódu uvádíme pouze obsah <body>. Pro správné fungování stylů Bootstrapu přidejte do <head> následující kód:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

Kód

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

Blokový kód

Potřebujeme-li někam na stránku vložit část zdrojového kódu, vkládáme jej, jak 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

Zdrojový kód ukázky

<body>
    <pre><code>&lt;p&gt;První odstavec&lt;/p&gt;
            &lt;p&gt;Druhý odstavec&lt;/p&gt;</code></pre>
</body>

V ukázkách zdrojového kódu uvádíme pouze obsah <body>. Pro správné fungování stylů Bootstrapu přidejte do <head> následující kód:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

Proměnné, vstupy a výstupy

Předstylované máme také 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

Zdrojový kód ukázky

<body>
    <p>Uživatele necháme kód zkopírovat klávesovou zkratkou <kbd>Ctrl</kbd> + <kbd>C</kbd>, čímž se do proměnné nahraje <code>vstup</code>. Program následně vypíše hlášku <samp>Text zkopírován do schránky</samp>.</p>
</body>

V ukázkách zdrojového kódu uvádíme pouze obsah <body>. Pro správné fungování stylů Bootstrapu přidejte do <head> následující kód:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

Utility třídy

Kromě tříd pro konkrétní elementy nalezneme v Bootstrapu také takzvané utility třídy. Jsou to malí pomocníci, které můžeme využít téměř kdekoli a kteří nám ušetří 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

K zarovnání textů můžeme využít následující třídy:

.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ů výše, avšak na mobilech jej nechat zarovnaný vlevo. K detailnímu 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 nebo další inline elementy.

Body zlomu

V souvislosti s malými, středně velkými, velkými a extra velkými zařízeními je potřeba 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 framework 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 575 px	576–767 px	768–991 px	992–1199 px	1200 px a více	1400 px 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 se nacházejí právě ony breakpointy. Dle tabulky se značí 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 textu tři tečky. Třída vnitřně používá CSS 3 vlastnost text-overflow s hodnotou ellipsis. Zkracování textu funguje pouze u elementů, 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é elementy:

.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é v případě, kdy chceme mít text vizuálně výrazný jako nadpis, ale z hlediska sémantiky HTML chceme použít jiný tag:

Velikosti písem v Bootstrapu

velikost_pisem.html

Zdrojový kód ukázky

<body>
    <p class="fs-1">Text s velikostí odpovídající nadpisu h1.</p>
    <p class="fs-2">Text s velikostí odpovídající nadpisu h2.</p>
    <p class="fs-3">Text s velikostí odpovídající nadpisu h3.</p>
    <p class="fs-4">Text s velikostí odpovídající nadpisu h4.</p>
    <p class="fs-5">Text s velikostí odpovídající nadpisu h5.</p>
    <p class="fs-6">Text s velikostí odpovídající nadpisu h6.</p>
</body>

V ukázkách zdrojového kódu uvádíme pouze obsah <body>. Pro správné fungování stylů Bootstrapu přidejte do <head> následující kód:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

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 i v dalších lekcích.

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

Článek pro vás napsal David Hartinger

Uživatelské hodnocení:

1191 hlasů

David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.

Aktivity

Nejčastěji vyhledáváné

Lekce 3 - Bootstrap - Typografie

Typografie

Nadpisy

Nadpisové třídy

Zvýraznění odstavců

Podnadpisy

Zkratky

Citace

Seznamy

Seznamy bez odrážek

Inline seznamy

Kód

Blokový kód

Proměnné, vstupy a výstupy

Utility třídy

Zarovnání textu

Body zlomu

Zalamování textu

Zkracování textu

Transformace textu

Tučný text a kurzíva

Velikost písma