Source

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>
Předávání významu asistenčním technologiím

Použití barvy k přidání významu poskytuje pouze vizuální indikaci, která nebude zprostředkována uživatelům asistenčních technologií – jako jsou čtečky obrazovky. Ujistěte se, že informace označené barvou jsou buď zřejmé ze samotného obsahu (např. viditelný text), nebo jsou zahrnuty alternativními prostředky, jako je další text skrytý ve .sr-onlytřídě.

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.

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

Když jsou tlačítka aktivní, zobrazí se stisknutá (s tmavším pozadím, tmavším okrajem a 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.
  • Deaktivovaná tlačítka by měla obsahovat aria-disabled="true"atribut označující stav prvku asistenčním technologiím.
<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>

Třída se snaží .disableddeaktivovat pointer-events: nonefunkci odkazu <a>s, ale tato vlastnost CSS ještě není standardizována. 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. Chcete-li být v bezpečí, přidejte tabindex="-1"k těmto odkazům atribut (a zabráníte jim v tom, aby se zaměřily na klávesnici) a pomocí vlastního JavaScriptu deaktivujte jejich funkčnost.

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" autocomplete="off">
  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 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>

Metody

Metoda Popis
$().button('toggle') Přepíná stav push. Dává tlačítku dojem, že bylo aktivováno.
$().button('dispose') Zničí tlačítko prvku.