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

Документация и примеры «значков» - для отображения значений количества, ярлыков или меток.

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

Пример

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

Заголовки

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

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

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

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

Пример заголовока Новый
Пример заголовока Новый
html
<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>

Кнопки

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

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>

Цвет фона

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

Установите background-color с контрастным 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

Переменные

Добавлено в версии 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;