Белгилер
Белгилер үчүн документтер жана мисалдар, биздин кичинекей сан жана этикеткалоо компоненти.
Белгилер шрифттин салыштырмалуу өлчөмүн жана 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>