Значки

Документация и примери за значки, нашия малък компонент за броене и етикетиране.

Пример

Значките се мащабират, за да съответстват на размера на непосредствения родителски елемент, като използват относителен размер на шрифта и emединици.

Примерно заглавиеНов

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

Значките могат да се използват като част от връзки или бутони за осигуряване на брояч.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

Имайте предвид, че в зависимост от това как се използват, значките може да са объркващи за потребителите на екранни четци и подобни помощни технологии. Въпреки че стилът на значките предоставя визуален знак за тяхната цел, на тези потребители просто ще бъде представено съдържанието на значката. В зависимост от конкретната ситуация, тези значки може да изглеждат като произволни допълнителни думи или цифри в края на изречение, връзка или бутон.

Освен ако контекстът не е ясен (както при примера „Известия“, където се разбира, че „4“ е броят на известията), помислете за включване на допълнителен контекст с визуално скрит допълнителен текст.

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

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

Добавете някой от посочените по-долу класове модификатори, за да промените външния вид на значка.

Първичен Втори Успех опасност Внимание Информация Светлина Тъмно

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

Предаване на значение на помощните технологии

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

Значки за хапчета

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

Първичен Втори Успех опасност Внимание Информация Светлина Тъмно

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

Връзки

Използването на контекстуалните .badge-*класове върху <a>елемент бързо осигурява функционални значки със състояния на задържане и фокусиране.

Първичен Втори Успех опасност Внимание Информация Светлина Тъмно

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>