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

html

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

html

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

html

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

html

<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

5.2.0 versiyasida qo'shilgan

Yordamchilarimiz bilan background-colorkontrastli old fonni o'rnating . Ilgari o'zingizning tanlovingiz va uslublar uchun yordamchi dasturlarni qo'lda ulash talab qilingan, agar xohlasangiz, ulardan hali ham foydalanishingiz mumkin.color.text-bg-{color}.text-{color}.bg-{color}

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

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-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

html

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

CSS

O'zgaruvchilar

5.2.0 versiyasida qo'shilgan

Bootstrap-ning rivojlanayotgan CSS o'zgaruvchilari yondashuvining bir qismi sifatida nishonlar endi .badgereal vaqt rejimini yaxshilash uchun mahalliy CSS o'zgaruvchilardan foydalanadi. CSS o'zgaruvchilari uchun qiymatlar Sass orqali o'rnatiladi, shuning uchun Sass moslashuvi hali ham qo'llab-quvvatlanadi.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

Sass o'zgaruvchilari

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