Нишонҳо

Ҳуҷҷатҳо ва намунаҳо барои нишонаҳо, ҷузъҳои хурди ҳисоб ва тамғагузории мо.

Мисол

Миқёси нишонаҳо барои мувофиқ кардани андозаи унсури волидайн бо истифода аз андозаи ҳуруф ва 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>