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. To sú 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á hojne využijeme jednak pri formulároch, ale aj na všetkých miestach, kde by bol obyčajný odkaz málo výrazný. Aby sme udržali kvalitný užívateľský zážitok, mali by byť všetky dôležité akcie prístupné pod tlačidlami, či už sa jedná o pridanie tovaru do košíka alebo o tlačidlo "Vyhľadať" niekde v sidebare.

Tlačidlá obvykle vytvárame z elementov <button>, <a> alebo <input>, ktorým pridáme triedu .btn. Tým 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á pre nebezpečné akcie,
.btn-warning - žltá pre zvýraznenie dôležitých akcií,
.btn-info - neutrálna modrá pre neutrálne akcie,
.btn-light - svetlounca š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 k tomu sú nasledujúce:

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

V prehliadači:

Buttons in Bootstrap

buttons_sizes.html

Stavy

Iste 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 v prípade, že 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 dodať 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 aj nechať vykresliť ako neaktívne pomocou triedy .disabled. Pre čítačky dodá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 naozaj na ne nemožno kliknúť. Keďže na takéto tlačidlá možno bohužiaľ "kliknúť" ešte 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 Bootstrap 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č v predvolenom stave stlačený, dodáme triedu .active spoločne s atribútom aria-pressed="true" pre hlasové čítačky:

Toggles in Bootstrap

buttons_toggles.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, obvykle <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ú. Môžeme sa tiež stretnúť s použitím hodnoty role="toolbar" u nástrojových líšt, ktoré môžu obsahovať viacero skupín tlačidiel:

<div class="btn-group" role="group" aria-label="Výběr kandidáta">
    <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 rozbaľovanie implementované. Skupiny teda môžeme zanárať do seba. Dropdownom sa budeme venovať ďalej v kurze a teraz sa s nimi zatiaľ nebudeme zaťažovať, ukážme si len 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 rádiobuttóny

Aj keď sa k formulárom ešte len dostaneme, môžeme si spomenúť, že ako tlačidlá v skupine môžeme naštylovať aj rá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

Tým sme si popísali všetko ohľadom tlačidiel v Bootstrape.

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

Článok pre vás napísal David Hartinger

Užívateľské hodnotenie:

1 hlasov

David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.

Aktivity