Vianoce v ITnetwork sú tu! Dobí si teraz kredity a získaj až 80 % extra kreditov na e-learningové kurzy ZADARMO. Zisti viac.
Hľadáme nové posily do ITnetwork tímu. Pozri sa na voľné pozície a pridaj sa k najagilnejšej firme na trhu - Viac informácií.

8. diel - Bootstrap - Tlačidlá

Predchádzajúci
Ďalší

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 Search 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_outli­ne.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:

Togglers in Bootstrap
buttons_toggler­s.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="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_si­zes.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_drop­down.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_grou­ps.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_checkbo­xes_and_radio­buttons.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í.


 

Predchádzajúci článok
Bootstrap - Tabuľky
Všetky články v sekcii
Kompletný kurz CSS frameworku Bootstrap
Preskočiť článok
(neodporúčame)
Riešené úlohy k 7.-8. lekciu Bootstrap CSS frameworku
Článok pre vás napísal David Hartinger
Avatar
Užívateľské hodnotenie:
5 hlasov
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity