Значки

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

На этой странице

Примеры

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

Заголовки

Пример заголовока Новый

<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>

Кнопки

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

<button type="button" class="btn btn-primary">
  Оповещения <span class="badge bg-secondary">4</span>
</button>

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

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

Расположение

Используйте утилиты, чтобы изменить .badge и разместить его в углу ссылки или кнопки.

<button type="button" class="btn btn-primary position-relative">
  Входящие
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">непрочитанные сообщения</span>
  </span>
</button>

Вы также можете заменить класс .badge на несколько дополнительных утилит без подсчета для более общего индикатора.

<button type="button" class="btn btn-primary position-relative">
  Профиль
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">Новые уведомления</span>
  </span>
</button>

Цвет фона

Используйте наши служебные классы фона, чтобы быстро изменить внешний вид значка. Обратите внимание, что при использовании файла Bootstrap по умолчанию .bg-light Вам, вероятно, понадобится утилита для настройки цвета текста, такая как .text-dark для правильного оформления. Это потому, что фоновые утилиты не устанавливают ничего, кроме background-color.

Primary Secondary Success Danger Warning Info Light Dark

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

Передача смысла вспомогательным технологиям

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

Значки таблеток

Используйте служебный класс .rounded-pill, чтобы сделать значки более округлыми с большим border-radius.

Primary Secondary Success Danger Warning Info Light Dark

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>

Sass

Переменные

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;