September discount week
Pouze tento týden sleva až 80 % na e-learning týkající se MS Office
Až 50 % bodů zdarma na online výuku díky naší Slevové akci!

Lekce 8 - Bootstrap - Tlačítka

Předchozí
Další

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.

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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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

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 velká tlačítka
  • Nic pro standardní velikost
  • .btn-group-sm pro malá 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ší 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í:

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


 

Předchozí článek
Bootstrap - Tabulky
Všechny články v sekci
Kompletní kurz CSS frameworku Bootstrap
Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
8 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 university Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (6)

 

 

Komentáře

Avatar
Patrik Weber
Člen
Avatar
Patrik Weber:16.2.2018 14:03

je super že tu je i BS a ulehčím si tím studium v angličtině :D s tímto se styluje jedna radost ;)

 
Odpovědět
16.2.2018 14:03
Avatar
Tomas
Člen
Avatar
Tomas:27.2.2018 13:11

Jen takový detail :) - Tohle je asi myšlené opačně:

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

 
Odpovědět
27.2.2018 13:11
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Tomas
David Čápka:11.3.2018 21:48

Díky, opraveno :)

Odpovědět
11.3.2018 21:48
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Jan Jurníček
Člen
Avatar
Jan Jurníček:9.11.2018 18:55

Tlačítko s dropdownem potřebuje popper.js nebo popper.min.js a zde bych chtěl varovat před verzí, která je momentálně jako balíček na NuGet. Momentálně je tam starší verze 1.14.3, která způsobuje chybu v Bootstrapu, totiž, že objekt Popper není definován.

Verze, kterou použil autor a také verze stažené z adres, na něž odkazuje autor Popperu Federico Zivolo alias FezVrasta na svých stránkách, fungují. Jsou to tedy adresy https://unpkg.com/popper.js a https://unpkg.com/…opper.min.js, odkazované z https://github.com/…ta/popper.js#…

 
Odpovědět
9.11.2018 18:55
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Jan Jurníček
Člen
Avatar
Jan Jurníček:10.11.2018 14:03

Zjistil jsem, že nynější verze 4.1.3 Bootstrapu nezná třídu "input-group-addon", takže konstrukci

<span class="input-group-addon" id="btnGroupAd­don">www.</span>

z příkladu "Nástrojová lišta" je nutno nahradit konstrukcí

<div class="input-group-prepend">
<span class="btnGrou­pAddon" id="basic-addon1">www.</span>
</div>
kterou najdeme zde: https://getbootstrap.com/…input-group/

 
Odpovědět
10.11.2018 14:03
Avatar
Jan Jurníček
Člen
Avatar
Odpovídá na Jan Jurníček
Jan Jurníček:10.11.2018 16:19

Opravuju odkaz https://getbootstrap.com/…input-group/
a konstrukci:
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>

 
Odpovědět
10.11.2018 16:19
Avatar
Jan Jurníček
Člen
Avatar
Odpovídá na Jan Jurníček
Jan Jurníček:12.11.2018 8:38

A ještě musím opravit svůj komentář k Popperu. Problém spočívá v tom, že je potřeba zajistit dvě věci:

  1. Je třeba, aby byla použita verze Popperu, uložená v podsložce umd. Takže - stáhnete-li si balíček popper.js do Visual Studia, použijte link na "/Scripts/umd/pop­per.min.js".
  2. Link by měl předcházet linku na bootstrap. Ve Visual Studiu 2017 jsem to zajistil tak, že jsem link zaregistroval v metodě statické RegisterBundles třídy BundleConfig, uložené ve složce App_Start:

    bundles.Add(new ScriptBundle("~/bun­dles/popper.js")­.Include(
    "~/Scripts/um­d/popper.min.js"));

 
Odpovědět
12.11.2018 8:38
Avatar
Jan Jurníček
Člen
Avatar
Odpovídá na Jan Jurníček
Jan Jurníček:12.11.2018 8:41

... a v záhlaví stránky (zde master page) jsem doplnil:
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bun­dles/moderniz­r") %>
<%: Scripts.Render("~/bun­dles/popper.js") %>
</asp:PlaceHolder>

 
Odpovědět
12.11.2018 8:41
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.

Zobrazeno 8 zpráv z 8.