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 4 (form)
Bootstrap 4 предоставляет стили по умолчанию, которые применяются к большинству элементов управления формы. Он также предоставляет классы для определенных целей, которые мы подробнее рассмотрим ниже.
Базовая форма
Используйте класс Bootstrap .form-control для текстовых элементов <input>, <textarea> и <select>, чтобы применить базовое оформление и ширину элемента в 100%.
Так же, оберните лэйблы (<label>)и элементы управления формы внутри тега <fieldset> с помощью класса Bootstrap .form-group, применяемого для выставления оптимального расстояния между элементами. В качестве альтернативы fieldset вы можете использовать <div> или другой блоковый элемент.
Пример простой формы в Bootstrap 4:
<form action="">
<fieldset>
<label for="first_name">First Name</label>
<input type="text">
</fieldset>
<fieldset>
<label for="last_name">Last Name</label>
<input type="text">
</fieldset>
<button type="submit">Submit</button>
</form>Горизонтальная форма
В предыдущем примере, элементы форм располагались вертикально (один под другим).
Давайте рассмотрим пример, где элементы формы располагаются горизонтально.
блок 1
Используйте класс Bootstrap .form-inline, чтобы элементы формы отображались как inline-block и выравнивались по левому краю. Чтобы добавить пробел между элементами, используйте утилиту spacer (например, mr-sm-2).
<form action=""> <label for="first_name">First Name</label> <input type="text"> <label for="last_name">Last Name</label> <input type="text"> <button type="submit">Submit</button> </form>
Скрытые метки (label)
В полях ввода всегда должны указываться метки, иначе люди с ограниченными возможностями столкнутся с проблемой при использовании вашей страницы.
Здесь мы используем .sr-only, чтобы скрыть метки. Мы также добавляем атрибут-заполнитель placeholder, чтобы подсказывать пользователю, что вводить в конкретное поле.
<form action=""> <label for="first_name">First Name</label> <input type="text" placeholder="First name"> <label for="last_name">Last Name</label> <input type="text" placeholder="Last name"> <button type="submit">Submit</button> </form>
Горизонтальные метки (label)
Вы можете использовать сетку Bootstrap для расположения элементов форм и их меток (лэйблов) горизонтально.
Просто укажите, сколько столбцов должен охватывать каждый элемент. В частности, добавьте класс .row к .form-group и класс .col-*-* или .col-* для каждого столбца.
Вы также должны добавить класс .col-form-label к элементу <label>, чтобы расположить метку вертикально по середине, относительно элементов ввода текста.
<div>
<form action="">
<div>
<label for="first_name">First Name</label>
<div>
<input type="text">
</div>
</div>
<div>
<label for="last_name">Last Name</label>
<div>
<input type="text">
</div>
</div>
<div>
<div>
<button type="submit">Submit</button>
</div>
</div>
</form>
</div> Вы можете заменить .row на .form-row чтобы уменьшить отступы между столбцами и сделать форму более компактной.
Размеры элементов форм
Вы можете использовать .form-control-lg и .form-control-sm в Bootstrap 4 для увеличения или уменьшения размера элемента управления вводом (input, select).
<div> <input type="text" placeholder="Малый размер"> </div> <div> <input type="text" placeholder="Размер по умолчанию"> </div> <div> <input type="text" placeholder="Большой размер"> </div>
Размер элементов label
Вы можете добавить .col-form-label-sm и .col-form-label-lg к вашим меткам, чтобы размер метки соответствовал элементу управления формы.
<form>
<div>
<label for="colFormLabelSm">Малый размер</label>
<div>
<input type="email" placeholder="Малый размер">
</div>
</div>
<div>
<label for="colFormLabel">Размер по умолчанию</label>
<div>
<input type="email" placeholder="Размер по умолчанию">
</div>
</div>
<div>
<label for="colFormLabelLg">Большой размер</label>
<div>
<input type="email" placeholder="Большой размер">
</div>
</div>
</form>Текст подсказки для элементов формы
Bootstrap 4 предоставляет класс .
Вам также следует использовать атрибут .aria-descriptionby, чтобы связать текст справки с элементом управления формы. Это гарантирует, что программы чтения с экрана смогут продиктовать текст подсказки, когда пользователь сосредоточится на элементе управления формы.
<label for="accountId">Поле формы</label> <input type="text" aria-describedby="helpAccountId"> <span>Текст подсказки или пояснения.</span>
блок 3
Бейджи · Bootstrap
- Пример
- Контекстные варианты
- Таблетки-значки
- ссылки
Документация и примеры бейджей, нашего компонента для небольшого количества и маркировки.
Пример
Значки масштабируются в соответствии с размером непосредственного родительского элемента с использованием относительного размера шрифта и 
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка
НовыйПример заголовка
НовыйПример заголовка
НовоеПример заголовка
НовыйПример заголовка
НовыйПример заголовка
Новый
Значки можно использовать как часть ссылок или кнопок для обеспечения счетчика.
<тип кнопки="кнопка">
Уведомления 4
Обратите внимание, что в зависимости от того, как они используются, значки могут сбивать с толку пользователей программ чтения с экрана и аналогичных вспомогательных технологий. В то время как стиль значков обеспечивает визуальную подсказку об их назначении, этим пользователям будет просто представлено содержимое значка.
В зависимости от конкретной ситуации эти значки могут выглядеть как случайные дополнительные слова или цифры в конце предложения, ссылки или кнопки.
Если контекст не ясен (как в примере с «Уведомлениями», где подразумевается, что «4» — это количество уведомлений), рассмотрите возможность включения дополнительного контекста с визуально скрытым фрагментом дополнительного текста.
<тип кнопки="кнопка"> Профиль 9 непрочитанные сообщения
Контекстные варианты
Добавьте любой из перечисленных ниже классов модификаторов, чтобы изменить внешний вид значка.
Первичный Среднее Успех Опасность Предупреждение Информация Свет Темный
Основной Вторичное Успех Опасность Предупреждение Информация Легкий Темный
Передача смысла вспомогательным технологиям
Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана.
Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью .ср-только класс.
Бейджи для таблеток
Используйте класс модификатора .badge-pill , чтобы сделать значки более округлыми (с большим радиусом границы и дополнительным горизонтальным отступом ). Полезно, если вы пропустите значки из v3.
Первичный Среднее Успех Опасность Предупреждение Информация Свет Темный
Основной Вторичное Успех Опасность Предупреждение Информация Легкий Темный
Использование контекстных классов .badge-* для элемента позволяет быстро получить интерактивных значков с состояниями наведения и фокуса.
Первичный Среднее Успех Опасность Предупреждение Информация Свет Темный
Основной Вторичный Успех Опасно Предупреждение Информация Легкий Темный
Индикаторы выполнения Bootstrap
❮ Предыдущая Далее ❯
Основной индикатор выполнения
Индикатор выполнения может использоваться для отображения пользователю, как далеко он продвинулся в процесс.
Bootstrap предоставляет несколько типов индикаторов выполнения.
Индикатор выполнения по умолчанию в Bootstrap выглядит следующим образом:
70% завершения
Чтобы создать индикатор выполнения по умолчанию, добавьте класс Попробуйте сами » Примечание. Примечание: Чтобы улучшить доступность для
людям, использующим программы чтения с экрана, следует включать атрибуты aria-*. Индикатор выполнения с меткой выглядит следующим образом: Удалите класс .progress к элементу Пример
aria-valuemin=»0″ aria-valuemax=»100″>
Выполнено на 70%
Индикаторы выполнения не поддерживаются в Internet Explorer 9 и
ранее (потому что они используют переходы и анимацию CSS3 для достижения некоторых из
их эффекты). Индикатор выполнения с меткой
.sr-only из индикатора выполнения, чтобы показать видимый процент: Пример
< div role="progressbar" aria-valuenow="70"
aria-valuemin=»0″ aria-valuemax=»100″>
70%
Попробуйте сами »
Цветные индикаторы выполнения
Контекстные классы используются для предоставления «значения через цвета».
Контекстные классы, которые можно использовать с индикаторами выполнения:
-
.
progress-bar-success -
.прогресс-бар-информация -
.прогресс-бар-предупреждение -
.прогресс-бар-опасность
progress-bar-success Завершено на 40 % (успех)
Завершено на 50 % (информация)
Завершено на 60 % (предупреждение)
Завершено на 70 % (опасно)
В следующем примере показано, как создать индикаторы выполнения с различными контекстные классы:
Пример
aria-valuemin=»0″ aria-valuemax=»100″>
Выполнено на 40 % (успешно)
progress-bar-striped 
