Значки

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

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

Примери

Значките се размеруваат за да одговараат на големината на непосредниот родител елемент со користење на релативна големина на фонтот и emединици. Почнувајќи од v5, значките веќе немаат стилови на фокусирање или лебдење за врски.

Наслови

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

html

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

Копчиња

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

html

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

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

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

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

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

html

<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класата со уште неколку комунални услуги без броење за погенерички индикатор.

html

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

Бои во позадина

Додадено во v5.2.0

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

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

html

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

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

html

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

CSS

Променливи

Додадено во v5.2.0

Како дел од пристапот на еволуирачки CSS променливи на Bootstrap, беџовите сега користат локални CSS променливи .badgeза подобрено прилагодување во реално време. Вредностите за променливите CSS се поставени преку Sass, така што прилагодувањето на Sass сè уште е поддржано.

  --#{$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};

Sass променливи

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