Значки
Значки числовые показатели, сколько элементов связаны со ссылкой:
Новости 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»