Перейти к основному содержанию Перейти к навигации по документации

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

Примеры

Значки масштабируются, чтобы соответствовать размеру непосредственного родительского элемента, используя относительный размер шрифта и единицы измерения 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;