Белгілер

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

Мысал

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

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

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

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

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

Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.

Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

Contextual variations

Add any of the below mentioned modifier classes to change the appearance of a badge.

Primary Secondary Success Danger Warning Info Light Dark

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

Conveying meaning to assistive technologies

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

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

Бейдждерді дөңгелектеу үшін модификатор сыныбын пайдаланыңыз .badge-pill(үлкенірек border-radiusжәне қосымша көлденеңімен padding). v3-тен танымбелгілерді жіберіп алсаңыз пайдалы.

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

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

Сілтемелер

Элементтегі мәтінмәндік .badge-*сыныптарды пайдалану меңзерді апару және фокус күйлері бар әрекет ететін белгішелерді жылдам қамтамасыз етеді.<a>

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

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