Source

Значки

Документация и примеры для бейджей, нашего небольшого количества и компонента маркировки.

Пример

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

Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

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

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

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

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

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

Контекстные вариации

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

Начальный Среднее Успех Опасность Предупреждение Информация Легкий Темный
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
Передача смысла вспомогательным технологиям

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

Таблетки значки

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

Начальный Среднее Успех Опасность Предупреждение Информация Легкий Темный
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

Использование контекстных .badge-*классов для <a>элемента позволяет быстро создавать интерактивные значки с состояниями наведения и фокуса.

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>