Značke

Dokumentacija i primjeri za bedževe, naš mali broj i komponenta označavanja.

Na ovoj stranici

Primjeri

Značke se prilagođavaju veličini neposrednog nadređenog elementa korištenjem relativne veličine fonta i emjedinica. Od v5, značke više nemaju stilove fokusa ili lebdenja za veze.

Naslovi

Primjer naslovaNovo

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>

Dugmad

Značke se mogu koristiti kao dio veza ili dugmadi za pružanje brojača.

html

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

Imajte na umu da u zavisnosti od načina na koji se koriste, značke mogu biti zbunjujuće za korisnike čitača ekrana i sličnih pomoćnih tehnologija. Dok stil bedževa pruža vizuelni znak u vezi sa njihovom svrhom, ovim korisnicima će jednostavno biti predstavljen sadržaj bedža. Ovisno o konkretnoj situaciji, ove značke mogu izgledati kao nasumične dodatne riječi ili brojevi na kraju rečenice, veze ili dugmeta.

Osim ako je kontekst jasan (kao u primjeru „Obaveštenja“, gde se podrazumeva da je „4“ broj obaveštenja), razmislite o uključivanju dodatnog konteksta sa vizuelno skrivenim delom dodatnog teksta.

Pozicionirano

Koristite uslužne programe da izmijenite a .badgei postavite ga u kut veze ili gumba.

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>

Takođe možete zamijeniti .badgeklasu sa još nekoliko uslužnih programa bez brojanja za generički indikator.

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>

Boje pozadine

Dodato u v5.2.0

Postavite a background-colorsa kontrastnim prvim planom colorsa našim .text-bg-{color}pomagačima . Ranije je bilo potrebno ručno upariti svoj izbor .text-{color}i .bg-{color}uslužne programe za oblikovanje, koje još uvijek možete koristiti ako želite.

Primarno Sekundarni Uspjeh Opasnost Upozorenje Info Light Dark

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>

Prenošenje značenja pomoćnim tehnologijama

Korištenje boje za dodavanje značenja pruža samo vizualnu indikaciju, koja se neće prenijeti korisnicima pomoćnih tehnologija – kao što su čitači ekrana. Osigurajte da su informacije označene bojom ili očigledne iz samog sadržaja (npr. vidljivi tekst), ili su uključene putem alternativnih sredstava, kao što je dodatni tekst skriven .visually-hiddenklasom.

Značke za tablete

Upotrijebite .rounded-pillklasu utility kako biste značke učinili zaobljenijim s većim border-radius.

Primarno Sekundarni Uspjeh Opasnost Upozorenje Info Light Dark

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

Varijable

Dodato u v5.2.0

Kao dio Bootstrap-ovog evoluirajućeg pristupa CSS varijabli, značke sada koriste lokalne CSS varijable .badgeza poboljšanu prilagodbu u realnom vremenu. Vrijednosti za CSS varijable se postavljaju putem Sass-a, tako da je i Sass prilagođavanje i dalje podržano.

  --#{$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 varijable

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