Нишонҳо

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

Дар ин саҳифа

Мисолхо

Миқёси нишонаҳо барои мувофиқ кардани андозаи унсури волидайн бо истифода аз андозаи ҳуруф ва emвоҳидҳои нисбӣ. Аз v5, нишонаҳо дигар барои истинодҳо сабкҳои фокус ё ҳоверро надоранд.

Сарлавҳаҳо

Сарлавҳаи мисолНав

html

<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>

Тугмаҳо

Нишонҳо метавонанд ҳамчун як қисми истинодҳо ё тугмаҳо барои таъмин кардани ҳисобкунак истифода шаванд.

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">4</span>
</button>

Аҳамият диҳед, ки вобаста ба тарзи истифода шудани онҳо, нишонаҳо метавонанд барои корбарони экрани хонандагон ва технологияҳои ёрирасони шабеҳ печида бошанд. Дар ҳоле, ки ороиши нишонаҳо нишонаи визуалии ҳадафи онҳоро фароҳам меорад, ба ин корбарон танҳо мундариҷаи нишона дода мешавад. Вобаста ба вазъияти мушаххас, ин нишонаҳо метавонанд ба калимаҳои иловагӣ ё рақамҳои тасодуфӣ дар охири ҷумла, пайванд ё тугма монанд бошанд.

Агар контекст равшан набошад (ба мисли мисоли "Огоҳиҳо", ки дар он ҷо фаҳмида мешавад, ки "4" шумораи огоҳиҳост), дохил кардани контексти иловагиро бо порчаи визуалӣ пинҳоншудаи матни иловагӣ баррасӣ кунед.

Ҷойгир карда шудааст

Утилитҳоро барои тағир додани а .badgeва ҷойгир кардани он дар кунҷи пайванд ё тугма истифода баред.

html

<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синфро бо якчанд утилитаҳои дигар бидуни ҳисоб барои нишондиҳандаи умумӣ иваз кунед.

html

<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>

Рангҳои замина

Дар v5.2.0 илова карда шудааст

Бо ёварони мо як background-colorсафҳаи муқобилро муқаррар кунед. Қаблан лозим буд, ки интихоб ва утилитаҳои худро барои ороиши дастӣ ҷуфт кунед, ки агар хоҳед, шумо ҳоло ҳам метавонед онҳоро истифода баред.color.text-bg-{color}.text-{color}.bg-{color}

ибтидоӣ Миёна Муваффакият Хатар Огоҳӣ Маълумот Нур Торик

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>

Интиқоли маъно ба технологияҳои ёрирасон

Истифодаи ранг барои илова кардани маъно танҳо нишонаи визуалиро таъмин мекунад, ки он ба корбарони технологияҳои ёрирасон, ба монанди экрани хонандагон, интиқол дода намешавад. Боварӣ ҳосил кунед, ки иттилооте, ки бо ранг нишон дода шудааст, ё аз худи мундариҷа (масалан, матни намоён) равшан аст ё тавассути воситаҳои алтернативӣ, ба монанди матни иловагии бо .visually-hiddenсинф пинҳоншуда дохил карда мешавад.

Нишонҳои доруворӣ

Синфи утилитро истифода баред, .rounded-pillто нишонаҳо ҳамаҷониба ва калонтар гардонанд border-radius.

ибтидоӣ Миёна Муваффакият Хатар Огоҳӣ Маълумот Нур Торик

html

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

CSS

Тағйирёбандаҳо

Дар v5.2.0 илова карда шудааст

Ҳамчун як қисми равиши тағирёбандаи CSS-и Bootstrap, нишонаҳо ҳоло тағирёбандаҳои маҳаллии CSS-ро .badgeбарои мутобиқсозии мукаммали вақти воқеӣ истифода мебаранд. Арзишҳо барои тағирёбандаҳои CSS тавассути Sass муқаррар карда мешаванд, аз ин рӯ мутобиқсозии Sass ҳанӯз ҳам дастгирӣ карда мешавад.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

Тағйирёбандаҳои Sass

$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;