Значки
Документација и примери за беџови, нашата мала компонента за броење и етикетирање.
Значките се размеруваат за да одговараат на големината на непосредниот родител елемент со користење на релативна големина на фонтот и 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). Корисно ако ги пропуштите значките од v3.
<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>