Значки

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

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

Примери

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

Наслови

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

<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“ е бројот на известувања), размислете да вклучите дополнителен контекст со визуелно скриен дел од дополнителен текст.

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

Користете услужни програми за да го измените a .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>

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

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