Dokumentacja i przykłady odznak, nasz składnik małej liczby i etykietowania.
Przykład
Plakietki są skalowane w celu dopasowania do rozmiaru bezpośredniego elementu nadrzędnego przy użyciu względnego rozmiaru czcionki i emjednostek.
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
Odznaki mogą być używane jako część linków lub przycisków, aby zapewnić licznik.
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. Podczas gdy 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.
Wariacje kontekstowe
Dodaj dowolną z niżej wymienionych klas modyfikatorów, aby zmienić wygląd odznaki.
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-onlyklasą.
Odznaki pigułki
Użyj .badge-pillklasy modifier, aby odznaki były bardziej zaokrąglone (z większą border-radiusi dodatkową linią poziomą padding). Przydatne, jeśli przegapisz odznaki z wersji 3.