Значкі
Дакументацыя і прыклады значкоў, наш невялікі кампанент падліку і маркіроўкі.
Значкі маштабуюцца ў адпаведнасці з памерам непасрэдна бацькоўскага элемента з выкарыстаннем адноснага памеру шрыфта і 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>