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