Значки (или бейджи) в Bootstrap 5 - это небольшие элементы, которые используются для обозначения количества, ярлыков или меток. Они могут быть полезными для выделения дополнительной информации в текстовых строках, кнопках или ссылках.

Примеры использования значков:

Заголовки

Вы можете добавить значок к заголовкам, чтобы подчеркнуть важность или новизну контента:

<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>

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

Кнопки или ссылки

Значки можно использовать как часть ссылок или кнопок для отображения счетчика или уведомлений:

<button type="button" class="btn btn-primary">
  Уведомления <span class="badge bg-secondary">4</span>
</button> 

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

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

<button type="button" class="btn btn-primary">
  Профиль <span class="badge bg-secondary">9</span>
  <span class="sr-only">непрочитанных сообщений</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">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>

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>

Позиционирование

Используйте утилиты для изменения положения значка относительно ссылки или кнопки:

<button type="button" class="btn btn-primary position-relative">
  Входящие <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+ <span class="visually-hidden">непрочитанных сообщений</span>
  </span>
</button>

Вы также можете заменить класс .badge другими утилитами для создания более общего индикатора.

CSS

Переменные

Добавлено в версии 5.2.0

В рамках развивающегося подхода Bootstrap к переменным CSS значки теперь используют локальные переменные CSS в .badge для расширенной настройки в реальном времени. Значения переменных CSS задаются через Sass, поэтому настройка Sass по-прежнему поддерживается.

scss/_badge.scss

--#{$prefix}badge-padding-x: #{$badge-padding-x};
--#{$prefix}badge-padding-y: #{$badge-padding-y};
@include rfs($badge-font-size, --#{$prefix}badge-font-size);
--#{$prefix}badge-font-weight: #{$badge-font-weight};
--#{$prefix}badge-color: #{$badge-color};
--#{$prefix}badge-border-radius: #{$badge-border-radius};

Sass переменные

scss/_variables.scss

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               var(--#{$prefix}border-radius);

FAQ (ответы на часто задаваемые вопросы)

<h1>Заголовок <span class="badge bg-secondary">Новое</span></h1>

<button type="button" class="btn btn-primary">
  Уведомления <span class="badge bg-secondary">4</span>
</button>

Заключение

Значки в Bootstrap 5 предоставляют гибкий способ обозначения данных и меток. Они могут быть использованы в заголовках, кнопках, ссылках и других элементах интерфейса. Независимо от того, нужно ли вам отобразить количество уведомлений или выделить новый контент, значки помогут вам сделать это эффективно и стильно. Используйте их с умом, чтобы улучшить визуальное восприятие вашего веб-сайта!