Белгилер

Белгилер үчүн документтер жана мисалдар, биздин кичинекей сан жана этикеткалоо компоненти.

Бул бетте

Мисалдар

Бейджиктер шрифттин салыштырмалуу өлчөмүн жана 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>

Buttons

Белгилерди эсептегичти камсыз кылуу үчүн шилтемелердин же баскычтардын бир бөлүгү катары колдонсо болот.

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

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;