Белгілер

Белгілерге арналған құжаттама және мысалдар, біздің шағын санау және таңбалау компоненті.

Бұл бетте

Мысалдар

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» хабарландырулар саны деп түсініледі), қосымша мәтіннің көрнекі түрде жасырылған бөлігімен қосымша мәтінмәнді қосуды қарастырыңыз.

Орналастырылды

a өзгерту .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сыныппен жасырылған қосымша мәтін сияқты балама құралдар арқылы енгізілгеніне көз жеткізіңіз.

Таблетка белгілері

.rounded-pillБейдждерді үлкенірек дөңгелектеу үшін қызметтік сыныпты пайдаланыңыз border-radius.

Негізгі Екінші Жетістік Қауіп Ескерту Ақпарат Жарық Қараңғы

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

Айнымалылар

v5.2.0 нұсқасына қосылды

.badgeBootstrap-тың дамып келе жатқан CSS айнымалылары тәсілінің бір бөлігі ретінде танымбелгілер енді нақты уақытта жақсартылған теңшеу үшін жергілікті CSS айнымалыларын пайдаланады . CSS айнымалыларының мәндері Sass арқылы орнатылады, сондықтан Sass теңшеуіне әлі де қолдау көрсетіледі.

  --#{$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 айнымалылары

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