Последние учебники веб-разработки
 

Bootstrap Badges and Labels


Значки

Значки числовые показатели, сколько элементов связаны со ссылкой:

Новости 5
Комментарии 10
Обновления 2

Числа (5, 10, и 2) являются знаки.

Используйте .badge класс в пределах <span> элементы для создания значков:

пример

<a href="#">News <span class="badge">5</span></a><br>
<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>
Попробуй сам "

Значки могут также использоваться внутри других элементов, таких как кнопки:



В следующем примере показано, как добавить значки кнопок:

пример

<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
Попробуй сам "

Этикетки

Метки используются для предоставления дополнительной информации о чем-то:

Пример Новый

Пример Новый

Пример Новый

Пример Новый

Пример Новый
Пример Новый

Используйте .label класс, а затем один из шести классов контекстных .label-default , .label-primary , .label-success , .label-info , .label-warning или .label-danger , в пределах <span> элемента создать ярлык:

пример

<h1>Example <span class="label label-default">New</span></h1>
<h2>Example <span class="label label-default">New</span></h2>
<h3>Example <span class="label label-default">New</span></h3>
<h4>Example <span class="label label-default">New</span></h4>
<h5>Example <span class="label label-default">New</span></h5>
<h6>Example <span class="label label-default">New</span></h6>
Попробуй сам "

Следующий пример показывает все контекстные классы надписей:

По умолчанию Этикетка Первичная Этикетка Успех Этикетка информация Этикетка Этикетка Предупреждение опасности на этикетке

пример

<span class="label label-default">Default Label</span>
<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Info Label</span>
<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span>
Попробуй сам "

Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4»