Бейджлар

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

Бу биттә

Мисаллар

Бейджлар шрифтның зурлыгын һәм emберәмлекләрен кулланып, төп ата-аналар элементының зурлыгына туры килә. V5 булганга, бейджларда фокус яки сылтамалар өчен стильләр юк.

Башлыклар

Мисал башыЯңа

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>

Кнопкалар

Билгеләрне счетчик белән тәэмин итү өчен сылтамалар яки төймәләр өлеше итеп кулланырга мөмкин.

html

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

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

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

Позицияләнгән

.badgeАны үзгәртү һәм аны сылтама яки төймә почмагына урнаштыру өчен коммуналь хезмәтләрне кулланыгыз .

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>

Сез шулай ук .badgeклассны тагын берничә генераль индикатор өчен санамыйча алыштыра аласыз.

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>

Фон төсләр

V5.2.0 өстәлде

Безнең ярдәмчеләр белән background-colorкапма-каршы алгы планны куегыз . Элегерәк сез үзегез сайлаганны һәм стиллау өчен коммуналь хезмәтләрне кул белән парлаштыру таләп ителә иде , сез теләсәгез куллана аласыз.color.text-bg-{color}.text-{color}.bg-{color}

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

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>

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

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