Белгилер

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

Мисал

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