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 facilisis in </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.
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.