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ý

html

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

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-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.

html

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

html

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

Přidáno ve verzi 5.2.0

Nastavte a background-colors kontrastním popředím colors našimi .text-bg-{color}pomocníky . Dříve bylo nutné ručně spárovat svůj výběr .text-{color}a .bg-{color}nástroje pro styling, které můžete stále používat, pokud chcete.

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

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-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ý

html

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

CSS

Proměnné

Přidáno ve verzi 5.2.0

Jako součást vyvíjejícího se přístupu Bootstrap proměnných CSS nyní odznaky používají místní proměnné CSS .badgepro lepší přizpůsobení v reálném čase. Hodnoty pro proměnné CSS se nastavují prostřednictvím Sass, takže přizpůsobení Sass je stále podporováno.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

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;