8. diel - Bootstrap - Tlačidlá

V minulej lekcii, Bootstrap - Tabuľky, sme dokončili štýly CSS frameworku Bootstrap pre bežné HTML elementy.

V dnešnom CSS Bootstrap tutoriále sa presunieme do ďalšej časti frameworku. Budeme sa venovať tzv. komponentom. Ide o triedy určené najmä pre elementy <div> a <span>, ktoré nám umožňujú vytvárať rýchlo a jednoducho také prvky, ktoré jazyk HTML zatiaľ priamo nepodporuje, ale na weboch ich často potrebujeme. Táto lekcia je venovaná práci s tlačidlami.

Tlačidlá

Tlačidlá značne využijeme jednak pri formulároch, ale aj na všetkých miestach, kde by bol obyčajný odkaz málo výrazný. Na dosiahnutie kvalitného užívateľského zážitku by mali byť všetky dôležité akcie prístupné ako tlačidlá - či už sa jedná o pridanie tovaru do košíka alebo o tlačidlo Search niekde v sidebare.

Tlačidlá obvykle vytvárame z elementov <button>, <a> alebo <input>, ktorým pridáme triedu .btn. Vďaka tomu sa z nich stanú inline bloky. Ako vždy tu máme niekoľko tried pre tlačidlá štandardných Bootstrap farieb a jednu priehľadnú:

.btn-primary - hlavná farba, ako predvolená modrá pre predvolenú akciu,
.btn-secondary - druhá hlavná farba, predvolená šedá,
.btn-success - zelená na úspešné akcie,
.btn-danger - červená na nebezpečné akcie,
.btn-warning - žltá na zvýraznenie dôležitých akcií,
.btn-info - neutrálna modrá na neutrálne akcie,
.btn-light - svetloašedá,
.btn-dark - takmer čierna,
.btn-link - zarovná odkaz ako tlačidlo, ale pozadie je priehľadné.

Ako vždy by sme mali ideálne pridať aj nejaký text v elemente s triedou .visually-hidden s popisom významu farby pre hlasové čítačky.

Tlačidlo vytvoríme napríklad takto:

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

Urobme si malú prehliadku:

Buttons in Bootstrap

buttons.html

Pokiaľ elementy <a> používame pre tlačidlá, ktoré nepresmerovávajú na inú stránku, ale sú napr. obsluhované JavaScriptom, mali by sme im dodať atribút role="button". Alebo môžeme na tieto účely používať element <button>, ktorý je sémanticky správnejší. Elementy <a> by sme mali používať ideálne len pre tlačidlá, ktoré presmerovávajú na nejakú inú adresu.

Obrysy tlačidiel

Pokiaľ má niektorý formulár mnoho farebných tlačidiel, výsledný dojem môže pôsobiť až veľmi výrazne. Z tohto dôvodu Bootstrap poskytuje aj triedy, ktoré zafarbia iba rámček a text tlačidla, pričom pozadie zostane priehľadné. Tie začínajú na .btn-outline-, napríklad .btn-outline-primary a podobne:

Buttons in Bootstrap

buttons_outline.html

Veľkosti

Podľa dôležitosti tlačidla môžeme ovplyvniť aj jeho veľkosť. Triedy sú nasledujúce:

.btn-lg - veľké tlačidlo,
.btn-sm - malé tlačidlo.

V prehliadači:

Buttons in Bootstrap

buttons_sizes.html

Stavy

Určite ste si všimli, že sa okolo tlačidla zobrazí ešte dodatočný rámček v prípade, že je aktívny (zrovna sme naň klikli a potom neklikli na nič iné). Tento rámček zmizne, ak tlačidlo nie je práve aktívnym elementom v stránke (pseudoselektor :active).

Vynútenie aktívneho štýlu

Keby sme niekedy potrebovali vykresliť neaktívne tlačidlo ako aktívne, môžeme na to použiť triedu .active. Pre sémantickú korektnosť by sme mali pre čítačky pridať aj atribút aria-pressed="true":

<button type="button" class="btn btn-primary active" aria-pressed="true">Active button</button>

Neaktívne tlačidlá

Rovnako môžeme tlačidlo nechať vykresliť ako neaktívne pomocou triedy .disabled. Pre čítačky pridáme ešte aria-disabled="true". Trieda .disabled sa hodí najmä pre odkazy, ktoré na rozdiel od tlačidiel nemôžeme zneaktívniť pomocou atribútu disabled="disabled". Bootstrap nastavuje neaktívnym tlačidlám kurzor šípky a tak na ne nemožno kliknúť. Keďže na takéto tlačidlá možno bohužiaľ "kliknúť" pomocou klávesnice, mali by sme k nim pridávať aj atribút tabindex="-1":

<button type="button" class="btn btn-primary disabled" aria-disabled="true" tabindex="-1">Inactive button</button>

