Insignia

Documenta et exempla pro insignibus nostris parvi narrationis ac graphide componens.

In hac pagina

Exempla

Insignia scandunt ad magnitudinem elementi immediati parentis utendo relativo fonti inspectione et emunitatibus. Ut de v5, insignia non amplius habent stylos umbilicos vel stylos pro nexus.

Capitula

Exemplum capitenovus

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

Bullae

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

<button type="button" class="btn btn-primary">
  Notifications <span class="badge bg-secondary">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 perspicuus sit (sicut apud "Notificationes" exemplum, ubi intellegitur "4" esse notificationum numerum), incluso contextu addito cum particula additi textus visibiliter occulta.

posita

Utilitatibus utere ad temperandum .badgeet situm in angulo vinculi vel conjunctionis.

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

Classem etiam reponere potes .badgecum paucis utilissimis sine comite pro indicatore magis generico.

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

Colorum background

Classibus nostris in scaena utilitate utimur, ut insignem speciem cito mutemus. Quaeso note quod cum Bootstrap defaltam adhibes .bg-light, verisimile tibi erit utilitatis colori textui similem .text-darkad stylum proprium egere. Hoc est quod utilitas background non est aliud quam background-color.

Primarium secundarium Success Periculum Monitum Info lux Dark

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

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

pill insignia

Utere .rounded-pillgenere utere ut insigniores rotundiores maiore border-radius.

Primarium secundarium Success Periculum Monitum Info lux 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

Variabilium

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