Значки в Bootstrap 5

Классы значков Bootstrap можно использовать для выделения дополнительной информации, добавляемой к текстовой строке.

Чтобы создать значок, примените класс .badge, а также один из контекстных классов .bg-* к элементу <span>, представляющему значок.

Пример

Здесь мы создаём значок по умолчанию, используя class="badge badge-primary".

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <style>body { margin: 1rem; }</style> <h3>Смотрите, вот это значок… <span class="badge bg-primary">Новое</span></h3>

Контекстные классы

Для значков доступны следующие контекстные классы.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <style>body { margin: 1rem; }</style> <span class="badge bg-primary">Основной</span> <span class="badge bg-success">Успех</span> <span class="badge bg-info">Инфо</span> <span class="badge bg-warning">Предупреждение</span> <span class="badge bg-danger">Опасность</span> <span class="badge bg-light">Светлый</span> <span class="badge bg-dark">Тёмный</span>

Значки в виде таблетки

Сделайте углы более закругленными с помощью класса .badge-pill.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <style>body { margin: 1rem; }</style> <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> <span class="badge rounded-pill bg-light">Светлый</span> <span class="badge rounded-pill bg-dark">Тёмный</span>
Автор: Йен Диксон
Последнее изменение: 22.02.2024