Odznaky
Dokumentace a příklady pro odznaky, náš malý počet a komponent pro označování.
Odznaky se mění tak, aby odpovídaly velikosti bezprostředního nadřazeného prvku pomocí relativní velikosti písma a emjednotek.
<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>Chcete-li změnit vzhled odznaku, přidejte kteroukoli z níže uvedených tříd modifikátorů.
<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ě.
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.
<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>Použití kontextových .badge-*tříd na <a>prvku rychle poskytuje odznaky , které lze uplatnit, se stavy umístění kurzoru a fokusu.
<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>