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
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
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.
Przykład
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>
(13 głosów, średnia: 4,92 na 5)
Loading...