Badge w bibliotece Bootstrap to mały element interfejsu służący do wyróżniania krótkiej informacji, najczęściej liczby lub etykiety. W starszych wersjach Bootstrapa badge często pokazywał liczbę elementów powiązanych z linkiem, np. liczbę wiadomości, komentarzy albo aktualizacji.
Do czego służy Badge?
Badge stosuje się, gdy trzeba pokazać krótką informację obok tekstu, przycisku lub linku, np.:
- liczba nowych wiadomości,
- liczba komentarzy,
- status elementu,
- krótka etykieta typu „Nowe”, „Beta”, „Promocja”.
W pytaniu egzaminacyjnym poprawny rysunek to ten, na którym obok napisów takich jak News, Comments, Updates widoczne są małe niebieskie prostokąty z liczbami. To właśnie typowy wygląd elementu Badge.
Przykład użycia
<a href="#">
Wiadomości <span class="badge">6</span>
</a>
W nowszych wersjach Bootstrapa stosuje się zwykle także klasy kolorów tła:
<span class="badge bg-primary">6</span>
<span class="badge bg-success">Nowe</span>
<span class="badge bg-danger">10</span>
Badge a inne elementy Bootstrapa
Badge nie jest ikoną, alertem ani przyciskiem. Różnice są ważne na egzaminie:
- glyphicon — ikona, np. koperta, drukarka, lupa,
- alert — szeroki komunikat informacyjny lub ostrzegawczy,
- button — przycisk akcji,
- badge — mała etykieta lub licznik przy tekście.
Jak rozpoznać Badge na ilustracji?
Szukaj niewielkiego elementu z krótkim tekstem lub liczbą, zwykle umieszczonego obok większego napisu. Badge ma charakter informacyjny i nie zajmuje całego wiersza jak alert.