Белгилер

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

Бул бетте

Мисалдар

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

Buttons

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

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 кошулган

Bootstrap'тин өнүгүп жаткан CSS өзгөрмөлөрүнүн бир бөлүгү катары, бейджиктер эми .badgeреалдуу убакыт режиминде жакшыртылган ыңгайлаштыруу үчүн жергиликтүү CSS өзгөрмөлөрүн колдонушат. 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;