Значки

Классы значков Bootstrap можно использовать для выделения дополнительной информации, которая добавляется к строке текста. Для создания значка примените класс .badge, а также один из классов .badge-* к элементу <span>, представляющему значок.

Пример

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <h3>25 советов по завязыванию шнурков <span class="badge badge-primary">Новое</span></h3>

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

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <span class="badge badge-primary">Главный</span> <span class="badge badge-success">Успех</span> <span class="badge badge-info">Информация</span> <span class="badge badge-warning">Предупреждение</span> <span class="badge badge-danger">Опасность</span> <span class="badge badge-light">Светлый</span> <span class="badge badge-dark">Тёмный</span>

Значки в виде пилюль

Сделайте уголки скруглёнными через класс .badge-pill.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <span class="badge badge-pill badge-primary">Главный</span> <span class="badge badge-pill badge-success">Успех</span> <span class="badge badge-pill badge-info">Информация</span> <span class="badge badge-pill badge-warning">Предупреждение</span> <span class="badge badge-pill badge-danger">Опасность</span> <span class="badge badge-pill badge-light">Светлый</span> <span class="badge badge-pill badge-dark">Тёмный</span>

Новое в Bootstrap 4

Bootstrap 3 использует метки и значки, каждый для своих собственных целей. В Bootstrap 4 значки делают то же, что и метки из Bootstrap 3. Bootstrap 4 также представил класс .badge-pill для создания скруглённых уголков.

Автор и редакторы

Автор: Йен Диксон
Последнее изменение: 12.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты