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

<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.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge 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.

<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.

<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

Notaðu bakgrunnsforritið okkar til að breyta útliti merkisins fljótt. Vinsamlegast hafðu í huga að þegar þú notar sjálfgefið Bootstrap .bg-light, þá þarftu líklega textalitabúnað eins og .text-darkfyrir rétta stíl. Þetta er vegna þess að bakgrunnsforrit stilla ekki neitt nema background-color.

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

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

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

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Pill badges

Use the .rounded-pill utility class to make badges more rounded with a larger border-radius.

Primary Secondary Success Danger Warning Info Light Dark

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

Sass

Variables

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