Бейджлар
Билгеләр өчен документлар һәм мисаллар, безнең кечкенә санау һәм маркировкалау компоненты.
Бейджлар шрифтның зурлыгын һәм 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класс белән яшерелгән өстәмә текст кебек альтернатив чаралар аша кертелүен тәэмин итегез.
Бейджларны түгәрәкләндерү өчен модификатор классын кулланыгыз .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>