Значки
Документация и примеры для бейджей, нашего небольшого количества и компонента маркировки.
Примеры
Значки масштабируются в соответствии с размером непосредственного родительского элемента с использованием относительного размера шрифта и 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» — это количество уведомлений), рассмотрите возможность включения дополнительного контекста с визуально скрытым фрагментом дополнительного текста.
Позиционировано
Используйте утилиты, чтобы изменить a .badge
и поместить его в угол ссылки или кнопки.
<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
класс еще несколькими утилитами без счета для более общего индикатора.
<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>
Цвета фона
Используйте наши вспомогательные фоновые классы, чтобы быстро изменить внешний вид значка. Обратите внимание, что при использовании Bootstrap по умолчанию .bg-light
вам, вероятно, понадобится утилита цвета текста, например, .text-dark
для правильного стиля. Это связано с тем, что фоновые утилиты не устанавливают ничего, кроме background-color
.
<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
.
<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>
Сасс
Переменные
$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;