Документация и примеры значков, нашего небольшого количества и компонента маркировки.
Пример
Значки масштабируются, чтобы соответствовать размеру непосредственного родительского элемента, используя относительный размер шрифта и единицы измерения em.
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
<h1>Пример заголовка <span class="badge badge-secondary">Новый</span></h1>
<h2>Пример заголовка <span class="badge badge-secondary">Новый</span></h2>
<h3>Пример заголовка <span class="badge badge-secondary">Новый</span></h3>
<h4>Пример заголовка <span class="badge badge-secondary">Новый</span></h4>
<h5>Пример заголовка <span class="badge badge-secondary">Новый</span></h5>
<h6>Пример заголовка <span class="badge badge-secondary">Новый</span></h6>Значки можно использовать как часть ссылок или кнопок для счетчика.
<button type="button" class="btn btn-primary">
Уведомления <span class="badge badge-light">4</span>
</button>Обратите внимание, что в зависимости от того, как они используются, значки могут сбивать с толку пользователей программ чтения с экрана и аналогичных вспомогательных технологий. Хотя стиль значков дает визуальную подсказку об их назначении, этим пользователям просто будет представлено содержимое значка. В зависимости от конкретной ситуации эти значки могут выглядеть как случайные дополнительные слова или числа в конце предложения, ссылки или кнопки.
Если контекст не ясен (как в примере «Уведомления», где подразумевается, что «4» - это количество уведомлений), рассмотрите возможность включения дополнительного контекста с визуально скрытым фрагментом дополнительного текста.
<button type="button" class="btn btn-primary">
Профиль <span class="badge badge-light">9</span>
<span class="sr-only">непрочитанные сообщения</span>
</button>Контекстные вариации
Добавьте любой из указанных ниже классов модификаторов, чтобы изменить внешний вид значка.
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>Передача смысла вспомогательным технологиям
Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .sr-only.
Значки таблетки
Используйте класс-модификатор .badge-pill , чтобы сделать значки более округлыми (с большим радиусом границы border-radius и дополнительным горизонтальным заполнением padding). Полезно, если Вы пропустите значки из v3.
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>Ссылки
Использование контекстных классов .badge-* в элементе <a> быстро предоставляет значки действенные с состояниями наведения и фокуса.
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>