Bootstrap | Badge ed etichette

I badge del sito Web sono generalmente una piccola grafica su qualsiasi applicazione. I badge sono anche noti come pulsanti del sito Web collegati a un altro sito Web o utilizzati per uno scopo particolare. In Bootstrap 3, c'era una classe separata per le etichette, ma mentre stiamo usando Bootstrap 4, la classe dell'etichetta è stata sostituita con il "distintivo" classe.

Questo articolo coprirà le seguenti prospettive per dimostrare l'uso 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 fare i badge arrotondati?
• Come utilizzare il badge bootstrap come contatore?

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:

• Aggiungere "

  " E "

  " elementi.

• Posiziona il ""Elemento con il"distintivo" E "distintivo-*" classi. La classe "Badge-*" si riferisce al badge con il colore specificato:

EventiNuovo

Borse di studio Nuovo

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 verificato
Questo è badge
Conto in sospeso per l'approvazione
Account verificato

Produzione

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 verificato
Questo è badge
Conto in sospeso per l'approvazione
Account verificato

Classe "personalizzata" di stile

.costume
Font-size: 18px;
Font-Weight: 100;
Spazio di lettere: 1px;
imbottitura: 8px 15px;

IL ".costume"Viene utilizzato per accedere al"costume" classe. Le seguenti proprietà sono applicate ad esso:

• "dimensione del font"Regola la dimensione del carattere.
• "Font-peso"Afferma 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 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 verificato


Account verificato

Produzione

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:

Annulla
Invia

Produzione

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 verificato
Conto in sospeso per l'approvazione
Account verificato

Produzione

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:

Notifiche 4

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.