Nyşanlar

Nyşanlar üçin resminamalar we mysallar, kiçijik sanamak we bellikleme komponentimiz.

Bu sahypada

Mysallar

emNyşanlar şrift ölçeglerini we birliklerini ulanyp, derrew esasy elementiň ululygyna laýyk gelýär . V5-e görä, nyşanlarda indi fokus ýa-da baglanyşyk üçin stil ýok.

Ingsazgylar

Mysal sözbaşyTäze

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>

Düwmeler

Nyşanlary hasaplaýjy üpjün etmek üçin baglanyşyklaryň ýa-da düwmeleriň bölegi hökmünde ulanyp bolýar.

html

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

Ulanylyşyna baglylykda nyşanlaryň ekran okyjylary we şuňa meňzeş kömekçi tehnologiýalary ulanyjylar üçin bulaşyk bolup biljekdigine üns beriň. Nyşanlaryň bezegi, maksadyna göz ýetirmegi üpjün etse-de, bu ulanyjylara nyşanyň mazmuny hödürlener. Aýratyn ýagdaýa baglylykda bu nyşanlar sözlemiň, baglanyşygyň ýa-da düwmäniň soňundaky tötänleýin goşmaça sözler ýa-da sanlar ýaly bolup biler.

Kontekst düşnükli bolmasa (“Duýduryşlar” mysalynda bolşy ýaly, “4” habarnamanyň sanydyr), goşmaça tekstiň göze görünýän bölegi bilen goşmaça kontekst goşmagy göz öňünde tutuň.

Positionerleşýän

.badgeA üýtgetmek we baglanyşyk ýa-da düwmäniň burçunda ýerleşdirmek üçin kömekçi enjamlary ulanyň .

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Şeýle hem has umumy görkezijini hasaplamazdan synpy ýene birnäçe kömekçi enjam bilen çalşyp bilersiňiz .

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>

Fon reňkleri

V5.2.0 goşuldy

Kömekçilerimiz bilen background-colorgapma-garşylykly öň hatar düzüň . Ozal öz islegiňizi we stil üçin peýdaly zatlary el bilen jübütlemek talap edilýärdi, isleseňiz ulanyp bilersiňiz.color.text-bg-{color}.text-{color}.bg-{color}

Başlangyç Ikinji Üstünlik Howp Duýduryş Maglumat Lightagtylyk Garaňky

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>

Kömekçi tehnologiýalara many bermek

Reňk ulanmak manysyny goşmak üçin diňe ekran okyjylary ýaly kömekçi tehnologiýalary ulanyjylara ýetirip bolmajak wizual görkezme berýär. Reňk bilen görkezilen maglumatlaryň mazmunyň özünden (meselem, görünýän tekstden) aç-açan ýa-da .visually-hiddensynp bilen gizlenen goşmaça tekst ýaly alternatiw usullar arkaly girizilendigine göz ýetiriň.

Nyşanlary dolduryň

.rounded-pillNyşanlary has ulurak tegelek etmek üçin peýdaly synpy ulanyň border-radius.

Başlangyç Ikinji Üstünlik Howp Duýduryş Maglumat Lightagtylyk Garaňky

html

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

CSS

Üýtgeýjiler

V5.2.0 goşuldy

“Bootstrap” -yň ösýän CSS üýtgeýjileriniň çemeleşmesiniň bir bölegi hökmünde nyşanlar häzirki wagtda .badgehakyky wagtlaýyn özleşdirmek üçin ýerli CSS üýtgeýjilerini ulanýarlar. CSS üýtgeýjileriniň bahalary Sass arkaly kesgitlenýär, şonuň üçin Sass sazlamasy henizem goldanýar.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

Sass üýtgeýjileri

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