I badge su un sito Web vengono utilizzati per fornire alcune informazioni importanti all'utente come un avviso, conteggio delle notifiche, promozione di un determinato programma, ecc. Bootstrap 5 fornisce una determinata classe che ti consente di creare badge sul tuo sito Web. Oltre alla loro creazione, sono disponibili anche altre lezioni per modellare i badge. Questo blog ti guida su come creare e modellare i badge usando bootstrap 5.

Come creare un badge

Allo scopo di creare un badge, utilizzare il .classe badge insieme a una classe di colore di sfondo che sono .BG-PRIMARY, .BG-SUCCESS, .BG-Secondary, .BG-Info, .BG-Warning, .BG-Danger, .BG-Light, .bg-dark.

Html

Clicca qui Importante

Clicca qui Importante

Per creare un badge, l'elemento viene utilizzato all'interno di

E

elemento. All'elemento è stato assegnato il .classe badge insieme a una classe di colore di sfondo, .bg-warning per dare al badge uno sfondo giallo. Si noti che un badge per impostazione predefinita ha una forma rettangolare e si ridimensiona su e giù per abbinare le dimensioni dell'elemento genitore, se c'è qualche.

Produzione

I badge nell'output di cui sopra vengono utilizzati per attirare l'attenzione di un utenti.

Come dare un colore di sfondo ai badge

I badge possono essere forniti un colore di sfondo utilizzando una qualsiasi delle classi di colore di sfondo. Queste classi svolgono un ruolo importante nel trasmettere il significato di un badge.

Html

Distintivo
Distintivo
Distintivo
Distintivo

Qui abbiamo creato quattro badge e a ciascuno di essi è stata assegnata una classe di colore di sfondo diversa.

Produzione

Ogni badge trasmette un significato diverso.

Come creare badge arrotondati

Come già accennato, i badge per impostazione predefinita hanno una forma rettangolare, tuttavia, se desideri dare loro una forma arrotondata, usa il .PILL ROURMATO classe.

Html

Distintivo
Distintivo
Distintivo
Distintivo

Il codice sopra genererà a quattro badge a forma di pillola ciascuno con un colore di sfondo diverso.

Produzione

I badge hanno ricevuto una forma arrotondata con successo.

Come creare badge di banco

I badge di contatore possono essere utilizzati per visualizzare il conteggio delle notifiche di un determinato elemento. Allo scopo di fare tali badge che devi nidificare l'elemento all'interno di quel particolare elemento.

Html

Chiamate perse 8

Qui abbiamo creato un pulsante di "chiamate perse" con un certo stile e quindi abbiamo nidificato un elemento che ha anche un certo stile e mostra il numero di chiamate perse, quindi visualizzando il conteggio delle notifiche per le chiamate perse.

Produzione

L'output sopra mostra che ci sono un totale di 8 chiamate perse.

Conclusione

Ai fini della creazione e dello styling di badge utilizzando Bootstrap 5 Utilizzare il .distintivo classe insieme a una delle classi di colore di sfondo che sono .BG-PRIMARY, .BG-SUCCESS, .BG-Secondary, .BG-Info, .BG-Warning, .BG-Danger, .BG-Light, .bg-dark Per dare loro un colore di sfondo. Inoltre, un badge per impostazione predefinita ha una forma rettangolare, tuttavia, a questi può essere somministrata una forma arrotondata usando il .PILL ROURMATO classe. Inoltre, si fa un badge con il contatore di notifica nidificando il badge all'interno di un elemento.