Insignia
Documenta et exempla pro insignibus nostris parvi narrationis ac graphide componens.
Exempla
Insignia scandunt ad magnitudinem elementi immediati parentis utendo relativo fonti inspectione et em
unitatibus. Ut de v5, insignia non amplius habent stylos umbilicos vel stylos pro nexus.
Capitula
Exemplum capitenovus
Exemplum capitenovus
Exemplum capitenovus
Exemplum capitenovus
Exemplum capitenovus
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 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 .badge
et 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 .badge
cum 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-dark
ad stylum proprium egere. Hoc est quod utilitas background non est aliud quam background-color
.
<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-hidden
genere.
pill insignia
Utere .rounded-pill
genere utere ut insigniores rotundiores maiore border-radius
.
<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;