Lekce 8 - Bootstrap - Tlačítka

V minulé lekci, Bootstrap - Tabulky, jsme dokončili styly CSS frameworku Bootstrap pro běžné HTML elementy.

V dnešním CSS Bootstrap tutoriálu se přesuneme do další části frameworku. Budeme se věnovat tzv. komponentám. To jsou třídy určené zejména pro elementy <div> a <span>, které nám umožňují vytvářet rychle a jednoduše takové prvky, které jazyk HTML zatím přímo nepodporuje, ale na webech je často potřebujeme. Tato lekce je věnovaná práci s tlačítky.

Tlačítka

Tlačítka hojně využijeme jednak u formulářů, ale také na všech místech, kde by byl obyčejný odkaz málo výrazný. Abychom udrželi kvalitní uživatelský zážitek, měly by být všechny důležité akce přístupné pod tlačítky, ať už se jedná o přidání zboží do košíku nebo o tlačítko "Vyhledat" někde v sidebaru.

Tlačítka obvykle vytváříme z elementů <button>, <a> nebo <input>, kterým přidáme třídu .btn. Tím se z nich stanou inline bloky. Jako vždy zde máme několik tříd pro tlačítka standardních Bootstrap barev a jednu průhlednou:

.btn-primary - hlavní barva, jako výchozí modrá pro výchozí akci,
.btn-secondary - druhá hlavní barva, výchozí šedá,
.btn-success - zelená na úspěšné akce,
.btn-danger - červená pro nebezpečné akce,
.btn-warning - žlutá pro zvýraznění důležitých akcí,
.btn-info - neutrální modrá pro neutrální akce,
.btn-light - světlounce šedá,
.btn-dark - téměř černá,
.btn-link - tlačítko, které se tváří jako odkaz, jeho pozadí je průhledné.

Jako vždy bychom měli ideálně přidat i nějaký text v elementu s třídou .visually-hidden s popisem významu barvy pro hlasové čtečky.

Tlačítko vytvoříme například takto:

<button type="button" class="btn btn-success">Odeslat</button>

Udělejme si malou přehlídku:

Tlačítka v Bootstrap

tlacitka.html

Pokud elementy <a> používáme pro tlačítka, která nepřesměrovávají na jinou stránku, ale jsou např. obsluhována JavaScriptem, měli bychom jim dodat atribut role="button". Nebo můžeme pro tyto účely používat element <button>, který je sémanticky správnější. Elementy <a> bychom měli používat pokud možno jen pro tlačítka, která přesměrovávají na nějakou jinou adresu.

Obrysy tlačítek

Pokud má některý formulář mnoho barevných tlačítek, výsledný dojem může působit až moc výrazně. Z tohoto důvodu Bootstrap poskytuje rovněž třídy, které obarví pouze rámeček a text tlačítka, přičemž pozadí zůstane průhledné. Ty začínají na .btn-outline-, např. .btn-outline-primary a podobně:

Tlačítka v Bootstrap

tlacitka_obrysy.html

Velikosti

Podle důležitosti tlačítka můžeme ovlivnit i jeho velikost. Třídy k tomu jsou následující:

.btn-lg - velké tlačítko,
.btn-sm - malé tlačítko.

V prohlížeči:

Tlačítka v Bootstrap

tlacitka_velikosti.html

Stavy

Jistě jste si všimli, že se kolem tlačítka zobrazí ještě dodatečný rámeček v případě, že je aktivní (zrovna jsme na něj kliknuli a potom nekliknuli na nic jiného). Tento rámeček zmizí v případě, že tlačítko není zrovna aktivním elementem ve stránce (pseudoselektor :active).

Vynucení aktivního stylu

Kdybychom někdy potřebovali vykreslit neaktivní tlačítko jako aktivní, můžeme k tomu použít třídu .active. Pro sémantickou korektnost bychom měli pro čtečky dodat i atribut aria-pressed="true":

<button type="button" class="btn btn-primary active" aria-pressed="true">Aktivní tlačítko</button>

Neaktivní tlačítka

Stejně můžeme tlačítko i nechat vykreslit jako neaktivní pomocí třídy .disabled. Pro čtečky dodáme ještě aria-disabled="true". Třída .disabled se hodí zejména pro odkazy, které na rozdíl od tlačítek nemůžeme zneaktivnit pomocí atributu disabled="disabled". Bootstrap nastavuje neaktivním tlačítkům kurzor šipky a opravdu na ně nelze kliknout. Jelikož na taková tlačítka lze bohužel "kliknout" ještě pomocí klávesnice, měli bychom k nim přidávat i atribut tabindex="-1":

<button type="button" class="btn btn-primary disabled" aria-disabled="true" tabindex="-1">Neaktivní tlačítko</button>

Vypínače

Pomocí Bootstrapového JavaScript pluginu můžeme z tlačítek vytvořit vypínače (togglery). Všechny Bootstrap JavaScript pluginy jsou obvykle obsaženy v jednom .js souboru, který na oficiální stránce stáhneme a nalinkujeme v elementu <head>.

