Значки

Документация и примеры «значков» - для отображения значений количества, ярлыков или меток.

На этой странице

alrosadiamond.ru

Золотые браслеты с бриллиантами от ALROSA Diamonds

Натуральные бриллианты

Подарочные сертификаты

Кольца

Серьги

Примеры

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

Заголовки

Пример заголовока Новый

html

<h1>Пример заголовока <spanclass="badge bg-secondary">Новый</span></h1><h2>Пример заголовока <spanclass="badge bg-secondary">Новый</span></h2><h3>Пример заголовока <spanclass="badge bg-secondary">Новый</span></h3><h4>Пример заголовока <spanclass="badge bg-secondary">Новый</span></h4><h5>Пример заголовока <spanclass="badge bg-secondary">Новый</span></h5><h6>Пример заголовока <spanclass="badge bg-secondary">Новый</span></h6>

Кнопки

Значки можно использовать как часть ссылок или кнопок для счетчика.

html

<buttontype="button"class="btn btn-primary"> Оповещения <spanclass="badge text-bg-secondary">4</span></button>

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

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

Расположение

Используйте утилиты, чтобы изменить .badge и разместить его в углу ссылки или кнопки.

html

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

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

html

<buttontype="button"class="btn btn-primary position-relative"> Профиль
<spanclass="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle"><spanclass="visually-hidden">Новые уведомления</span></span></button>

Цвет фона

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

Установите background-color с контрастным color переднего плана с помощью наших помощников .text-bg-{color}. Раньше требовалось вручную сопоставлять выбранные вами .text-{color} и .bg-{color} утилиты для оформления, которые вы по-прежнему можете использовать, если хотите.

PrimarySecondarySuccessDangerWarningInfoLightDark

html

<spanclass="badge text-bg-primary">Primary</span><spanclass="badge text-bg-secondary">Secondary</span><spanclass="badge text-bg-success">Success</span><spanclass="badge text-bg-danger">Danger</span><spanclass="badge text-bg-warning">Warning</span><spanclass="badge text-bg-info">Info</span><spanclass="badge text-bg-light">Light</span><spanclass="badge text-bg-dark">Dark</span>

Совет по специальным возможностям. Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Пожалуйста, убедитесь, что значение очевидно из самого содержания (например, видимого текста) или включено с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .visually-hidden.

Значки таблеток

Используйте служебный класс .rounded-pill, чтобы сделать значки более округлыми с большим border-radius.

PrimarySecondarySuccessDangerWarningInfoLightDark

html

<spanclass="badge rounded-pill text-bg-primary">Primary</span><spanclass="badge rounded-pill text-bg-secondary">Secondary</span><spanclass="badge rounded-pill text-bg-success">Success</span><spanclass="badge rounded-pill text-bg-danger">Danger</span><spanclass="badge rounded-pill text-bg-warning">Warning</span><spanclass="badge rounded-pill text-bg-info">Info</span><spanclass="badge rounded-pill text-bg-light">Light</span><spanclass="badge rounded-pill text-bg-dark">Dark</span>

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