web-dev-qa-db-fra.com

Classes de couleur de texte disponibles dans Bootstrap

Je développe une page d'inscription en mettant un texte comme titre dans la barre de navigation. Je veux donner à ces textes des couleurs différentes. À cette fin, j'utilise un fichier CSS séparé, mais je souhaite le faire à l'aide du fichier CSS de bootstrap.

Quelqu'un peut-il lister les classes de couleurs disponibles dans bootstrap?

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4
115
fidel castro

Le documentation de bootstrap répertorie cela dans les classes d'assistance: Muted, Primary, Success, Info, Warning, Danger.

Le documentation de bootstrap 4 répertorie cet élément sous utilitaires -> couleur et comporte d'autres options: primary, secondary, success, danger, warning, info, light, dark, muted, white.

Pour y accéder, on utilise la classtext-[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 grand nombre de choix, mais c'est certains.

190
Ted Delezene

Le texte de la barre de navigation est normalement coloré en utilisant l’une des deux classes CSS suivantes du fichier bootstrap.css.

Premièrement, si vous utilisez une barre de navigation par défaut (la barre grise), la classe .navbar-default est utilisée et le texte est coloré en tant que gris foncé .

.navbar-default .navbar-text {
  color: #777;
}

L'autre est en cas d'utilisation d'une barre de navigation inverse (la noire), le texte est coloré comme gray6 .

.navbar-inverse .navbar-text {
  color: #999;
}

Ainsi, vous pouvez changer sa couleur à votre guise. Cependant, je vous recommanderais d’utiliser un fichier css séparé pour le changer.

REMARQUE: vous pouvez également utiliser le personnaliseur fourni par Twitter Bootstrap, dans la section Navbar.

6
lvarayut

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 selon vos besoins.

4
Dipendra Ghatal