Belgilar

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

Ushbu sahifada

Misollar

Nisbatan shrift o'lchami va embirliklardan foydalangan holda nishonlar bevosita asosiy elementning o'lchamiga mos ravishda o'lchaydi. v5 dan boshlab nishonlar endi havolalar uchun fokus yoki kursor uslublariga ega emas.

Sarlavhalar

Sarlavhaga misolYangi

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

Tugmalar

Belgilar hisoblagichni ta'minlash uchun havolalar yoki tugmalarning bir qismi sifatida ishlatilishi mumkin.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge bg-secondary">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.

Joylashtirilgan

A o'zgartirish .badgeva uni havola yoki tugma burchagiga joylashtirish uchun yordamchi dasturlardan foydalaning.

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

Bundan tashqari, .badgeumumiy ko'rsatkich uchun hisobsiz sinfni yana bir nechta yordamchi dasturlar bilan almashtirishingiz mumkin.

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

Fon ranglari

Nishon ko'rinishini tezda o'zgartirish uchun bizning fon yordamchi dasturlarimizdan foydalaning. Esda tutingki, Bootstrap-ning sukut bo'yicha dan foydalanganda .bg-light, sizga .text-darkto'g'ri uslub uchun matn rangi yordam dasturi kerak bo'lishi mumkin. Buning sababi shundaki, fon yordam dasturlari boshqa hech narsani o'rnatmaydi background-color.

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

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-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 .visually-hiddensinf bilan yashiringan qo'shimcha matn kabi muqobil vositalar orqali kiritilganligiga ishonch hosil qiling.

Tabletkalar nishonlari

Yordamchi sinfdan foydalaning .rounded-pill, nishonlarni kattaroq qilib yumaloqroq qiling border-radius.

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

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>

Sass

O'zgaruvchilar

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