Bootstrap — Badges (бейджи) — ИТ Шеф
В этой статье познакомимся с компонентом фреймворков Bootstrap 3 и 4 под названием Badges (в Bootstrap 3 – Labels и Badges). Данный компонент предназначен для создания на страницах сайта бейджов.
Создание бейджа
Бейдж в Bootstrap — это прямоугольник, который содержит внутри себя текст. Бейдж является строчным элементом (display: inline). Его можно поместить в любую часть текстового контента сайта.
Создание бейджа осуществляется посредством помещения некоторого текста в элемент, например span и добавления к этому элементу двух классов (в Bootstrap 3 — label и label-default, в Bootstrap 4 — badge и badge-secondary).
Bootstrap 3:
<h2>Заголовок <span>Новый</span></h2>
Bootstrap 4:
<h2>Заголовок <span>Новый</span></h2>
Изменение цвета бейджа
Цвет фона бейджа можно изменить.
В Bootstrap 3 изменение цвета бейджа выполняется с помощью класса label-{theme}.
Вместо {theme} необходимо указать название темы (например, warning).
<!-- Bootstrap 3 --> <!-- Бейдж, имеющий тему default --> <span>Важный текст</span> <!-- Бейдж, имеющий тему primary --> <span>Важный текст</span> <!-- Бейдж, имеющий тему success --> <span>Важный текст</span> <!-- Бейдж, имеющий тему info --> <span>Важный текст</span> <!-- Бейдж, имеющий тему warning --> <span>Важный текст</span> <!-- Бейдж, имеющий тему danger --> <span>Важный текст</span>
В Bootstrap 4 это осуществляется с помощью класса badge-{theme}. Вместо {theme} необходимо указать название темы (например, danger).
<!-- Bootstrap 4 --> <!-- Бейдж, имеющий тему primary --> <span>Важный текст</span> <!-- Бейдж, имеющий тему secondary --> <span>Важный текст</span> <!-- Бейдж, имеющий тему success --> <span>Важный текст</span> <!-- Бейдж, имеющий тему danger --> <span>Важный текст</span> <!-- Бейдж, имеющий тему warning --> <span>Важный текст</span> <!-- Бейдж, имеющий тему info --> <span>Важный текст</span> <!-- Бейдж, имеющий тему light --> <span>Важный текст</span> <!-- Бейдж, имеющий тему dark --> <span>Важный текст</span>
Бейджи со скруглёнными углами (только Bootstrap 4)
Для того чтобы сделать бейдж с более большим радиусом скругления углов добавьте дополнительно к badge и badge-{theme} класс badge-pill.
<!-- Bootstrap 4 --> <!-- Бейдж со скруглёнными углами --> <span>Важный текст</span>
Бейдж-ссылка
В Bootstrap 3 создание бейдж-ссылки осуществляется посредством добавления классов label и label-{theme} к HTML элементу a.
<!-- Bootstrap 3 --> <!-- Бейдж-ссылка --> <a href="#">Важный текст</a>
В Bootstrap 4 создание бейдж-ссылки осуществляется посредством добавления классов badge и badge-{theme} к HTML элементу a.
<!-- Bootstrap 4 --> <!-- Бейдж-ссылка --> <a href="#">Важный текст</a>
Бейджи для отображения количества сообщений и уведомлений
Бейджы также можно использовать для вывода такой информации как количество полученных сообщений, товаров в корзине, запросов в друзья и т.п.
В этом виде бейджи используются как часть ссылки или кнопки.
Bootstrap 3:
<!-- Bootstrap 3 -->
<!-- Бейдж как часть ссылки -->
<a href="#">Входящие сообщения <span>42</span></a>
<!-- Бейдж как часть кнопки -->
<button type="button">
Корзина <span>4</span>
</button>Bootstrap 4:
<!-- Bootstrap 4 -->
<button type="button">
Сообщения <span>4</span>
</button>Для обеспечения поддержки вспомогательных технологий, таких как программ чтения экрана, в эти бейджы необходимо включать дополнительный поясняющий контент.
<!-- Bootstrap 4 -->
<button type="button">
Личный кабинет <span>7</span>
<span>непрочитанных сообщений</span>
</button>Бейджи · Bootstrap
- Пример
- Контекстные варианты
- Таблетки-значки
- ссылки
Документация и примеры для значков, нашего компонента для небольшого количества и маркировки.
Пример
Значки масштабируются в соответствии с размером непосредственного родительского элемента с использованием относительного размера шрифта и em единиц.
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка
НовыйПример заголовка
НовыйПример заголовка
НовыйПример заголовка
НовыйПример заголовка
НовыйПример заголовка
Новый
Значки можно использовать как часть ссылок или кнопок для обеспечения счетчика.
<тип кнопки="кнопка">
Уведомления 4
Обратите внимание, что в зависимости от того, как они используются, значки могут сбивать с толку пользователей программ чтения с экрана и аналогичных вспомогательных технологий. В то время как стиль значков обеспечивает визуальную подсказку относительно их назначения, этим пользователям будет просто представлено содержимое значка. В зависимости от конкретной ситуации эти значки могут выглядеть как случайные дополнительные слова или цифры в конце предложения, ссылки или кнопки.
Если контекст не ясен (как в примере с «Уведомлениями», где подразумевается, что «4» — это количество уведомлений), рассмотрите возможность включения дополнительного контекста с визуально скрытым фрагментом дополнительного текста.
<тип кнопки="кнопка"> Профиль 9 непрочитанные сообщения
Контекстные варианты
Добавьте любой из перечисленных ниже классов модификаторов, чтобы изменить внешний вид значка.
Первичный Среднее Успех Опасность Предупреждение Информация Свет Темный
Основной Вторичное Успех Опасность Предупреждение Информация Легкий Темный
Передача смысла вспомогательным технологиям
Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью .ср-только класс.
Бейджи для таблеток
Используйте класс модификатора .badge-pill , чтобы сделать значки более округлыми (с большим радиусом границы и дополнительным горизонтальным отступом ).
Полезно, если вы пропустите значки из v3.
Первичный Среднее Успех Опасность Предупреждение Информация Свет Темный
Основной Вторичное Успех Опасность Предупреждение Информация Легкий Темный
Использование контекстных классов .badge-* для элемента позволяет быстро получить интерактивных значков с состояниями наведения и фокуса.
Первичный Среднее Успех Опасность Предупреждение Информация Свет Темный
Основной Вторичный Успех Опасно Предупреждение Информация Легкий Темный
Индикаторы выполнения Bootstrap
❮ Предыдущая Далее ❯
Основной индикатор выполнения
Индикатор выполнения может использоваться для отображения пользователю, как далеко он продвинулся в
процесс.
Bootstrap предоставляет несколько типов индикаторов выполнения.
Индикатор выполнения по умолчанию в Bootstrap выглядит следующим образом:
70% завершения
Чтобы создать индикатор выполнения по умолчанию, добавьте класс Примечание. Индикаторы выполнения не поддерживаются в Internet Explorer 9 и
ранее (потому что они используют переходы и анимацию CSS3 для достижения некоторых из
их эффекты). Примечание: Индикатор выполнения с меткой выглядит следующим образом: Удалите класс .progress к элементу Пример
aria-valuemin=»0″ aria-valuemax=»100″>
Выполнено на 70%
Индикатор выполнения с меткой
. из индикатора выполнения, чтобы показать видимый процент:
sr-only Пример
< div role="progressbar" aria-valuenow="70"
aria-valuemin=»0″ aria-valuemax=»100″>
70%
Цветные индикаторы выполнения
Контекстные классы используются для предоставления «значения через цвета».
Контекстные классы, которые можно использовать с индикаторами выполнения:
-
.progress-bar-success -
.прогресс-бар-информация -
.прогресс-бар-предупреждение -
.прогресс-бар-опасность
Завершено на 40 % (успех)
Завершено на 50 % (информация)
Завершено на 60 % (предупреждение)
Завершено на 70 % (опасно)
В следующем примере показано, как создать индикаторы выполнения с различными контекстные классы:
Пример
aria-valuemin=»0″ aria-valuemax=»100″>
Выполнено на 40 % (успешно)
progress-bar-striped 
