Нишонҳо

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

Дар ин саҳифа

Мисолхо

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