Odznaki / Badges

9 180 0
Sprawdź najnowszą wersję komponentu badges zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać.

Przeglądając sklepy internetowe można natknąć się na wiele „odznak”. Informują one o aktualnej promocji, pokazują ile produktów znajdziemy w wybranej kategorii, umieszcza się w nim tagi produktów czy wypisuje aktualnie włączone filtry wyszukiwania czy ilość produktów w koszyku. Ale owe odznaki widzimy także chociażby na FB gdzie wyświetla się nam ilość powiadomień. Bootstrap również oferuje taki element.

Podstawowy przykład

W podstawowym przykładzie dołączymy odznakę do nagłówka. Wewnątrz znacznika <h*> umieszczamy element <span> z klasami .badge .badge-* gdzie pod * dopisujemy znane nam klasy kontekstowe Bootstrapa:

  • .badge-primary
  • .badge-secondary
  • .badge-success
  • .badge-danger
  • .badge-warning
  • .badge-info
  • .badge-light
  • .badge-dark

Przykład

Nazwa produktu Promocja!

Nazwa produktu Promocja!

Nazwa produktu Promocja!

Nazwa produktu Promocja!

Nazwa produktu Promocja!
Nazwa produktu Promocja!
Nazwa produktu Promocja!

Nazwa produktu Promocja!

Kod


<h1>Nazwa produktu <span class="badge badge-primary">Promocja!</span></h1>
<h2>Nazwa produktu <span class="badge badge-secondary">Promocja!</span></h2>
<h3>Nazwa produktu <span class="badge badge-success">Promocja!</span></h3>
<h4>Nazwa produktu <span class="badge badge-danger">Promocja!</span></h4>
<h5>Nazwa produktu <span class="badge badge-warning">Promocja!</span></h5>
<h6>Nazwa produktu <span class="badge badge-info">Promocja!</span></h6>
<h5>Nazwa produktu <span class="badge badge-light">Promocja!</span></h5>
<h4>Nazwa produktu <span class="badge badge-dark">Promocja!</span></h4>

Odznaki w przyciskach

Wspomniałem wcześniej, że odznaki mogą służyć również do pokazywania ilości powiadomień. My korzystając z Bootstrap możemy umieścić je wewnątrz buttona. Wystarczy, że wewnątrz kodu przycisku, prócz jego opisu umieścimy element <span> z klasami .badge .badge-*. Tu oczywiście możemy kombinować z klasami kontekstowymi zarówno przycisków jak i odznak.

Przykład

Kod


<button type="button" class="btn btn-primary">
  Wiadomości <span class="badge badge-light">4</span>
</button>
<button type="button" class="btn btn-warning">
  Wiadomości <span class="badge badge-dark">4</span>
</button>
<button type="button" class="btn btn-dark">
  Wiadomości <span class="badge badge-light">4</span>
</button>

Kolory odznak

O klasach kontekstowych a co za tym idzie wbudowanych w Bootstrap kolorach wspomniałem na początku. Ale nie zaszkodzi przypomnieć:)

Przykład

badge-primary badge-secondary badge-success badge-danger badge-warning badge-info badge-light badge-dark

Kod


<span class="badge badge-primary">badge-primary</span>
<span class="badge badge-secondary">badge-secondary</span>
<span class="badge badge-success">badge-success</span>
<span class="badge badge-danger">badge-danger</span>
<span class="badge badge-warning">badge-warning</span>
<span class="badge badge-info">badge-info</span>
<span class="badge badge-light">badge-light</span>
<span class="badge badge-dark">badge-dark</span>

Okrągłe odznaki

Pokazane wcześniej odznaki co prawda miały zaokrąglone rogi ale były bardziej prostokątne. Aby dodać im więcej kolistości, musimy każdej odznace dodać klasę .badge-pill

Przykład

badge-primary badge-secondary badge-success badge-danger badge-warning badge-info badge-light badge-dark

Kod


<span class="badge badge-pill badge-primary">badge-primary</span>
<span class="badge badge-pill badge-secondary">badge-secondary</span>
<span class="badge badge-pill badge-success">badge-success</span>
<span class="badge badge-pill badge-danger">badge-danger</span>
<span class="badge badge-pill badge-warning">badge-warning</span>
<span class="badge badge-pill badge-info">badge-info</span>
<span class="badge badge-pill badge-light">badge-light</span>
<span class="badge badge-pill badge-dark">badge-dark</span>

Odznaki jako linki

Wcześniej do stworzenia odznaki używaliśmy elementu <span> ale nic nie stoi na przeszkodzie by nasze odznaki były linkami.

Kod


<a href="#" class="badge badge-primary">badge-primary</a>
<a href="#" class="badge badge-secondary">badge-secondary</a>
<a href="#" class="badge badge-success">badge-success</a>
<a href="#" class="badge badge-danger">badge-danger</a>
<a href="#" class="badge badge-warning">badge-warning</a>
<a href="#" class="badge badge-info">badge-info</a>
<a href="#" class="badge badge-light">badge-light</a>
<a href="#" class="badge badge-dark">badge-dark</a>

Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (13 głosów, średnia: 4,92 na 5)
Loading...

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*