Значки

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

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

Примеры

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

Заголовки

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

html

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

Кнопки

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

html

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

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

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

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

Используйте утилиты для изменения .badge и позиционирования его в углу ссылки или кнопки.

html

<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 несколькими дополнительными утилитами без счетчика для более общего индикатора.

html

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

Цвета фона

Добавлено в v5.2.0

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

Primary Secondary Success Danger Warning Info Light Dark

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.

Primary Secondary Success Danger Warning Info Light Dark

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

Переменные

Добавлено в v5.2.0

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

scss/_badge.scss

--#{$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 переменные

scss/_variables.scss

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               var(--#{$prefix}border-radius);