With Twitter Bootstrap, how can I customize the h1 text color of one page and leave the other pages to be default?
On my index page, I want the h1 text color to be white and comes with shadow, but I don\'t want to change the default behavior the h1 on other pages. How can I achieve this?
-
After perusing this myself (Using the Text Color Classes in Connor Leech's answer)
Be warned to pay careful attention to the "navbar-text" class.
To get green text on the navbar for example, you might be tempted to do this:
<p class="navbar-text text-success">Some Text Here</p>This will NOT work!! "navbar-text" overrides the color and replaces it with the standard navbar text color.
The correct way to do it is to nest the text in a second element, EG:
<p class="navbar-text"><span class="text-success">Some Text Here</span></p>or in my case (as I wanted emphasized text)
<p class="navbar-text"><strong class="text-success">Some Text Here</strong></p>When you do it this way, you get properly aligned text with the height of the navbar and you get to change the color too.
讨论(0) -
You can add your own id or class to the body tag of your index page to target all elements on that page with a custom style like so:
<body id="index"> <h1>...</h1> </body>Then you can target the elements you wish to modify with your class or id like so:
#index h1 { color:red; }讨论(0)
加载中...
- 热议问题