Source

Значкі

Дакументацыя і прыклады значкоў, наш невялікі кампанент падліку і маркіроўкі.

Прыклад

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