Odznaky

Dokumentace a příklady pro odznaky, náš malý počet a komponent pro označování.

Příklad

Odznaky se mění tak, aby odpovídaly velikosti bezprostředního nadřazeného prvku pomocí relativní velikosti písma a emjednotek.

Příklad nadpisuNový

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

Odznaky lze použít jako součást odkazů nebo tlačítek k poskytnutí počítadla.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

Upozorňujeme, že v závislosti na tom, jak se používají, mohou být odznaky pro uživatele čteček obrazovky a podobných asistenčních technologií matoucí. Zatímco styl odznaků poskytuje vizuální vodítko, pokud jde o jejich účel, těmto uživatelům bude jednoduše předložen obsah odznaku. V závislosti na konkrétní situaci se tyto odznaky mohou jevit jako náhodná dodatečná slova nebo čísla na konci věty, odkazu nebo tlačítka.

Pokud není kontext jasný (jako v příkladu „Oznámení“, kde se rozumí, že „4“ je počet oznámení), zvažte přidání dalšího kontextu vizuálně skrytým dodatečným textem.

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

Kontextové variace

Chcete-li změnit vzhled odznaku, přidejte kteroukoli z níže uvedených tříd modifikátorů.

Hlavní Sekundární Úspěch Nebezpečí Varování Info Světlo Temný

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

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

Odznaky na pilulky

Použijte .badge-pilltřídu modifikátoru, aby byly odznaky zaoblenější (s větší border-radiusa další horizontální padding). Užitečné, pokud vám chybí odznaky z v3.

Hlavní Sekundární Úspěch Nebezpečí Varování Info Světlo Temný

<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

Odkazy

Použití kontextových .badge-*tříd na <a>prvku rychle poskytuje odznaky , které lze uplatnit, se stavy umístění kurzoru a fokusu.

Hlavní Sekundární Úspěch Nebezpečí Varování Info Světlo Temný

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>