Lekce 8 - Bootstrap - Tlačítka
Tento obsah je dostupný zdarma v rámci projektu IT lidem.Vydávání, hosting a aktualizace umožňují jeho sponzoři.
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 a 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.
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ť již 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 - Zarovná odkaz jako tlačítko, ale pozadí je průhledné.
Jako vždy bychom měli ideálně přidat i nějaký text v elementu s
třídou .sr-only s popisem významu barvy pro hlasové
čtečky.
Tlačítko tedy vytvoříme např. takto:
<button type="button" class="btn btn-success">Odeslat</button>
Udělejme si malou přehlídku:
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 ideálně 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ě.
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.btn-block- Blokové tlačítko, zabírající ve výchozím stavu celý řádek
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".
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".
Vypínače
Pomocí Bootstrapového JavaScript pluginu můžeme z tlačítek vytvořit
vypínače (togglery). Všechny Bootstrap JS pluginy jsou obvykle obsaženy v
jednom .js souboru, který na oficiální stránce stáhnete a nalinkujete 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-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.
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. Tuto funkčnost Bootstrap implementuje pomocí
třídy .btn-group, kterou přiřadíme elementu, obvykle
<div>, který jednotlivá tlačítka obaluje.
Skupinu tlačítek vytvoříme následujícím způsobem:
<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>
Bootstrap vybízí k používá atributu role="group" pro
všechny elementy, které něco seskupují. Můžeme se také setkat s
použitím hodnoty role="toolbar" u nástrojových lišt, které
mohou obsahovat více skupin tlačítek.
Výsledek:
Velikosti
K nastavení velikosti tlačítek ve skupině přiřazujeme celé skupině,
tedy elementu <div>, jednu z těchto tříd:
.btn-group-lgpro velká tlačítka- Nic pro standardní velikost
.btn-group-smpro malá tlačítka
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 s nimi zatím nebudeme zatěžovat, ukažme si jen jak vypadají:
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.
Nástrojové lišty
Nástrojové lišty (toolbary) vytvoříme, když obalíme několik skupin tlačítek. Můžeme do nich vkládat i další elementy jako např. inputy.
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.
Tím jsme si popsali vše ohledně tlačítek v Bootstrapu. V příští lekci, Bootstrap - Formuláře, se vrhneme na větší téma, kterým budou formuláře a všechny prvky, které s nimi souvisí.
Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie. 
Komentáře
-
Tohle je asi myšlené opačně:Zobrazeno 8 zpráv z 8.