Belgilar

Hujjatlar va nishonlar uchun misollar, bizning kichik hisobimiz va yorliqlash komponentimiz.

Misol

Nisbatan shrift o'lchami va embirliklardan foydalangan holda nishonlar bevosita asosiy elementning o'lchamiga mos ravishda o'lchaydi.

Sarlavhaga misolYangi

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

Kontekstli o'zgarishlar

Belgining ko'rinishini o'zgartirish uchun quyida keltirilgan modifikator sinflaridan birini qo'shing.

Asosiy Ikkilamchi Muvaffaqiyat Xavfli Ogohlantirish Ma'lumot Nur Qorong'i

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

Tabletkalar nishonlari

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

Asosiy Ikkilamchi Muvaffaqiyat Xavfli Ogohlantirish Ma'lumot Nur Qorong'i

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

Havolalar

Elementdagi kontekstli .badge-*sinflardan foydalanish <a>tezda sichqonchani ko'tarish va fokus holatiga ega bo'lgan amaldagi nishonlarni taqdim etadi .

Asosiy Ikkilamchi Muvaffaqiyat Xavfli Ogohlantirish Ma'lumot Nur Qorong'i

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