Tlačítka

Použijte vlastní styly tlačítek Bootstrapu pro akce ve formulářích, dialogových oknech a dalších s podporou více velikostí, stavů a ​​dalších.

Příklady

Bootstrap obsahuje několik předdefinovaných stylů tlačítek, z nichž každý slouží svému vlastnímu sémantickému účelu, s několika doplňky pro větší 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ázat zalamování textu

Pokud nechcete, aby se text tlačítka zalomil, můžete .text-nowrapk tlačítku přidat třídu. V Sass můžete nastavit $btn-white-space: nowrapzakázání zalamování textu pro každé tlačítko.

Značky tlačítek

Třídy .btnjsou navrženy pro použití s <button>​​prvkem. Tyto třídy však můžete také použít na elementech <a>nebo <input>(ačkoli některé prohlížeče mohou použít mírně odlišné vykreslování).

Při použití tříd tlačítek na <a>prvcích, které se používají ke spouštění funkcí na stránce (jako je sbalení obsahu), spíše než odkazování na nové stránky nebo sekce v rámci aktuální stránky by tyto odkazy měly být uvedeny, role="button"aby vhodně sdělily svůj účel pomocným technologiím, jako je např. čteč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čítka obrysu

Potřebujete tlačítko, ale ne ty mohutné barvy pozadí, které přinášejí? Nahraďte výchozí třídy modifikátorů .btn-outline-*těmi, které odstraní všechny obrázky a barvy pozadí na libovolném tlačítku.

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

Velikosti

Máte rádi větší nebo menší tlačítka? Přidejte .btn-lgnebo .btn-smpro další velikosti.

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

Vytvořte tlačítka na úrovni bloku – ta, která zabírají celou šířku nadřazeného prvku – přidání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>

Aktivní stav

Tlačítka se zobrazí stisknutá, když jsou aktivní, s tmavším pozadím, tmavším okrajem a pokud jsou povoleny stíny, s vloženým stínem. Není potřeba přidávat třídu do <button>s, protože používají pseudotřídu . Stále však můžete vynutit stejný aktivní vzhled pomocí .active(a zahrnout aria-pressed=“true”atribut), pokud potřebujete programově replikovat stav.

<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

Přidáním disabledatributu boolean do libovolného <button>prvku změníte vzhled tlačítek jako neaktivní.

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

Deaktivovaná tlačítka pomocí <a>prvku se chovají trochu jinak:

• <a>s nepodporují disabledatribut, takže musíte přidat .disabledtřídu, aby se vizuálně jevila jako zakázaná.
• Jsou zahrnuty některé budoucí styly, které deaktivují všechna pointer-eventstlačítka ukotvení. V prohlížečích, které tuto vlastnost podporují, zakázaný kurzor vůbec neuvidíte.
• Použití deaktivovaných tlačítek <a>by mělo obsahovat aria-disabled="true"atribut označující stav prvku asistenčním technologiím.
• Použití deaktivovaných tlačítek <a> by nemělo obsahovat hrefatribut.

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

Upozornění na funkčnost odkazu

K pokrytí případů, kdy musíte zachovat hrefatribut na zakázaném odkazu, se .disabledtřída pointer-events: nonepokusí zakázat funkci odkazu <a>s. Všimněte si, že tato vlastnost CSS ještě není standardizována pro HTML, ale všechny moderní prohlížeče ji podporují. Navíc i v prohlížečích, které podporují pointer-events: none, zůstává navigace pomocí klávesnice nedotčena, což znamená, že vidící uživatelé klávesnice a uživatelé asistenčních technologií budou moci tyto odkazy stále aktivovat. Abychom byli v bezpečí, aria-disabled="true"zahrňte do těchto odkazů kromě atributu také tabindex="-1"atribut, který jim zabrání v tom, aby se zaměřily na klávesnici, a použijte vlastní JavaScript k úplnému zakázání jejich 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>

Plugin tlačítka

Udělejte více s tlačítky. Stavy ovládacích tlačítek nebo vytváření skupin tlačítek pro více komponent, jako jsou panely nástrojů.

Přepínat stavy

Přidat data-toggle="button", chcete-li přepnout activestav tlačítka. Pokud předem přepínáte tlačítko, musíte ručně přidat .activetřídu a aria-pressed="true" do <button>.

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

Zaškrtávací políčko a přepínače

Styly Bootstrapu .buttonlze aplikovat na další prvky, jako je <label>s, pro přepínání stylu zaškrtávacích políček nebo přepínačů. Přidejte data-toggle="buttons"do a .btn-groupobsahující tato upravená tlačítka, abyste umožnili jejich přepínání pomocí JavaScriptu a přidejte .btn-group-togglestyl <input>s ve vašich tlačítkách. Všimněte si, že můžete vytvořit jednotlivá tlačítka napájená ze vstupu nebo jejich skupiny.

Zaškrtnutý stav těchto tlačítek se aktualizuje pouze prostřednictvím clickudálosti na tlačítku. Pokud k aktualizaci vstupu použijete jinou metodu – např. pomocí <input type="reset">nebo ručním použitím vlastnosti vstupu checked– budete muset tuto možnost .activezapnout <label>ručně.

Všimněte si, že předem zaškrtnutá tlačítka vyžadují ruční přidání .activetřídy 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>

Metody