Значки

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

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

Примеры

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

Заголовки

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

HTML

<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>

Кнопки

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

HTML

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">4</span>
</button>

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

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

Позиционировано

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

HTML

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

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

HTML

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

Цвета фона

Добавлено в версии 5.2.0

Установите background-colorконтрастный передний план colorс помощью наших .text-bg-{color}помощников . Раньше требовалось вручную сочетать выбранные вами утилиты .text-{color}и .bg-{color}утилиты для стиля, которые вы по-прежнему можете использовать, если хотите.

Начальный Среднее Успех Опасность Предупреждение Информация Легкий Темный

HTML

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

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

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

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

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

Начальный Среднее Успех Опасность Предупреждение Информация Легкий Темный

HTML

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

CSS

Переменные

Добавлено в версии 5.2.0

В рамках развивающегося подхода Bootstrap к переменным CSS значки теперь используют локальные переменные CSS .badgeдля расширенной настройки в реальном времени. Значения переменных CSS задаются через Sass, поэтому настройка Sass по-прежнему поддерживается.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

переменные 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;