twitter-bootstrap - 更改 Twitter bootstrap Nav-Pills 的颜色

Question

我正在尝试更改每个选项卡的事件颜色(单击后仍保持 Twitter 的浅蓝色):

 <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 中执行此操作吗？

Answer 1

您可以向 nav-pills 容器提供您自己的类，并为事件链接提供自定义颜色，这样您就可以创建任意数量的颜色，而无需修改其他 Bootstrap 的默认颜色您页面的各个部分。试试这个:

标记

<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:

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

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

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