Значки
Документация и примеры «значков» - наших маленьких компонентов для подсчета и создания ярлыков.
Пример
«Значки» изменяют размер для подстройки к размеру непосредственного родительского элемента, это достигается использованием относительного размера шрифта и единиц em
. Начиная с версии 5, значки больше не имеют стилей фокуса или наведения для ссылок.
Пример заголовка New
Пример заголовка New
Пример заголовка New
Пример заголовка New
Пример заголовка New
Пример заголовка New
<h1>Пример заголовка <span class="badge bg-secondary">New</span></h1>
<h2>Пример заголовка <span class="badge bg-secondary">New</span></h2>
<h3>Пример заголовка <span class="badge bg-secondary">New</span></h3>
<h4>Пример заголовка <span class="badge bg-secondary">New</span></h4>
<h5>Пример заголовка <span class="badge bg-secondary">New</span></h5>
<h6>Пример заголовка <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>
Цвет фона
Добавьте любой из нижеприведенных классов-модификаторов для изменения внешнего вида «значка». Обратите внимание, что при использовании .bg-light
по умолчанию в Bootstrap, для правильного оформления понадобится утилита для настройки цвета текста, например .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>