bootstrap tutorials kurs

Etykiety w – Bootstrap (Badges and Labels)

Czas czytania: < 1 minut

Bootstrap w swoich zbiorach zawiera wiele różnych ciekawych rozwiązań. Jedną z nich są etykiety i odznaki, plakietki czyli Badges and Labels.

Sposobów wykorzystań ich może być wiele. Przykładowo plakietki mogą zostać użyte do opisania ilości dokumentów do pobrania znajdujących się na stronie, do której prowadzi link. Z kolei etykiety jak sama nazwa mówi jako dodatkowy opis przycisku.

Jak stworzyć Odznakę, plakietkę (Bootstrap Badges)

Poniżej znajduje się przykładowa lista wraz z odznaką:

  • 14 Cras justo odio
  • 2 Dapibus ac facilisis in
  • 1 Morbi leo risus
    • 14 Cras justo odio
    • 2 Dapibus ac facilisis in
    • 1 Morbi leo risus

Jak widać odznaka to mały okrągły obiekt z liczbą umieszczoną w środku. Oczywiści kształt odznaki można zmienić nadpisując jej właściwości w stylach CSS. Tak jednak wygląda ona domyślnie w bibliotece Bootstrap.

Najistotniejszym fragmętem jest

1 

To w nim umieszczamy liczbę. Tekstu raczej nie polecam jeśli che się zachować kształt.

Poniżej plakietka na przycisku

Etykiety

Etykiety są wykorzystywane do dostarczenia dodatkowych informacji o czymś.

Przykładowe etykiety:

Default Label
Primary Label
Success Label
Info Label
Warning Label
Danger Label

Default Label
Primary Label
Success Label
Info Label
Warning Label
Danger Label

Jak widać w tym wypadku mamy wybór kilku kolorów etykiet. Oczywiście na ich bazie można samodzielnie stworzyć kolejne.