8. diel - Bootstrap - Tlačidlá

V minulej lekcii, Kvíz - Grid systémy v Bootstrap , sme dokončili štýly CSS frameworku Bootstrap pre bežné HTML elementy. V dnešnom CSS Bootstrap tutoriálu sa presunieme do ďalšej časti frameworku a 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 je často potrebujeme.

Tlačidla

Tlačidlá hojne využijeme jednak u formulárov, 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 BTW.

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, východiskové šedá.
.btn-success - Zelená na úspešnej akcie.
.btn-danger - Červená pre nebezpečné akcie.
.btn-warning - Žltá pre zvýraznenie dôležitých podujatí.
.btn-info - Neutrálny modrá pre neutrálne akcie.
.btn-light - Svetlučko sivá.
.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 .sr-only s popisom významu farby pre hlasové čítačky.

Tlačidlo teda vytvoríme napr. Nasledovne:

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

Urobme si malú prehliadku:

Tlačítka v Bootstrap

tlacitka.html

Ak elementy <a> používame pre tlačidlá, ktoré nepřesměrovávají na inú stránku, ale sú napr. Obsluhované JavaScriptom, mali by sme im dodať atribút role="button". Alebo môžeme pre tieto účely používať element <button>, ktorý je sémanticky správnejšie. Elementy <a> by sme mali používať ideálne len pre tlačidlá, ktoré presmerú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ž moc výrazne. Z tohto dôvodu Bootstrap poskytuje tiež triedy, ktoré zafarbia iba rámček a text tlačidla, pričom pozadie zostane priehľadné. Tie začínajú na .btn-outline-, napr. .btn-outline-primary a podobne.

Tlačítka v Bootstrap

tlacitka_obrysy.html

Veľkosti

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

.btn-lg - Veľké tlačidlo
.btn-sm - Malé tlačidlo
.btn-block - Blokové tlačidlo, zaberajúce v predvolenom stave celý riadok

Tlačítka v Bootstrap

tlacitka_velikosti.html

Stavy

Iste ste si všimli, že sa okolo tlačidla zobrazí ešte dodatočný rámik v prípade, že je aktívna (zrovna sme naň klikli a potom neklikol na nič iné). Tento rám 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ívny, môžeme na to použiť triedu .active. Pre sémantickú korektnosť by sme mali pre čítačky dodať i atribút aria-pressed="true".

Neaktívne tlačidlá

Rovnako môžeme tlačidlo i 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 nedá kliknúť. Keďže na takéto tlačidla možno bohužiaľ "kliknúť" ešte pomocou klávesnice, mali by sme k nim pridávať aj atribút tabindex="-1".

Vypínače

Pomocou Bootstrapového JavaScript pluginu môžeme z tlačidiel vytvoriť vypínača (Toggler). Všetky Bootstrap JS pluginy sú obvykle obsiahnuté v jednom .js súboru, ktorý na oficiálnej stránke stiahnete a nalinkujete v elemente <head>. Vypínač na rozdiel od obyčajného tlačidla drží stlačený kým ho znovu nevypneme. Elementu na získanie tohto správania priradíme dáta atribút data-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.

Vypínače v Bootstrap

tlacitka_vypinace.html

Skupiny tlačidiel

Tlačidlá môžeme zoskupiť, čím docielime ich spojenie do súvislej tlačidlové lišty. To pôsobí dobre ak 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.

Skupinu tlačidiel vytvoríme nasledujúcim spôsobom:

<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 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ť viac skupín tlačidiel.

výsledok:

Skupiny tlačítek v Bootstrap

tlacitka_skupiny.html

Veľkosti

K 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á

Velikosti tlačítek v Bootstrap

tlacitka_skupiny_velikosti.html

Dropdown

Ak 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 ponoriť do seba. Dropdownům sa budeme venovať ďalej v kurze a teraz sa s nimi zatiaľ nebudeme zaťažovať, ukážme si len ako vyzerajú:

Dropdowny v Bootstrap

tlacitka_skupiny_dropdown.html

Zvislá skupina

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

Skupiny tlačítek v Bootstrap

tlacitka_svisle_skupiny.html

Nástrojovej lišty

Nástrojovej lišty (toolbarmi) vytvoríme, keď obalíme niekoľko skupín tlačidiel. Môžeme do nich vkladať aj ďalšie elementy ako napr. Input.

Toolbary v Bootstrap

tlacitka_toolbar.html

Checkboxy a RadioButton

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

Checkboxy a radiobuttony v Bootstrap

tlacitka_checkboxy_a_radiobuttony.html

Tým sme si popísali všetko ohľadom tlačidiel v Bootstrap. V budúcej lekcii, Riešené úlohy k 7.-8. lekciu Bootstrap CSS frameworku , sa vrhneme na väčšie tému, ktorým budú formuláre a všetky prvky, ktoré s nimi súvisia.

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