Twitter Bootstrap Nav-Pills的颜色更改 [英] Changing color of Twitter bootstrap Nav-Pills

问题描述

我正在尝试更改每个标签的活动颜色(单击后仍为Twitter的浅蓝色):

I'm trying to change the active color (after its clicked it remains twitter's light-blue color) for each tab:

 <ul class="nav nav-pills">
   <li class="active"><a href="#tab1" data-toggle="tab">Overview</a></li>
   <li><a href="#tab2" data-toggle="tab">Sample</a></li>
   <li><a href="#tab3" data-toggle="tab">Sample</a></li>
 </ul>

(如何)可以在CSS中做到这一点?

(How) can I do this in CSS?

推荐答案

您可以使用自定义颜色为您的活动链接向nav-pills容器提供您自己的类，这样您就可以创建任意数量的颜色而无需修改页面其他部分中的引导程序默认颜色.试试这个:

You can supply your own class to the nav-pills container with your custom color for your active link, that way you can create as many colors as you like without modifying the bootstrap default colors in other sections of your page. Try this:

标记

<ul class="nav nav-pills red">
    <li class="active"><a href="#tab1" data-toggle="tab">Overview</a></li>
    <li><a href="#tab2" data-toggle="tab">Sample</a></li>
    <li><a href="#tab3" data-toggle="tab">Sample</a></li>
</ul>

这是自定义颜色的CSS:

And here is the CSS for your custom color:

.red .active a,
.red .active a:hover {
    background-color: red;
}

此外，如果您希望替换nav-pills中.active项目的默认颜色，则可以像这样修改原始颜色:

Also, if you prefer to replace the default color for the .active item in your nav-pills you can modify the original like so:

.nav-pills > .active > a, .nav-pills > .active > a:hover {
    background-color: red;
}

这篇关于Twitter Bootstrap Nav-Pills的颜色更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！