Бейджлар

Билгеләр өчен документлар һәм мисаллар, безнең кечкенә санау һәм маркировкалау компоненты.

Мисал

Бейджлар шрифтның зурлыгын һәм 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>

Игътибар итегез, алар ничек кулланылганына карап, бейджлар экран укучылары һәм охшаш ярдәмче технологияләр кулланучылары өчен буталчык булырга мөмкин. Бейджларның стилизациясе аларның максатларына визуаль төс бирсә дә, бу кулланучыларга бейджның эчтәлеге тәкъдим ителәчәк. Конкрет ситуациягә карап, бу бейджлар җөмлә, сылтама яки төймә ахырында очраклы өстәмә сүзләр яки саннар кебек тоелырга мөмкин.

Контекст ачык булмаса ("Хәбәрләр" мисалы кебек, "4" - хәбәрләр саны), өстәмә текстны визуаль рәвештә яшерелгән өстәмә текст кертү турында уйлагыз.

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

Контекст үзгәрүләре

Бейджның тышкы кыяфәтен үзгәртү өчен, түбәндә күрсәтелгән үзгәртүче классларның теләсә кайсысын өстәгез.

Башлангыч Икенче Уңыш хәвеф-хәтәр Кисәтү Мәгълүмат Яктылык Караңгы

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

Ярдәмче технологияләргә мәгънә җиткерү

Мәгънә өстәү өчен төс куллану визуаль күрсәткеч кенә бирә, ул ярдәмче технологияләр кулланучыларга җиткерелмәячәк - экран укучылары кебек. Төс белән күрсәтелгән мәгълүматның эчтәлектән ачык булуын (мәсәлән, күренгән текст), яки .sr-onlyкласс белән яшерелгән өстәмә текст кебек альтернатив чаралар аша кертелүен тәэмин итегез.