bootstrap tutorials kurs
|

Etykiety w – Bootstrap (Badges and Labels)

przezAurelia Sypniewska
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.