Bootstrap 4 odznaki
Przykładowy nagłówek Nowy
Przykładowy nagłówek Nowy
Przykładowy nagłówek Nowy
Przykładowy nagłówek Nowy
Przykładowy nagłówek Nowy
Przykładowy nagłówek Nowy
Plakietki służą do dodawania dodatkowych informacji do dowolnej treści. Użyj .badgeklasy razem z klasą kontekstową (np . .badge-secondary) w ramach <span>
elementów, aby utworzyć prostokątne plakietki. Zwróć uwagę, że plakietki skalują się, aby dopasować rozmiar elementu nadrzędnego (jeśli istnieje):
Przykład
<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>
Odznaki kontekstowe
Podstawowy
Wtórny
Powodzenie
Niebezpieczeństwo
Ostrzeżenie
Informacje
Światło
Ciemny
Użyj dowolnej z klas kontekstowych ( .badge-*), aby zmienić kolor plakietki:
Przykład
<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>
Odznaki pigułek
Podstawowy
Wtórny
Powodzenie
Niebezpieczeństwo
Ostrzeżenie
Informacje
Światło
Ciemny
Użyj .badge-pillklasy, aby odznaki były bardziej okrągłe:
Przykład
<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>
Odznaka wewnątrz elementu
Przykład użycia plakietki wewnątrz przycisku:
Przykład
<button type="button" class="btn btn-primary">
Messages <span
class="badge badge-light">4</span>
</button>