Belgilar
Hujjatlar va nishonlar uchun misollar, bizning kichik hisobimiz va yorliqlash komponentimiz.
Nisbatan shrift o'lchami va embirliklardan foydalangan holda nishonlar bevosita asosiy elementning o'lchamiga mos ravishda o'lchaydi.
<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>Belgilar hisoblagichni ta'minlash uchun havolalar yoki tugmalarning bir qismi sifatida ishlatilishi mumkin.
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>E'tibor bering, ular qanday ishlatilishiga qarab, nishonlar ekranni o'qiydiganlar va shunga o'xshash yordamchi texnologiyalar foydalanuvchilari uchun chalkash bo'lishi mumkin. Nishonlarning uslubi ularning maqsadi haqida vizual ishora qilsa-da, bu foydalanuvchilarga shunchaki nishon mazmuni taqdim etiladi. Muayyan vaziyatga qarab, bu nishonlar jumla, havola yoki tugma oxirida tasodifiy qo'shimcha so'zlar yoki raqamlar kabi ko'rinishi mumkin.
Agar kontekst tushunarli bo'lmasa ("Xabarnomalar" misolida bo'lgani kabi, bu erda "4" bildirishnomalar soni tushuniladi), qo'shimcha matnning vizual ravishda yashirin qismi bilan qo'shimcha kontekstni qo'shishni o'ylab ko'ring.
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>Belgining ko'rinishini o'zgartirish uchun quyida keltirilgan modifikator sinflaridan birini qo'shing.
<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>Yordamchi texnologiyalarga ma'no etkazish
Ma'no qo'shish uchun rangdan foydalanish faqat vizual ko'rsatkichni ta'minlaydi, bu yordamchi texnologiyalar foydalanuvchilariga, masalan, ekranni o'qiydiganlarga etkazilmaydi. Rang bilan belgilangan ma'lumotlar mazmunning o'zidan (masalan, ko'rinadigan matn) aniq bo'lishiga yoki .sr-onlysinf bilan yashiringan qo'shimcha matn kabi muqobil vositalar orqali kiritilganligiga ishonch hosil qiling.
.badge-pillBelgilarni yumaloqroq qilish uchun modifikator sinfidan foydalaning (kattaroq border-radiusva qo'shimcha gorizontal bilan padding). v3 dan nishonlarni o'tkazib yuborsangiz foydali bo'ladi.
<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>Elementdagi kontekstli .badge-*sinflardan foydalanish <a>tezda sichqonchani ko'tarish va fokus holatiga ega bo'lgan amaldagi nishonlarni taqdim etadi .
<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>