Classes de couleur de texte disponibles dans Bootstrap
Je développe une page d'inscription, en mettant du texte comme titre dans la barre de navigation. Je veux donner à ces textes des couleurs différentes. Pour ce faire, j'utilise un fichier CSS séparé, mais je veux le faire en utilisant le fichier CSS de bootstrap.
Quelqu'un peut-il lister les classes de couleurs disponibles dans bootstrap?
3 réponses
La documentation bootstrap 3 répertorie cela sous les classes d'assistance:
Muted, Primary, Success, Info, Warning, Danger.
La documentation bootstrap 4 répertorie cela sous utilitaires - > couleur, et a plus d'options:
primary, secondary, success, danger, warning, info, light, dark, muted, white.
Pour y accéder, on utilise le class text-[class-name]
Donc, si je veux du texte bleu par exemple, je ferais quelque chose comme ceci:
<p class="text-primary">This text is the blue primary color.</p>
Ce n'est pas un énorme nombre de choix, mais il est certains.
Le texte de la barre de navigation est normalement coloré en utilisant l'une des deux classes CSS suivantes dans le fichier bootstrap.css.
Tout d'abord, en cas d'utilisation d'une barre de navigation par défaut (la barre grise), la classe .navbar-default sera utilisée et le texte sera coloré comme gris foncé.
.navbar-default .navbar-text {
color: #777;
}
L'autre est en cas d'utilisation d'une barre de navigation inverse (la barre noire), le texte est coloré comme gray60 .
.navbar-inverse .navbar-text {
color: #999;
}
, vous pouvez changer sa couleur comme vous le souhaitez. Cependant, je tiens à vous recommandons d'utiliser un fichier css à modifier.
REMARQUE: vous pouvez également utiliser le customizer fournis par Twitter Bootstrap, le Navbar section.
Vous pouvez utiliser des classes de texte:
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-muted
.text-white
Utilisez des classes de texte dans n'importe quelle balise si nécessaire.
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
Vous pouvez ajouter vos propres classes ou modifier les classes ci-dessus en tant que votre condition.