Bootstrap 4 distintivi
Esempio di intestazione Nuovo
Esempio di intestazione Nuovo
Esempio di intestazione Nuovo
Esempio di intestazione Nuovo
Esempio di intestazione Nuovo
Esempio di intestazione Nuovo
I badge vengono utilizzati per aggiungere ulteriori informazioni a qualsiasi contenuto. Usa la .badgeclasse insieme a una classe contestuale (come .badge-secondary) all'interno <span>
degli elementi per creare badge rettangolari. Tieni presente che i badge vengono ridimensionati in base alle dimensioni dell'elemento padre (se presente):
Esempio
<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>
Badge contestuali
Primario
Secondario
Successo
Pericolo
Avvertimento
Informazioni
Luce
Buio
Utilizza una delle classi contestuali ( .badge-*) per cambiare il colore di un badge:
Esempio
<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>
Distintivi per pillole
Primario
Secondario
Successo
Pericolo
Avvertimento
Informazioni
Luce
Buio
Usa la .badge-pillclasse per rendere i badge più rotondi:
Esempio
<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>
Distintivo all'interno di un elemento
Un esempio di utilizzo di un badge all'interno di un pulsante:
Esempio
<button type="button" class="btn btn-primary">
Messages <span
class="badge badge-light">4</span>
</button>