Белгілер

Белгілерге арналған құжаттама және мысалдар, біздің шағын санау және таңбалау компоненті.

Бұл бетте

Мысалдар

emБелгілер қатысты қаріп өлшемі мен бірліктерді пайдалану арқылы тікелей негізгі элемент өлшеміне сәйкес келетін масштабталады . v5 нұсқасынан бастап танымбелгілерде бұдан былай сілтемелер үшін фокус немесе меңзерді апару мәнерлері болмайды.

Тақырыптар

Мысал тақырыбыЖаңа

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

Түймелер

Бейдждерді есептегішті қамтамасыз ету үшін сілтемелер немесе түймелер бөлігі ретінде пайдалануға болады.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge bg-secondary">4</span>
</button>

Қолданылуына байланысты бейдждер экраннан оқу құралдарын және ұқсас көмекші технологияларды пайдаланушылар үшін түсініксіз болуы мүмкін екенін ескеріңіз. Бейдждерді сәндеу олардың мақсатына қатысты көрнекі нұсқауды қамтамасыз еткенімен, бұл пайдаланушыларға бейдждің мазмұны жай ғана ұсынылады. Нақты жағдайға байланысты бұл белгілер сөйлемнің, сілтеменің немесе түйменің соңындағы кездейсоқ қосымша сөздер немесе сандар сияқты көрінуі мүмкін.

Мәтінмән анық болмаса («Хабарламалар» мысалындағыдай, «4» хабарландырулар саны деп түсініледі), қосымша мәтіннің көрнекі түрде жасырылған бөлігімен қосымша мәтінмәнді қосуды қарастырыңыз.

Орналастырылды

a өзгерту .badgeжәне оны сілтеменің немесе түйменің бұрышында орналастыру үшін утилиталарды пайдаланыңыз.

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

Сондай-ақ, .badgeклассты жалпы көрсеткіш үшін санаусыз тағы бірнеше утилиталармен ауыстыруға болады.

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

Фон түстері

Бейдждің көрінісін жылдам өзгерту үшін фондық утилиталарымызды пайдаланыңыз. Bootstrap әдепкі параметрін пайдаланған кезде .bg-lightсізге .text-darkдұрыс стильдеу үшін мәтін түсінің утилитасы қажет болуы мүмкін екенін ескеріңіз. Себебі фондық утилиталар -дан басқа ештеңені орнатпайды background-color.

Негізгі Екінші Жетістік Қауіп Ескерту Ақпарат Жарық Қараңғы

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

Көмекші технологияларға мән беру

Түсті мағына қосу үшін пайдалану тек көрнекі нұсқауды қамтамасыз етеді, ол экраннан оқу құралдары сияқты көмекші технологияларды пайдаланушыларға берілмейді. Түспен белгіленген ақпарат мазмұнның өзінен анық (мысалы, көрінетін мәтін) немесе .visually-hiddenсыныппен жасырылған қосымша мәтін сияқты балама құралдар арқылы енгізілгеніне көз жеткізіңіз.

Таблетка белгілері

.rounded-pillБейдждерді үлкенірек дөңгелектеу үшін қызметтік сыныпты пайдаланыңыз border-radius.

Негізгі Екінші Жетістік Қауіп Ескерту Ақпарат Жарық Қараңғы

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

Сасс

Айнымалылар

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