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
1 2 3 4 5 6 7 8 | <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
1 2 3 4 5 6 7 8 9 | <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
1 2 3 4 5 6 7 8 | <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
1 2 3 4 5 6 7 8 | <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
1 2 3 4 5 6 7 8 | <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> |
Loading...