Bootstrap 4 odznaky
Příklad nadpisuNový
Příklad nadpisuNový
Příklad nadpisuNový
Příklad nadpisuNový
Příklad nadpisuNový
Příklad nadpisuNový
Odznaky se používají k přidání dalších informací k libovolnému obsahu. Použijte .badgetřídu spolu s kontextovou třídou (jako .badge-secondary) v rámci <span>
prvků k vytvoření obdélníkových odznaků. Všimněte si, že odznaky se přizpůsobí velikosti nadřazeného prvku (pokud existuje):
Příklad
<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>
Kontextové odznaky
Hlavní
Sekundární
Úspěch
Nebezpečí
Varování
Info
Světlo
Temný
.badge-*Ke změně barvy odznaku použijte kteroukoli z kontextových tříd ( ):
Příklad
<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>
Odznaky na pilulky
Hlavní
Sekundární
Úspěch
Nebezpečí
Varování
Info
Světlo
Temný
Použijte .badge-pilltřídu, aby byly odznaky kulatější:
Příklad
<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>
Odznak uvnitř prvku
Příklad použití odznaku uvnitř tlačítka:
Příklad
<button type="button" class="btn btn-primary">
Messages <span
class="badge badge-light">4</span>
</button>