Odznaky

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

Na této straně

Příklady

Odznaky se mění tak, aby odpovídaly velikosti bezprostředního nadřazeného prvku pomocí relativní velikosti písma a emjednotek. Od verze 5 již odznaky nemají styly fokusu nebo kurzoru pro odkazy.

Nadpisy

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ěný

Pomocí obslužných programů upravte a .badgea 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 .badgeně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-lightbudete pravděpodobně potřebovat nástroj .text-darkpro barvu textu, jako je správný styl. Je to proto, že nástroje na pozadí nenastavují nic jiného než background-color.

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

<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-hiddentřídě.

Odznaky na pilulky

Použijte .rounded-pilltřídu utility k tomu, aby byly odznaky zaoblenější s větší border-radius.

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

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