Odznaki / Badges

1 242 0

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

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

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

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

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

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

Chcesz coś napisać?

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

*

*