Odznaki
Dokumentacja i przykłady odznak, nasz składnik małej liczby i etykietowania.
Plakietki są skalowane w celu dopasowania do rozmiaru bezpośredniego elementu nadrzędnego przy użyciu względnego rozmiaru czcionki i em
jednostek.
Odznaki mogą być używane jako część linków lub przycisków, aby zapewnić licznik.
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>
Pamiętaj, że w zależności od sposobu ich użycia plakietki mogą być mylące dla użytkowników czytników ekranu i podobnych technologii wspomagających. Chociaż stylizacja odznak zapewnia wizualną wskazówkę co do ich przeznaczenia, użytkownicy ci będą po prostu prezentowani z zawartością odznaki. W zależności od konkretnej sytuacji plakietki te mogą wyglądać jak przypadkowe dodatkowe słowa lub cyfry na końcu zdania, linku lub przycisku.
O ile kontekst nie jest jasny (jak w przykładzie „Powiadomienia”, gdzie rozumie się, że „4” to liczba powiadomień), rozważ dołączenie dodatkowego kontekstu z wizualnie ukrytym fragmentem dodatkowego tekstu.
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>
Dodaj dowolną z wymienionych poniżej klas modyfikatorów, aby zmienić wygląd odznaki.
<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>
Nadawanie znaczenia technologiom wspomagającym
Użycie koloru w celu dodania znaczenia zapewnia jedynie wizualne wskazanie, które nie zostanie przekazane użytkownikom technologii wspomagających – takich jak czytniki ekranu. Upewnij się, że informacje oznaczone kolorem są oczywiste z samej treści (np. widoczny tekst) lub są zawarte w inny sposób, np. dodatkowy tekst ukryty z .sr-only
klasą.
Użyj .badge-pill
klasy modifier, aby odznaki były bardziej zaokrąglone (z większą border-radius
i dodatkową linią poziomą padding
). Przydatne, jeśli przegapisz odznaki z wersji 3.
<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>
.badge-*
Korzystanie z klas kontekstowych na <a>
elemencie szybko zapewnia odznaki z możliwością działania ze stanami najechania i fokusu.
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>