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

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>

Bullae

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

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-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 pateat (sicut apud "Notificationes" exemplum, ubi intellegitur "4" esse notificationum numerum), incluso contextu addito cum particula additicii textus visibiliter abscondito.

posita

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

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>

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

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>

Colorum background

Additur in v5.2.0

Pone background-colorcum diversa antica colorcum adiutoribus nostris.text-bg-{color} . Antea oportebat manually iungere electionem .text-{color}et .bg-{color}utilitas ad stylos, quibus adhuc uti potes si mavis.

Primarium secundarium Success Periculum Monitum Info lux Dark

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>

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

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

Variabilium

Additur in v5.2.0

Cum pars Bootstrap evolutae CSS variabiles accedunt, notae nunc variabiles locales CSS utuntur .badgepro aucta real-time customizatione. Valores variabilium pro CSS per Sass positae sunt, ergo etiam adhuc Sass customization adiuvatur.

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