Нишонҳо
Ҳуҷҷатҳо ва намунаҳо барои нишонаҳо, ҷузъҳои хурди ҳисоб ва тамғагузории мо.
Мисолхо
Миқёси нишонаҳо барои мувофиқ кардани андозаи унсури волидайн бо истифода аз андозаи ҳуруф ва 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" шумораи огоҳиҳост), дохил кардани контексти иловагиро бо порчаи визуалӣ пинҳоншудаи матни иловагӣ баррасӣ кунед.
Ҷойгир карда шудааст
Утилитҳоро барои тағир додани а .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;