Cet article couvrira les perspectives suivantes pour démontrer l'utilisation des badges Bootstrap :
- Comment utiliser le badge Bootstrap pour obtenir des informations supplémentaires ?
- Comment utiliser le badge Bootstrap pour les informations contextuelles ?
- Comment ajouter des styles personnalisés au badge Bootstrap ?
- Comment ajouter des icônes au badge Bootstrap ?
- Comment lier le badge Bootstrap à une autre source ?
- Comment faire des badges arrondis ?
- Comment utiliser le badge Bootstrap comme compteur ?
Que sont les badges Bootstrap ?
Les badges sont les composants de base utilisés pour afficher un indicateur. Par exemple, ils peuvent être utilisés comme compteur numérique pour afficher le nombre de notifications ou de messages :
Ils peuvent également être utilisés pour afficher des informations supplémentaires, comme indiqué dans l'image donnée :
Comment utiliser le badge Bootstrap pour obtenir des informations supplémentaires ?
Des badges Bootstrap peuvent être ajoutés dans les éléments HTML pour être utilisés comme informations supplémentaires. Consultez l'exemple mentionné ci-dessous pour la démonstration.
Exemple
Pour utiliser le badge Bootstrap pour des informations supplémentaires, tout d'abord :
- Ajouter ' ' et ' ' éléments.
- Placer le ' ” élément avec le “ badge ' et ' badge-* ' Des classes. La classe 'badge-*' fait référence au badge avec la couleur spécifiée :
< h6 > Bourses d'études < portée classer = 'badge badge-secondaire' > Nouveau < / portée >< / h6 >
On peut observer que deux badges sont ajoutés aux rubriques concernées :
Comment utiliser le badge Bootstrap pour les informations contextuelles ?
Les badges Bootstrap peuvent également être utilisés pour fournir des informations contextuelles telles que ' badge-danger ” affiche le badge en rouge et peut être utilisé pour afficher certains messages ayant échoué comme annuler, invalide ou plus. Les ' badge-succès ” est utilisé lorsque nous voulons montrer un message de réussite.
Exemple
Regardez le code donné pour comprendre le scénario discuté :
< portée classer = 'badge badge-danger' >Compte non vérifié< / portée >< portée classer = 'badge badge-info' >c'est l'insigne< / portée >
< portée classer = 'badge badge-avertissement' >Compte en attente pour approbation< / portée >
< portée classer = 'badge badge-succès' >Compte vérifié< / portée >
Sortir
Comment ajouter des styles personnalisés au badge Bootstrap ?
Vous pouvez également utiliser CSS pour ajouter un style unique aux badges Bootstrap. Pour une meilleure compréhension, une classe avec le nom ' Douane ' est ajouté dans le ' ' élément. Ensuite, les propriétés suivantes sont appliquées :
< portée classer = 'badge insigne danger personnalisé' >Compte non vérifié < / portée >< portée classer = 'badge badge-info personnalisé' >C'est un insigne< / portée >
< portée classer = 'badge badge-avertissement personnalisé' >Compte en attente pour approbation< / portée >
< portée classer = 'badge badge-succès personnalisé' >Compte vérifié< / portée >
Classe de style 'personnalisée'
.Douane {taille de police : 18px ;
poids de la police : 100 ;
l'espacement des lettres : 1px ;
rembourrage : 8px 15px ;
}
Les ' .Douane » est utilisé pour accéder au « Douane ' classer. Les propriétés suivantes lui sont appliquées :
- ' taille de police ” ajuste la taille de la police.
- ' poids de la police ” indique l'épaisseur de la police.
- ' l'espacement des lettres ” ajoute un espace entre les lettres.
- ' rembourrage ” offre un espace autour du contenu de l'élément.
Sortir
Comment ajouter des icônes au badge Bootstrap ?
Nous pouvons également ajouter différentes icônes aux badges. Pour ce faire, il existe plusieurs classes qui peuvent être utilisées pour cette cause. Pour plus d'informations, visitez le Police géniale site Internet.
Exemple
En HTML, ajoutez un ' ' élément. Dans cet élément, placez l'élément en ligne « » ou « » pour insérer la classe d'icône :
< portée classer = 'badge insigne danger personnalisé' > Compte non vérifié< je classer = 'loin fa-temps-cercle' >< / je >
< / portée >
< portée classer = 'badge badge-succès personnalisé' > Compte vérifié
< je classer = 'fas fa-user-check' >< / je >
< / portée >
Sortir
Comment lier le badge Bootstrap à une autre source ?
Pour rendre les badges Bootstrap cliquables, placez le ' badge « classes au sein du HTML » » et indiquez la référence de la page liée dans le champ « href ' attribut:
< un href = '#' classer = 'badge insigne danger personnalisé' >Annuler< / un >< un href = '#' classer = 'badge badge-info personnalisé' >Soumettre< / un >
Sortir
Comment faire des badges arrondis ?
Pour rendre les bords du badge plus arrondis, ajoutez une classe ' badge-pilule ”. Cette classe prend en charge une plus grande ' rayon de bordure « et horizontale » rembourrage ' Propriétés:
< portée classer = 'badge badge-pilule badge-danger personnalisé' >Compte non vérifié < / portée >< portée classer = 'badge badge-pilule badge-avertissement personnalisé' >Compte en attente pour approbation< / portée >
< portée classer = 'badge badge-pilule badge-succès personnalisé' >Compte vérifié < / portée >
Sortir
Comment utiliser le badge Bootstrap comme compteur ?
Pour créer un bouton avec un compteur, ajoutez un HTML '
Avis < portée classer = 'badge badge-lumière' > 4 < / portée >
< / bouton >
Sortir
Il s'agissait des badges Bootstrap et de leurs étiquettes pertinentes dans Bootstrap.
Conclusion
Le Bootstrap ' badge ” La classe est utilisée pour ajouter des badges au site Web. Par exemple, des classes comme ' badge-danger ”, “ info-badge ”, et d'autres peuvent être utilisés pour ajouter des informations contextuelles aux badges comme leur étiquette. Certaines classes sont appliquées pour ajouter des icônes aux badges, telles que ' loin fa-temps-cercle ” pour placer une icône de cercle croisé. Cet article a fourni un guide complet sur les badges et étiquettes Bootstrap.