Insignia

Documenta et exempla pro insignibus nostris parvi narrationis ac labellae componunt.

Exemplum

Insignia scandunt ad magnitudinem elementi proximi parentis utendo relativo fonte inspectionis et emunitatibus.

Exemplum capite novus

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

Insignia adhiberi possunt ut pars nexuum vel tesserarum ad calculum praebendum.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

Nota quod secundum quomodo adhibentur, insignia confundere possunt pro usoribus lectorum ductorum et technologiae adiuvandae similes. Dum notarum stylus ad propositum scopum visualem praebet, hi usores simpliciter exhibebuntur cum argumento noti. Secundum propriam condicionem, hae notae quasi temere additae voces vel numeri in fine sententiae, nexus vel globuli videri possunt.

Nisi contextus pateat (sicut apud "Notificationes" exemplum, ubi intellegitur "4" esse notificationum numerum), incluso contextu addito cum particula additicii textus visibiliter abscondito.

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

Variationes contextuales

Adde aliquas ex infrascriptas determinatas classes ad notae speciem mutandam.

Primarium secundarium Success Periculum Monitum Info lux Dark

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

Deferre significatio technologiae adiuvandae

Color usus ad significationem addere tantum praebet indicationem visualem, quae utentibus technologiarum adiuvantium - sicut lectorum tegumentum. Ut informationes colore notatae sint vel ex ipso contento perspicuae (exempli gratia textus visibilis), vel per medium includi alterum, sicut textus additus occultus cum .sr-onlygenere.

pill insignia

Classis determinativa utere .badge-pillad insignia magis rotundata (cum border-radiushorizontali ampliore et addito padding). Utile est, si insignia desideras a v3.

Primarium secundarium Success Periculum Monitum Info lux Dark

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

Vincula

.badge-*Classes contextuales in <a>elemento utentes celeriter insignia operabilia cum civitatibus focus et aliquet praebent.

Primarium secundarium Success Periculum Monitum Info lux Dark

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