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>

Zakázať zalamovanie textu

Ak nechcete, aby sa text tlačidla zalomil, môžete .text-nowrapk tlačidlu pridať triedu. V Sass môžete nastaviť $btn-white-space: nowrapvypnutie zalamovania textu pre každé tlačidlo.

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žívaní 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

Tlačidlá sa zobrazia stlačené, keď sú aktívne, s tmavším pozadím, tmavším okrajom a ak sú povolené tiene, s 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 disableddo ľubovoľného <button>prvku atribút boolean.

<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.
• Používanie zakázaných tlačidiel <a>by malo obsahovať aria-disabled="true"atribút označujúci stav prvku pre asistenčné technológie.
• Používanie zakázaných tlačidiel <a> by nemalo obsahovať hrefatribút.

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

Upozornenie na funkčnosť odkazu

Na pokrytie prípadov, keď musíte ponechať hrefatribút na zakázanom odkaze, sa .disabledtrieda pointer-events: nonepokúsi zakázať funkčnosť odkazu <a>s. Upozorňujeme, že táto vlastnosť CSS ešte nie je štandardizovaná pre HTML, ale podporujú ju všetky moderné prehliadače. Navyše, dokonca aj v prehliadačoch, ktoré podporujú pointer-events: none, zostáva navigácia pomocou klávesnice nedotknutá, čo znamená, že vidiaci používatelia klávesnice a používatelia asistenčných technológií budú môcť tieto odkazy aktivovať. Aby ste boli v bezpečí, aria-disabled="true"zahrňte do tabindex="-1"týchto odkazov okrem atribútu aj atribút, ktorý im zabráni zamerať sa na klávesnicu, a použite vlastný JavaScript na úplné zakázanie ich funkčnosti.

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" 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">
  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> 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" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

Metódy