Бейджлар

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

Бу биттә

Мисаллар

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

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

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

Сасс

Variзгәрешләр

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