Tlačidlá

Použite vlastné štýly tlačidiel Bootstrapu pre akcie vo formulároch, dialógoch a ďalších s podporou viacerých veľkostí, stavov a ďalších.

Príklady

Bootstrap obsahuje niekoľko preddefinovaných štýlov tlačidiel, z ktorých každý slúži svojmu vlastnému sémantickému účelu a obsahuje niekoľko doplnkov pre väčšiu kontrolu.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Značky tlačidiel

Triedy .btnsú navrhnuté na použitie s <button>prvkom. Tieto triedy však môžete použiť aj na prvkoch <a>alebo <input>(hoci niektoré prehliadače môžu použiť mierne odlišné vykresľovanie).

Pri použití tried tlačidiel na <a>prvkoch, ktoré sa používajú na spustenie funkcií na stránke (ako je zbalenie obsahu), namiesto odkazovania na nové stránky alebo sekcie v rámci aktuálnej stránky by tieto odkazy mali byť priradené, role="button"aby vhodne sprostredkovali svoj účel pomocným technológiám, ako napr. čítačky obrazovky.

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Tlačidlá obrysu

Potrebujete gombík, ale nie tie mohutné farby pozadia, ktoré prinášajú? Nahraďte predvolené triedy modifikátorov triedami .btn-outline-*na odstránenie všetkých obrázkov a farieb pozadia na ľubovoľnom tlačidle.

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Veľkosti

Máte chuť na väčšie alebo menšie tlačidlá? Pridajte .btn-lgalebo .btn-smpre ďalšie veľkosti.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Vytvorte tlačidlá na úrovni bloku – tie, ktoré presahujú celú šírku rodiča – pridaním .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

Aktívny stav

Keď sú tlačidlá aktívne, zobrazia sa stlačené (s tmavším pozadím, tmavším okrajom a vloženým tieňom). Nie je potrebné pridávať triedu do <button>s, pretože používajú pseudotriedu . Stále však môžete vynútiť rovnaký aktívny vzhľad pomocou .active(a zahrnúť aria-pressed="true"atribút), ak potrebujete replikovať stav programovo.

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

Deaktivovaný stav

Ak chcete, aby tlačidlá vyzerali neaktívne, pridajte disabledbooleovský atribút do ľubovoľného <button>prvku.

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

Zakázané tlačidlá používajúce <a>prvok sa správajú trochu inak:

• <a>s nepodporujú disabledatribút, takže musíte pridať .disabledtriedu, aby sa vizuálne javila ako zakázaná.
• Zahrnuté sú niektoré štýly vhodné do budúcnosti, ktoré deaktivujú všetky pointer-eventstlačidlá ukotvenia. V prehliadačoch, ktoré túto vlastnosť podporujú, zakázaný kurzor vôbec neuvidíte.
• Deaktivované tlačidlá by mali obsahovať aria-disabled="true"atribút označujúci stav prvku pre asistenčné technológie.

<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

Doplnok tlačidiel

Urobte viac s tlačidlami. Stavy ovládacích tlačidiel alebo vytváranie skupín tlačidiel pre viac komponentov, ako sú panely s nástrojmi.

Prepínajte stavy

Pridať data-toggle="button", ak chcete prepnúť stav tlačidla active. Ak vopred prepínate tlačidlo, musíte manuálne pridať .activetriedu a aria-pressed="true" do <button>.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

Začiarkavacie políčko a prepínače

Štýly Bootstrapu .buttonmožno použiť na iné prvky, ako napríklad <label>s, aby sa zabezpečilo prepínanie začiarkavacieho políčka alebo prepínača štýlu. Pridajte data-toggle="buttons"do, .btn-groupktoré obsahuje tieto upravené tlačidlá, aby ste umožnili ich prepínanie prostredníctvom JavaScriptu a pridajte .btn-group-toggleštýl <input>s vo vašich tlačidlách. Všimnite si, že môžete vytvoriť jednotlivé tlačidlá napájané vstupom alebo ich skupiny.

Zaškrtnutý stav týchto tlačidiel sa aktualizuje iba prostredníctvom clickudalosti na tlačidle. Ak na aktualizáciu vstupu použijete inú metódu – napr. pomocou <input type="reset">alebo manuálnym použitím vlastnosti vstupu checked– budete musieť túto možnosť zapnúť .activemanuálne <label>.

Upozorňujeme, že vopred začiarknuté tlačidlá vyžadujú, aby ste manuálne pridali .activetriedu do vstupu <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

Metódy