Значке

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

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

Примери

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

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

Додато у в5.2.0

Поставите а background-colorса контрастним првим планом colorса нашим .text-bg-{color}помагачима . Раније је било потребно да ручно упарите свој избор .text-{color}и .bg-{color}услужне програме за стилизовање, које и даље можете користити ако желите.

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

хтмл

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

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

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

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

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

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

хтмл

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

ЦСС

Променљиве

Додато у в5.2.0

Као део Боотстрап-овог еволуирајућег приступа ЦСС променљивим, значке сада користе локалне ЦСС променљиве .badgeза побољшано прилагођавање у реалном времену. Вредности за ЦСС променљиве се постављају преко Сасс-а, тако да је и Сасс прилагођавање и даље подржано.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

Сасс варијабле

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