Získej svůj iPhone v nové soutěži! Získej svůj iPhone v nové soutěži!
Nová překladatelská soutěž ITnetwork.cz o telefon iPhone, sluchátka Beats a další věcné ceny za 4 hodiny práce.
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

6. díl - Bootstrap - Tlačítka

HTML a CSS Bootstrap Bootstrap - Tlačítka

Unicorn College ONEbit hosting 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:

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

Tlačítka v Bootstrap
tlacitka_obry­sy.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
  • .btn-block - Blokové tlačítko, zabírající ve výchozím stavu celý řádek
Tlačítka v Bootstrap
tlacitka_veli­kosti.html

Stavy

Jistě jste si všimli, že se kolem tlačítka zobrazí ještě dodač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.

Vypínače v Bootstrap
tlacitka_vypi­nace.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. 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:

Skupiny tlačítek v Bootstrap
tlacitka_skupi­ny.html

Velikosti

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

  • .btn-group-lg pro malá tlačítka
  • Nic pro standardní velikost
  • .btn-group-sm pro velká tlačítka
Velikosti tlačítek v Bootstrap
tlacitka_skupi­ny_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ší skupiny do již existující skupiny tlačítek. Nezapomeneme připojit JavaScript, jelikož právě pomocí něž 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í:

Dropdowny v Bootstrap
tlacitka_skupi­ny_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_svis­le_skupiny.html

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.

Toolbary v Bootstrap
tlacitka_tool­bar.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_chec­kboxy_a_radio­buttony.html

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


 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
2 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Předchozí článek
Bootstrap - Tabulky
Miniatura
Všechny články v sekci
Bootstrap
Miniatura
Následující článek
Bootstrap - Formuláře
Aktivity (1)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!