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
<ul class="list-group">
<li class="list-group-item"> <span class="badge">14</span> Cras justo odio </li>
<li class="list-group-item"> <span class="badge">2</span> Dapibus ac&nbsp;facilisis in&nbsp;</li>
<li class="list-group-item"> <span class="badge">1</span> Morbi leo risus </li>
</ul>

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

<span class="badge">1</span>

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

Poniżej plakietka na przycisku

<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>

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

<p><span class="label label-default">Default Label</span><br>
<span class="label label-primary">Primary Label</span><br>
<span class="label label-success">Success Label</span><br>
<span class="label label-info">Info Label</span><br>
<span class="label label-warning">Warning Label</span><br>
<span class="label label-danger">Danger Label</span></p>

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