Значки

Маленький и адаптивный ярлык для добавления контекста к любому содержанию.

Пример

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

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
<h1>Example heading <span class="badge badge-default">New</span></h1>
<h2>Example heading <span class="badge badge-default">New</span></h2>
<h3>Example heading <span class="badge badge-default">New</span></h3>
<h4>Example heading <span class="badge badge-default">New</span></h4>
<h5>Example heading <span class="badge badge-default">New</span></h5>
<h6>Example heading <span class="badge badge-default">New</span></h6>

Контекстные вариации

Добавьте любой из перечисленных ниже классов модификаторов, чтобы изменить внешний вид значка.

Default Primary Success Info Warning Danger
<span class="badge badge-default">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>

Передача значения ассистивным технологиям

Использование цвета для добавления значения обеспечивает только визуальную индикацию, которая не будет передаваться пользователям ассистивных технологий, таких как screen readers (программы для чтения экрана). Убедитесь, что информация, выделенная цветом, либо очевидна из самого содержания (например, видимый текст), либо включается с помощью альтернативных средств, таких как дополнительный текст, скрытый классом .sr-only.

Pill badges

Используйте класс модификаторов .badge-pill, чтобы сделать значки округленными (с увеличением border-radius и дополнительным горизонтальным padding). Полезно, если вы забыли значки из v3.

Default Primary Success Info Warning Danger
<span class="badge badge-pill badge-default">Default</span>
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-danger">Danger</span>