Значке

Документација и примери за беџеве, наш мали број и компонента означавања.

Пример

Значке се прилагођавају величини непосредног надређеног елемента коришћењем релативне величине фонта и 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). Корисно ако вам недостају значке из в3.

Примарни Секундарни Успех Опасност Упозорење Инфо Светлост Дарк

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