Couleurs de texte et couleurs d'arrière-plan classes en bootstrap 5 | Expliqué
Classes de couleur de texte
Bootstrap 5 classes liées aux couleurs de texte aident à donner un sens au texte. Ces classes sont appelées classes d'utilité des couleurs et sont également utilisées pour styliser les liens avec les états de survol.
Toutes les classes liées à la couleur du texte ainsi que la signification que ces transmissions sont expliquées ici.
.texto-primaire
Il donne une couleur bleue au texte et représente un texte important.
.texte-secondaire
Il fournit une couleur grise au texte et représente le texte secondaire.
.succès texte
Cette classe donne une couleur verte au texte et représente le succès.
.danger de texte
Comme son nom l'indique, cette classe indique un danger et donne une couleur rouge au texte.
.avance de texte
Il fournit une couleur jaune au texte et indique un avertissement.
.texto
Cette classe est utilisée pour représenter une information et fournir une nuance plus claire de bleu au texte.
.luminaire
Il donne une couleur gris clair au texte.
.dark de texte
Cette classe donne une couleur gris foncé au texte.
.corps de texte
Il fournit de la couleur au corps du texte qui est noir par défaut.
.en texte
Il représente un texte en sourdine et lui donne une couleur gris clair.
.blanc
Comme son nom le représente, cette classe fournit une couleur blanche au texte.
Maintenant, nous allons démontrer toutes ces couleurs à travers un exemple afin que vous puissiez apprendre à les utiliser.
Exemple
Considérez l'exemple ci-dessous.
Html
Un texte important
Texte avec couleur grise.
La victoire
Danger.
Avertissement
Ceci est une information importante
Bonjour le monde!
Ceci est un texte à thème sombre
C'est du texte du corps
Ce texte est muet
Ceci est un texte avec une couleur blanche
Dans le code ci-dessus, nous avons simplement créé plusieurs
éléments et attribué à chaque paragraphe une classe de couleur de texte différente.
Sortir
Toutes les classes de couleur de texte ont été démontrées avec succès.
Ajout d'opacité au texte
Il y a deux classes associées à la couleur du texte dans Bootstrap 5 qui ajoutent une opacité au texte. Ceux-ci sont expliqués ci-dessous.
.Text-Black-50
Cela représente un texte de couleur noire ayant 50% d'opacité avec un fond blanc.
.text-blanc-50
Cela représente un texte de couleur blanche ayant une opacité de 50% avec un fond noir.
Voyons un exemple.
Exemple
Dans l'exemple ci-dessous, nous ajoutons l'opacité au texte en utilisant les classes mentionnées ci-dessus.
Html
Ce paragraphe a une couleur noire, une opacité à 50% et un fond blanc
Ce paragraphe a une couleur blanche, une opacité à 50% et un fond noir
Ici, nous attribuons les deux paragraphes une classe différente pour ajouter l'opacité au texte présent à l'intérieur de ces paragraphes. Vous devez également avoir remarqué que dans cet exemple et l'exemple ci-dessus, nous avons donné une couleur d'arrière-plan noir aux éléments en utilisant une classe de couleur d'arrière-plan. Les classes de couleurs d'arrière-plan dans Bootstrap 5 ont été discutées dans la section à venir.
Sortir
L'opacité a été ajoutée avec succès au texte.
Cours de couleurs d'arrière-plan
Les classes de couleurs d'arrière-plan dans Bootstrap 5 fournissent de la couleur aux éléments. Les noms de ces classes sont similaires aux classes de couleurs de texte avec la seule différence que le préfixe "BG" est utilisé pour les classes associées aux couleurs d'arrière-plan.
Gardez à l'esprit que ces classes fournissent une couleur d'arrière-plan aux éléments, pas au texte. Toutes les classes associées à la couleur d'arrière-plan sont expliquées avec un exemple démontré ci-dessous.
Exemple
Consultez l'exemple ci-dessous pour comprendre les classes de couleurs d'arrière-plan dans Bootstrap 5.
Html
Un texte important
Texte avec couleur grise.
La victoire
Danger.
Avertissement
Ceci est une information importante
Bonjour le monde!
Ceci est un texte à thème sombre
Ceci est un texte avec une couleur blanche
Dans le code ci-dessus, nous avons créé plusieurs paragraphes et ajouté une couleur d'arrière-plan différente à chaque.
Sortir
Les couleurs d'arrière-plan ont été ajoutées avec succès aux paragraphes.
Conclusion
Les classes de couleurs dans Bootstrap 5 fournissent de la couleur au texte et fournissent une certaine signification concernant le texte. Pendant ce temps, les classes associées à la couleur d'arrière-plan fournissent de la couleur à l'arrière-plan des éléments. Les classes liées au texte et à l'arrière-plan ont des noms similaires avec différents préfixes. Pour les classes de couleur de texte, le préfixe est .texte-, En attendant, pour les classes de couleurs d'arrière-plan, le préfixe est .bg-. Ce message discute en détail de chacune des catégories de classe ainsi que des exemples appropriés.