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