web-dev-qa-db-fra.com

Avec Twitter Bootstrap, comment puis-je personnaliser la couleur de texte h1 d'une page et laisser les autres pages en défaut?

Sur ma page d'index, je souhaite que la couleur du texte h1 soit blanche et accompagnée d'une ombre, mais je ne souhaite pas modifier le comportement par défaut h1 sur les autres pages. Comment puis-je atteindre cet objectif?

twitter-bootstraptextcolor
21
tom

Vous pouvez ajouter votre propre id ou classe à la balise body de votre page d'index pour cibler tous les éléments de cette page avec un style personnalisé, comme suit:

<body id="index">
   <h1>...</h1>
</body>

Ensuite, vous pouvez cibler les éléments que vous souhaitez modifier avec votre classe ou votre identifiant de la manière suivante:

#index h1 {
   color:red;
}
23
Andres Ilich

dans bootstrap 3, voici les classes pour changer la couleur du texte:

<p class="text-muted">...</p> //grey
<p class="text-primary">...</p> //light blue
<p class="text-success">...</p> //green
<p class="text-info">...</p> //blue
<p class="text-warning">...</p> //orangish,yellow
<p class="text-danger">...</p> //red

Documentation sous Classes d'assistance - Couleurs contextuelles .

104
Connor Leech

Vous pouvez également appliquer les classes 'text' par défaut disponibles à partir de bootstrap lui-même.

 <h1 class='text-info'>Hey... I'm blue</h1>

http://Twitter.github.io/bootstrap/base-css.html

8
sk8terboi87 ツ

Après avoir lu ce document moi-même (Utilisation des classes de couleur du texte dans la réponse de Connor Leech)

Soyez averti de faire très attention à la classe "navbar-text".

Pour obtenir du texte vert sur la barre de navigation, par exemple, vous pourriez être tenté de le faire:

<p class="navbar-text text-success">Some Text Here</p>

Cela ne fonctionnera pas! "navbar-text" remplace la couleur et la remplace par la couleur standard du texte navbar.

La bonne façon de procéder consiste à imbriquer le texte dans un deuxième élément, par exemple:

<p class="navbar-text"><span class="text-success">Some Text Here</span></p>

ou dans mon cas (comme je voulais souligner le texte)

<p class="navbar-text"><strong class="text-success">Some Text Here</strong></p>

Lorsque vous procédez ainsi, vous obtenez un texte correctement aligné avec la hauteur de la barre de navigation et vous pouvez également modifier la couleur.

3
shawty

Il existe des classes d’aide dans bootstrap 3 avec des couleurs contextuelles. Veuillez utiliser ces classes dans les attributs HTML.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Référence:http://getbootstrap.com/css/#type

1
Poorna Rao

En plus de la réponse de @Connor Leech.

Si vous souhaitez créer un nouveau type de typographie personnalisé, définissez les éléments suivants dans votre fichier css.

.text-foo {
  .text-emphasis-variant(#FFFFFF);
}

Le mixin text-emphasis-variant est défini dans le fichier mixins.less de Bootstrap.

1
pymarco

vous pouvez utiliser le style de police Comme:

     <font color="white"><h1>Header Content</h1></font>
0
nimey sara thomas

Le meilleur moyen de résoudre ce problème serait de commencer par personnaliser Bootstrap à l'aide de leurs outils de personnalisation.

http://getbootstrap.com/customize/

Rendez-vous à @ entêtes-couleur et remplacez "hériter" par quelque chose que vous voudriez que vos en-têtes soient sur le site (si vous aimez le comportement par défaut, changez-le en # 333).

Notez que cela gardera toutes les rubriques de la même couleur, comme vous l'avez demandé. 

Maintenant, afin de réaliser ce que vous voulez, après avoir apporté ce changement, vous pouvez maintenant les écraser spécifiquement dans votre propre CSS pour leur appliquer votre propre couleur. Le mot clé "inherit" que j'ai toujours trouvé pénible pour les frameworks.

0
Kris Boyd