Vypínač na rozdíl od obyčejného tlačítka drží stisknutý dokud jej znovu nevypneme. Elementu pro získání tohoto chování přiřadíme data atribut data-bs-toggle="button". Pokud chceme, aby byl přepínač ve výchozím stavu stisknutý, dodáme třídu .active společně s atributem aria-pressed="true" pro hlasové čtečky:

Vypínače v Bootstrap

tlacitka_vypinace.html

Skupiny tlačítek

Tlačítka můžeme seskupit, čímž docílíme jejich spojení do souvislé tlačítkové lišty. To působí dobře pokud se všechna tlačítka týkají např. nějakého widgetu. Bootstrap tuto funkčnost implementuje pomocí třídy .btn-group, kterou přiřadíme elementu, obvykle <div>, jenž jednotlivá tlačítka obaluje. Bootstrap vybízí k používání atributu role="group" pro všechny elementy, které něco seskupují. Podobně se můžeme také setkat s použitím hodnoty role="toolbar" u nástrojových lišt obsahujících několik skupin tlačítek:

<div class="btn-group" role="group" aria-label="Výběr kandidáta">
    <button type="button" class="btn btn-secondary">Předchozí</button>
    <button type="button" class="btn btn-primary">Zvolit</button>
    <button type="button" class="btn btn-secondary">Další</button>
</div>

V prohlížeči vidíme:

Skupiny tlačítek v Bootstrap

tlacitka_skupiny.html

Velikosti

Pro nastavení velikosti tlačítek ve skupině přiřazujeme celé skupině, tedy elementu <div>, jednu z těchto tříd:

.btn-group-lg pro velká tlačítka,
nic pro standardní velikost,
.btn-group-sm pro malá tlačítka.

Podívejme se na kód:

<div class="btn-group btn-group-lg" role="group" aria-label="Výběr kandidáta">
    <button type="button" class="btn btn-secondary">Předchozí</button>
    <button type="button" class="btn btn-primary">Zvolit</button>
    <button type="button" class="btn btn-secondary">Další</button>
</div>

A v prohlížeči uvidíme:

Velikosti tlačítek v Bootstrap

tlacitka_skupiny_velikosti.html

Dropdown

Pokud bychom jedno z tlačítek chtěli jako tzv. dropdown (tlačítko s rolovacími možnostmi), vložíme jej jako další skupinu do již existující skupiny tlačítek. Nezapomeneme připojit JavaScript, jelikož právě pomocí něj je rozbalování implementováno. Skupiny tedy můžeme zanořovat do sebe. Dropdownům se budeme věnovat dále v kurzu a nyní se jimi zatím nebudeme zatěžovat, ukažme si jen jak vypadají:

Dropdowny v Bootstrap

tlacitka_skupiny_dropdown.html

Svislá skupina

Tlačítka můžeme seskupit i svisle. U této varianty nejsou dropdowny podporované. Skupině v tomto případě vůbec nepřiřazujeme třídu .btn-group a místo ní použijeme třídu .btn-group-vertical.

Skupiny tlačítek v Bootstrap

tlacitka_svisle_skupiny.html

Nástrojové lišty

Nástrojové lišty (toolbary) vytvoříme, když obalíme několik skupin tlačítek třídou .btn-toolbar. Můžeme do nich vkládat i další elementy jako např. inputy:

<div class="btn-toolbar" role="toolbar" aria-label="Nástrojová lišta">
    <div class="btn-group me-2" role="group" aria-label="První skupina">
        <button type="button" class="btn btn-secondary">1</button>
        <button type="button" class="btn btn-secondary">2</button>
        <button type="button" class="btn btn-secondary">3</button>
    </div>
    <div class="input-group" aria-label="Druhá skupina">
        <span class="input-group-text" id="btnGroupAddon">www.</span>
        <input type="text" class="form-control" placeholder="Vaše doména" aria-label="Pole na doménu" aria-describedby="btnGroupAddon">
    </div>
</div>

Ukázka v prohlížeči:

Toolbary v Bootstrap

tlacitka_toolbar.html

Checkboxy a radiobuttony

I když se k formulářům teprve dostaneme, můžeme si zmínit, že jako tlačítka ve skupině můžeme nastylovat i radiobuttony nebo checkboxy. Jedná se v podstatě o kombinaci vypínačů a skupiny tlačítek, jak jsme si to ukázali výše:

Checkboxy a radiobuttony v Bootstrap

tlacitka_checkboxy_a_radiobuttony.html

Tím jsme si popsali vše ohledně tlačítek v Bootstrapu.

V následujícím cvičení, Řešené úlohy k 7.-8. lekci Bootstrap CSS frameworku, si procvičíme nabyté zkušenosti z předchozích lekcí.

Absolvováno

Označit lekci jako neabsolvovanou