Merki

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

Dæmi

Merkin skala til að passa við stærð frumeiningarinnar strax með því að nota hlutfallslega leturstærð og emeiningar.

Dæmi fyrirsögnNýtt

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

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

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">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. Þó útsmíði 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), íhugaðu að setja viðbótarsamhengi með sjónrænt falinn viðbótartexta.

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

Samhengisafbrigði

Bættu við einhverjum af neðangreindum breytingaflokkum til að breyta útliti merkisins.

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

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-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 í .sr-onlybekknum.

Pillumerki

Notaðu .badge-pillbreytingaflokkinn til að gera merkin ávalari (með stærra border-radiusog láréttu til viðbótar padding). Gagnlegt ef þú saknar merkjanna frá v3.

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

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

Tenglar

Með því að nota samhengistímana .badge-*á <a>þætti færðu fljótt aðgerðarmerki með sveima og fókusstöðu .

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

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>