Merki

Skjöl og dæmi fyrir merkin, smáfjölda okkar og merkingarhluti.

Á þessari síðu

Dæmi

Merkin skala til að passa við stærð frumeiningarinnar strax með því að nota hlutfallslega leturstærð og emeiningar. Frá og með v5 hafa merkin ekki lengur fókus eða sveimstíl fyrir tengla.

Fyrirsagnir

Dæmi fyrirsögnNýtt

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>

Hnappar

Merki er hægt að nota sem hluta af tenglum eða hnöppum til að veita teljara.

html

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

Athugaðu að eftir því hvernig þau eru notuð geta merkin verið ruglingsleg fyrir notendur skjálesara og svipaðrar hjálpartækni. Þó að útlit merkjanna gefi sjónræna vísbendingu um tilgang þeirra, þá verða þessir notendur einfaldlega kynntir fyrir innihaldi merksins. Það fer eftir sérstökum aðstæðum, þessi merki geta virst eins og tilviljunarkennd viðbótarorð eða tölustafir í lok setningar, hlekks eða hnapps.

Nema samhengið sé skýrt (eins og með „Tilkynningar“ dæmið, þar sem skilið er að „4“ sé fjöldi tilkynninga), skaltu íhuga að setja viðbótarsamhengi með sjónrænt falinn viðbótartexta.

Staðsett

Notaðu tól til að breyta .badgeog staðsetja það í horninu á hlekk eða hnappi.

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>

Þú getur líka skipt út .badgebekknum með nokkrum fleiri tólum án þess að telja fyrir almennari vísbendingu.

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>

Bakgrunnslitir

Bætt við í v5.2.0

Settu background-colorandstæðan forgrunn colormeð aðstoðarmönnum okkar.text-bg-{color} . Áður var nauðsynlegt að para handvirkt val þitt á .text-{color}og .bg-{color}tólum fyrir stíl, sem þú getur samt notað ef þú vilt.

Aðal Secondary Árangur Hætta Viðvörun Upplýsingar Ljós Myrkur

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>

Að miðla merkingu til hjálpartækja

Notkun lita til að bæta við merkingu gefur aðeins sjónræna vísbendingu, sem verður ekki miðlað til notenda hjálpartækni - eins og skjálesara. Gakktu úr skugga um að upplýsingar sem merktar eru með litnum séu annaðhvort augljósar af innihaldinu sjálfu (td sýnilegum texta), eða séu innifaldar með öðrum hætti, svo sem viðbótartexta sem er falinn í .visually-hiddenbekknum.

Pillumerki

Notaðu .rounded-pillgagnsemisflokkinn til að gera merkin ávalari með stærri border-radius.

Aðal Secondary Árangur Hætta Viðvörun Upplýsingar Ljós Myrkur

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

Breytur

Bætt við í v5.2.0

Sem hluti af CSS breytum í þróun Bootstrap nálgun, nota merkin nú staðbundnar CSS breytur á .badgetil að auka rauntíma aðlögun. Gildi fyrir CSS breyturnar eru stillt í gegnum Sass, þannig að Sass aðlögun er enn studd líka.

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

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