Vypínače

Pomocou bootstrapového JavaScript pluginu môžeme z tlačidiel vytvoriť vypínače (togglery). Všetky bootstrapové JavaScript pluginy sú obvykle obsiahnuté v jednom .js súbore, ktorý na oficiálnej stránke stiahneme a nalinkujeme v elemente <head>.

Vypínač na rozdiel od obyčajného tlačidla drží stlačený kým ho znova nevypneme. Elementu pre získanie tohto správania priradíme data atribút data-bs-toggle="button". Ak chceme, aby bol prepínač vo východiskovom stave stlačený, pridáme triedu .active spoločne s atribútom aria-pressed="true" pre hlasové čítačky:

Togglers in Bootstrap

buttons_togglers.html

Skupiny tlačidiel

Tlačidlá môžeme zoskupiť, čím docielime ich spojenie do súvislej tlačidlovej lišty. To pôsobí dobre pokiaľ sa všetky tlačidlá týkajú napr. nejakého widgetu. Túto funkčnosť Bootstrap implementuje pomocou triedy .btn-group, ktorú priradíme elementu, zvyčajne <div>, ktorý jednotlivé tlačidlá obaľuje. Bootstrap nabáda k používa atribútu role="group" pre všetky elementy, ktoré niečo zoskupujú. U nástrojových líšt sa môžeme tiež stretnúť s použitím hodnoty role="toolbar", ktoré môžu obsahovať viacero skupín tlačidiel:

<div class="btn-group" role="group" aria-label="Candidate selection">
    <button type="button" class="btn btn-secondary">Previous</button>
    <button type="button" class="btn btn-primary">Select</button>
    <button type="button" class="btn btn-secondary">Next</button>
</div>

V prehliadači vidíme:

Button groups in Bootstrap

button_groups.html

Veľkosti

Na nastavenie veľkosti tlačidiel v skupine priraďujeme celej skupine, teda elementu <div>, jednu z týchto tried:

.btn-group-lg pre veľké tlačidlá,
nič pre štandardnú veľkosť,
.btn-group-sm pre malé tlačidlá.

Pozrime sa na kód:

<div class="btn-group btn-group-lg" role="group" aria-label="Candidate selection">
    <button type="button" class="btn btn-secondary">Previous</button>
    <button type="button" class="btn btn-primary">Select</button>
    <button type="button" class="btn btn-secondary">Next</button>
</div>

A v prehliadači uvidíme:

Button sizes in Bootstrap

button_group_sizes.html

Dropdown

Pokiaľ by sme jedno z tlačidiel chceli ako tzv. dropdown (tlačidlo s rolovacími možnosťami), vložíme ho ako ďalšiu skupinu do už existujúcej skupiny tlačidiel. Nezabudneme pripojiť JavaScript, pretože práve pomocou neho je implementované rozbaľovanie. Skupiny teda môžeme zanárať do seba. Dropdownom sa budeme venovať ďalej v kurze, takže teraz sa nimi zatiaľ nebudeme príliš zaťažovať. Len si ukážeme, ako vyzerajú:

Dropdowns in Bootstrap

button_group_dropdown.html

Zvislá skupina

Tlačidlá môžeme zoskupiť aj zvisle. Pri tomto variante nie sú dropdowny podporované. Skupine v tomto prípade vôbec nepriraďujeme triedu .btn-group a namiesto nej použijeme triedu .btn-group-vertical:

Button groups in Bootstrap

vertical_button_groups.html

Nástrojové lišty

Nástrojové lišty (toolbary) vytvoríme, keď obalíme niekoľko skupín tlačidiel triedou .btn-toolbar. Môžeme do nich vkladať aj ďalšie elementy ako napríklad inputy:

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar">
    <div class="btn-group me-2" role="group" aria-label="First group">
        <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="Second group">
        <span class="input-group-text" id="btnGroupAddon">www.</span>
        <input type="text" class="form-control" placeholder="Your domain" aria-label="Domain input field" aria-describedby="btnGroupAddon">
    </div>
</div>

Ukážka v prehliadači:

Toolbars in Bootstrap

buttons_toolbar.html

Checkboxy a radiobuttony

Aj keď sa k formulárom ešte len dostaneme, môžeme spomenúť, že ako tlačidlá v skupine môžeme naštýlovať aj aádiobuttony alebo checkboxy. Ide v podstate o kombináciu vypínačov a skupiny tlačidiel, ako sme si to ukázali vyššie:

Checkboxes and radiobuttons in Bootstrap

buttons_checkboxes_and_radiobuttons.html

Takže sme si popísali všetko ohľadom tlačidiel v Bootstrape.

V nasledujúcom cvičení, Riešené úlohy k 7.-8. lekcii CSS frameworku Bootstrap, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.

Absolvované

Označiť lekciu ako neabsolvovanú