Questo articolo coprirà le seguenti prospettive per dimostrare l'uso dei badge bootstrap:
Cosa sono i badge bootstrap?
I badge sono i componenti di base che vengono utilizzati per mostrare un indicatore. Ad esempio, possono essere usati come contatore numerico per mostrare il numero di notifiche o messaggi:
Possono anche essere utilizzati per visualizzare ulteriori informazioni, 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 indicato di seguito per la dimostrazione.
Esempio
Per utilizzare il badge bootstrap per le informazioni di aggiunta, in primo luogo:
Si può osservare che due badge vengono aggiunti alle intestazioni pertinenti:
Come utilizzare il badge bootstrap per informazioni contestuali?
I badge bootstrap possono anche essere utilizzati per fornire informazioni contestuali come "badge-baller"Visualizza il badge in colore rosso e può essere utilizzato per mostrare alcuni messaggi non riusciti come annullamento, non valido o altro ancora. IL "BADGE SUCCESS"È usato dove vogliamo mostrare un messaggio di successo.
Esempio
Guarda il codice dato per comprendere lo scenario discusso:
Conto non verificatoProduzione
Come aggiungere stili personalizzati al badge bootstrap?
Puoi anche usare CSS per aggiungere qualche stile unico ai badge bootstrap. Per una migliore comprensione, una lezione con il nome "costume"Viene aggiunto all'interno del""Elemento. Quindi, vengono applicate le seguenti proprietà:
Conto non verificatoClasse "personalizzata" di stile
.costumeIL ".costume"Viene utilizzato per accedere al"costume" classe. Le seguenti proprietà sono applicate ad esso:
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 sito Web Font Awesome.
Esempio
In HTML, aggiungi un ""Elemento. All'interno di questo elemento, posizionare l'elemento inline ""O" "per inserire la classe icona:
Conto non verificatoProduzione
Come collegare il badge bootstrap a un'altra fonte?
Per rendere i badge bootstrap cliccabili, posizionare "distintivo"Classi all'interno dell'HTML""Tag e fornire il riferimento della pagina collegata in"Href"Attributo:
AnnullaProduzione
Come fare i badge arrotondati?
Per rendere i bordi del badge più arrotondati, aggiungi una classe "badge-pill". Questa classe supporta un "più grande"raggio di confine"E orizzontale"imbottitura" proprietà:
Conto non verificatoProduzione
Come utilizzare il badge bootstrap come contatore?
Per creare un pulsante con un contatore, aggiungi un HTML "Tag con tipo "pulsante"E assegnagli le classi di pulsanti"btn" E "Btn-Success". Quindi, includi il ""Elemento per posizionare un contatore:
Produzione
Si trattava di badge bootstrap e delle loro etichette rilevanti in bootstrap.
Conclusione
Il bootstrap "distintivo"La classe viene utilizzata per aggiungere badge al sito Web. Ad esempio, lezioni come "badge-baller","BADGE-INFO", E altro può essere utilizzato per aggiungere informazioni contestuali ai badge come etichetta. Alcune classi vengono applicate per aggiungere icone ai badge, come "Circle FAR FA-Times"Per posizionare un'icona a croce. Questo post ha fornito una guida completa sui badge ed etichette bootstrap.