Значки

Документация и примеры значков - наших маленьких компонентов для подсчета и создания ярлыков.

Смотреть на GitHub

Пример

Значки изменяют размер для подстройки к размеру непосредственного родительского элемента, это достигается использованием относительного размера шрифта и единиц em.

Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
<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>

Значки можно использовать как часть ссылки или кнопок, в качестве счетчика.

<button type="button" class="btn btn-primary">
  Уведомления <span class="badge badge-light">4</span>
</button>

Заметьте, что в зависимости от вида использования значки могут создать проблемы для сринридеров и подобных вспомогательных технологий. Обратите внимание, что в зависимости от того, как значки используются, они могут вводить в заблуждение пользователей программ экранного доступа и аналогичных вспомогательных технологий. В то же время дизайн значков, согласно их назначению, даёт визуальную подсказку, таким пользователям просто будет показано содержимое значка. В зависимости от конкретной ситуации эти значки могут выглядеть как случайные дополнительные слова или цифры в конце предложения, ссылки или кнопки.

Лишь пока контекст ясен (как с примером «Уведомления», где понятно, что «4» - это число уведомлений), можно включать дополнительный контекст с помощью скрытой части дополнительного текста.

<button type="button" class="btn btn-primary">
  Профиль <span class="badge badge-light">9</span>
  <span class="sr-only">непрочитанных сообщений</span>
</button>

Вариации контекста

Добавьте любой из нижеприведенных классов-модификаторов для изменения внешнего вида значка.

Главный Вторичный Успех Опасность Предупреждение Инфо Светлый Темный
<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>
Использование вспомогательных технологий

Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.

Pill badges (жетоны, таблетки)

Используйте класс-модификатор .badge-pill для придания значкам большего скругления углов (больший border-radius и дополнительный padding). Это полезно, если вам не хватает значков из v3.

Главный Вторичный Успех Опасность Предупреждение Инфо Светлый Темный
<span class="badge badge-pill badge-primary">Главный</span>
<span class="badge badge-pill badge-secondary">Вторичный</span>
<span class="badge badge-pill badge-success">Успех</span>
<span class="badge badge-pill badge-danger">Опасность</span>
<span class="badge badge-pill badge-warning">Предупреждение</span>
<span class="badge badge-pill badge-info">Инфо</span>
<span class="badge badge-pill badge-light">Светлый</span>
<span class="badge badge-pill badge-dark">Темный</span>

Использование контекстуальных классов .badge-* в элементе <a> обеспечивает значкам «активное» поведение (:hover, :active).

<a href="#" class="badge badge-primary">Главный</a>
<a href="#" class="badge badge-secondary">Вторичный</a>
<a href="#" class="badge badge-success">Успех</a>
<a href="#" class="badge badge-danger">Опасность</a>
<a href="#" class="badge badge-warning">Предупреждение</a>
<a href="#" class="badge badge-info">Инфо</a>
<a href="#" class="badge badge-light">Светлый</a>
<a href="#" class="badge badge-dark">Темный</a>