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

Badge (значки)

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

Содержание

Примеры

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

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

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

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

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

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

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

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

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

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

<button type="button" class="btn btn-primary">
  Profile <span class="badge bg-secondary">9</span>
  <span class="sr-only">unread messages</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">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
Передача смысла вспомогательным технологиям

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

Pill badges

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

Первичный Вторичный Успех Опасность Предупреждение Информация Свет Темно
<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">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>
Комментарии для сайта Cackle