Odznaky
Dokumentace a příklady pro odznaky, náš malý počet a komponent pro označování.
Příklady
Odznaky se mění tak, aby odpovídaly velikosti bezprostředního nadřazeného prvku pomocí relativní velikosti písma a em
jednotek. Od verze 5 již odznaky nemají styly fokusu nebo kurzoru pro odkazy.
Nadpisy
Příklad nadpisuNový
Příklad nadpisuNový
Příklad nadpisuNový
Příklad nadpisuNový
Příklad nadpisuNový
Příklad nadpisuNový
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
Tlačítka
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 bg-secondary">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.
Umístěno
Pomocí obslužných programů upravte a .badge
a umístěte jej do rohu odkazu nebo tlačítka.
<button type="button" class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button>
Třídu můžete také nahradit .badge
několika dalšími nástroji bez počítání pro obecnější indikátor.
<button type="button" class="btn btn-primary position-relative">
Profile
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</button>
Barvy pozadí
Použijte naše třídy obslužných programů na pozadí k rychlé změně vzhledu odznaku. Vezměte prosím na vědomí, že při použití výchozího nastavení Bootstrapu .bg-light
budete pravděpodobně potřebovat nástroj .text-dark
pro barvu textu, jako je správný styl. Je to proto, že nástroje na pozadí nenastavují nic jiného než background-color
.
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-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 .visually-hidden
třídě.
Odznaky na pilulky
Použijte .rounded-pill
třídu utility k tomu, aby byly odznaky zaoblenější s větším border-radius
.
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>
Sass
Proměnné
$badge-font-size: .75em;
$badge-font-weight: $font-weight-bold;
$badge-color: $white;
$badge-padding-y: .35em;
$badge-padding-x: .65em;
$badge-border-radius: $border-radius;