Bootstrap4 Значки
Значки в основном используются для выделения новых или непрочитанных элементов. Чтобы использовать значок, просто добавьте.badgeкласс плюс класс цвета с указанным значением (например,.badge-secondary) к<span>элемента достаточно. Значки могут изменяться в зависимости от размера родительского элемента:
Пример
<h1>Тестовый заголовок<span class="badge badge-secondary">Новое</span></h1>
<h2>Тестовый заголовок<span class="badge badge-secondary">Новое</span></h2>
<h3>Тестовый заголовок<span class="badge badge-secondary">Новое</span></h3>
<h4>Тестовый заголовок<span class="badge badge-secondary">Новое</span></h4>
<h5>Тестовый заголовок<span class="badge badge-secondary">Новое</span></h5>
<h6>Тестовый заголовок<span class="badge badge-secondary">Новое</span></h6>
Попробуйте »
Значки различных цветовых типов
Ниже перечислены значки всех цветовых типов:
Пример
<span class="badge badge-primary">Основной</span>
<span class="badge badge-secondary">Вторичный</span>
<span class="badge badge-success">Успешный</span>
<span class="badge badge-danger">Опасный</span>
<span class="badge badge-warning">Предупреждающий</span>
<span class="badge badge-info">Информационный</span>
<span class="badge badge-light">Светлый</span>
<span class="badge badge-dark">Тёмный</span>
Попробуйте »
Значки-таблетки
Используйте класс.badge-pill, чтобы задать значки в форме пилюли:
Пример
<span class="badge badge-pill badge-default">Default</span>
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-danger">Danger</span>
Попробуйте »
Вставка значков в элементы
В следующем примере значок встраивается в кнопку:
Пример
<button type="button" class="btn btn-primary">
Сообщения <span class="badge badge-light">4</span>
</button>
Попробуйте »