Значке

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

На овој страници

Примери

Значке се прилагођавају величини непосредног надређеног елемента коришћењем релативне величине фонта и emјединица. Од верзије 5, значке више немају фокус или стилове лебдења за везе.

Наслови

Пример насловаНова

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

Дугмад

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

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

Имајте на уму да у зависности од начина на који се користе, значке могу бити збуњујуће за кориснике читача екрана и сличних помоћних технологија. Док стил беџева пружа визуелни знак њихове намене, овим корисницима ће једноставно бити представљен садржај значке. У зависности од конкретне ситуације, ове значке могу изгледати као насумичне додатне речи или бројеви на крају реченице, везе или дугмета.

Осим ако је контекст јасан (као у примеру „Обавештења“, где се подразумева да је „4“ број обавештења), размислите о укључивању додатног контекста са визуелно скривеним делом додатног текста.

Позиционирано

Користите услужне програме да измените а .badgeи поставите га у угао везе или дугмета.

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

Такође можете заменити .badgeкласу са још неколико услужних програма без бројања за општији индикатор.

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

Боје позадине

Користите наше позадинске услужне класе да брзо промените изглед значке. Имајте на уму да када користите Боотстрап подразумевани .bg-light, вероватно ће вам требати услужни програм за боју текста као што .text-darkје за правилан стил. То је зато што позадински услужни програми не постављају ништа осим background-color.

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

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

Преношење значења помоћним технологијама

Коришћење боје за додавање значења пружа само визуелну индикацију, која се неће пренети корисницима помоћних технологија – као што су читачи екрана. Уверите се да су информације означене бојом или очигледне из самог садржаја (нпр. видљиви текст), или су укључене путем алтернативних средстава, као што је додатни текст скривен .visually-hiddenкласом.

Значке за пилуле

Користите .rounded-pillкласу утилити да би значке биле заобљеније са већим border-radius.

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

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

Сасс

Променљиве

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;