Märgid

Märkide dokumentatsioon ja näited, meie väike arv ja märgistuskomponent.

Sellel lehel

Näited

Märgid skaleeruvad, et need vastaksid vahetu emaelemendi suurusele, kasutades suhtelist fondi suurust ja emühikuid. Alates versioonist 5 pole märkidel enam linkide fookus- ega hõljutusstiile.

Pealkirjad

NäidispealkiriUus

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>

Nupud

Märke saab kasutada loenduri loomiseks linkide või nuppude osana.

html

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

Pange tähele, et olenevalt kasutusviisist võivad märgid ekraanilugejate ja sarnaste abitehnoloogiate kasutajate jaoks segadusse ajada. Kuigi märkide stiil annab visuaalse vihje nende otstarbele, antakse neile kasutajatele lihtsalt märgi sisu. Olenevalt konkreetsest olukorrast võivad need märgid tunduda juhuslike lisasõnadena või -numbritena lause, lingi või nupu lõpus.

Kui kontekst pole selge (nagu näites „Teavitused”, kus mõistetakse, et „4” on teatiste arv), kaaluge täiendava konteksti lisamist visuaalselt peidetud lisatekstiga.

Positsioneeritud

Kasutage utiliite, et muuta a .badgeja paigutada see lingi või nupu nurka.

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>

Samuti saate .badgeklassi asendada veel mõne utiliidiga ilma üldisema indikaatori loendamata.

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>

Taustavärvid

Lisatud versioonisse v5.2.0

Määrake meie abilistegabackground-color kontrastne coloresiplaan . Varem oli vaja käsitsi siduda oma valik ja stiili utiliidid, mida saate soovi korral endiselt kasutada..text-bg-{color}.text-{color}.bg-{color}

Esmane Teisene Edu Oht Hoiatus Info Valgus Tume

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>

Abitehnoloogiate tähenduse edasiandmine

Värvi kasutamine tähenduse lisamiseks annab ainult visuaalse viite, mida ei edastata abitehnoloogiate (nt ekraanilugejate) kasutajatele. .visually-hiddenVeenduge, et värviga tähistatud teave oleks kas sisust endast ilmne (nt nähtav tekst) või kaasatud alternatiivsete vahenditega, näiteks klassiga peidetud lisatekst .

Pillide märgid

Kasutage .rounded-pillkasuliku klassi, et muuta rinnamärgid suuremaga ümaramaks border-radius.

Esmane Teisene Edu Oht Hoiatus Info Valgus Tume

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

Muutujad

Lisatud versioonisse v5.2.0

Osana Bootstrapi arenevast CSS-muutujate lähenemisviisist kasutavad märgid nüüd kohalikke CSS-i muutujaid, .badgeet täiustada reaalajas kohandamist. CSS-i muutujate väärtused määratakse Sassi kaudu, seega toetatakse endiselt ka Sassi kohandamist.

  --#{$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};

Sassi muutujad

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