Questo articolo coprirà le seguenti prospettive per dimostrare l'utilizzo dei badge Bootstrap:
- Come utilizzare il badge Bootstrap per ulteriori informazioni?
- Come utilizzare il badge Bootstrap per informazioni contestuali?
- Come aggiungere stili personalizzati al badge Bootstrap?
- Come aggiungere icone al badge Bootstrap?
- Come collegare il badge Bootstrap a un'altra fonte?
- Come rendere i badge arrotondati?
- Come utilizzare il badge Bootstrap come contatore?
Cosa sono i badge Bootstrap?
I badge sono i componenti di base utilizzati per mostrare un indicatore. Ad esempio, possono essere utilizzati come contatore numerico per mostrare il numero di notifiche o messaggi:
Possono anche essere utilizzati per visualizzare informazioni aggiuntive, come mostrato nell'immagine data:
Come utilizzare il badge Bootstrap per ulteriori informazioni?
I badge Bootstrap possono essere aggiunti all'interno degli elementi HTML da utilizzare come informazioni aggiuntive. Dai un'occhiata all'esempio menzionato di seguito per la dimostrazione.
Esempio
Per utilizzare il badge Bootstrap per ulteriori informazioni, in primo luogo:
- Aggiungere ' ' e ' ' elementi.
- Posiziona il ' ” elemento con il “ distintivo ' e ' distintivo-* ' classi. La classe 'badge-*' si riferisce al badge con il colore specificato:
< h6 > Borse di studio < span classe = 'badge badge secondario' > Nuovo < / span >< / h6 >
Si può osservare che alle relative rubriche vengono aggiunti due distintivi:
Come utilizzare il badge Bootstrap per informazioni contestuali?
I badge Bootstrap possono anche essere utilizzati per fornire informazioni contestuali come ' badge-pericolo ' visualizza il badge in colore rosso e può essere utilizzato per mostrare alcuni messaggi non riusciti come annulla, non valido o altro. Il ' badge-successo ” viene utilizzato quando vogliamo mostrare un messaggio di successo.
Esempio
Guarda il codice dato per capire lo scenario discusso:
< span classe = 'badge badge-pericolo' >Account non verificato< / span >< span classe = 'badge badge-informazioni' >questo è distintivo< / span >
< span classe = 'badge badge-avviso' >Account in sospeso per approvazione< / span >
< span classe = 'badge badge-successo' >Account verificato< / span >
Produzione
Come aggiungere stili personalizzati al badge Bootstrap?
Puoi anche utilizzare i CSS per aggiungere uno stile unico ai badge Bootstrap. Per una migliore comprensione, una classe con il nome ' costume ” viene aggiunto all'interno di “ elemento '. Quindi, vengono applicate le seguenti proprietà:
< span classe = 'badge badge-pericolo personalizzato' >Account non verificato < / span >< span classe = 'badge badge-informazioni personalizzato' >Questo è distintivo< / span >
< span classe = 'badge badge-avviso personalizzato' >Account in sospeso per approvazione< / span >
< span classe = 'badge badge successo personalizzato' >Account verificato< / span >
Classe di stile 'personalizzata'.
.costume {dimensione del font : 18px ;
font-weight : 100 ;
spaziatura del carattere : 1 pixel ;
imbottitura : 8px 15px ;
}
Il ' .costume ” viene utilizzato per accedere al “ costume ' classe. Ad esso vengono applicate le seguenti proprietà:
- “ dimensione del font ” regola la dimensione del carattere.
- “ font-weight ” indica lo spessore del carattere.
- “ spaziatura del carattere ” aggiunge spazio tra le lettere.
- “ imbottitura ” fornisce spazio attorno al contenuto dell'elemento.
Produzione
Come aggiungere icone al badge Bootstrap?
Possiamo anche aggiungere icone diverse ai badge. Per fare ciò, ci sono diverse classi che possono essere utilizzate per questa causa. Per ulteriori informazioni, visitare il Carattere fantastico sito web.
Esempio
In HTML, aggiungi un ' elemento '. All'interno di questo elemento, posiziona l'elemento inline ' ' o '' per inserire la classe dell'icona:
< span classe = 'badge badge-pericolo personalizzato' > Conto non verificato< io classe = 'cerchio dei tempi lontani' >< / io >
< / span >
< span classe = 'badge badge successo personalizzato' > Conto verificato
< io classe = 'fas fa-user-check' >< / io >
< / span >
Produzione
Come collegare il badge Bootstrap a un'altra fonte?
Per rendere cliccabili i badge Bootstrap, posiziona il simbolo ' distintivo 'classi all'interno dell'HTML' ” tag e fornire il riferimento della pagina collegata nel “ href 'attributo:
< un href = '#' classe = 'badge badge-pericolo personalizzato' >Annulla< / un >< un href = '#' classe = 'badge badge-informazioni personalizzato' >Invia< / un >
Produzione
Come rendere i badge arrotondati?
Per rendere i bordi del badge più arrotondati, aggiungi una classe ' pillola distintivo ”. Questa classe supporta un più grande ' bordo-raggio ” e orizzontale “ imbottitura ' proprietà:
< span classe = 'badge badge-pillola badge-pericolo personalizzato' >Account non verificato < / span >< span classe = 'badge badge-pillola badge-avviso personalizzato' >Account in sospeso per approvazione< / span >
< span classe = 'badge badge-pillola badge-successo personalizzato' >Account verificato < / span >
Produzione
Come utilizzare il badge Bootstrap come contatore?
Per creare un pulsante con un contatore, aggiungi un codice HTML '
Notifiche < span classe = 'badge badge-luce' > 4 < / span >
< / pulsante >
Produzione
Riguardava i badge Bootstrap e le relative etichette in Bootstrap.
Conclusione
Lo Stivaletto” distintivo La classe ” viene utilizzata per aggiungere badge al sito web. Ad esempio, classi come ' badge-pericolo ”, “ badge-info ” e altro può essere utilizzato per aggiungere informazioni contestuali ai badge come loro etichetta. Alcune classi vengono applicate per aggiungere icone ai badge, come ' lontano fa-tempi-cerchio ” per inserire un'icona a forma di cerchio. Questo post ha fornito una guida completa sui badge e le etichette Bootstrap.