改变Twitter引导Nav-Pills的颜色

我试图改变活动的颜色（点击后，它仍然是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容器，这样，您可以根据需要创build任意数量的颜色，而无需修改页面其他部分中的引导默认颜色。 尝试这个：

标记

 <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; } 

Answer 2

最投票的解决scheme不适合我。 （Bootstrap 3.0.0）但是，这样做：

 .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { color:black; background-color:#fcd900; } 

包括这个在页面上的<style></style>标签，对于每个页面都很好

并在两种色调上混合出色效果，如：

 <style> .nav-pills > li.active > a, .nav-pills > li.active > a:focus { color: black; background-color: #fcd900; } .nav-pills > li.active > a:hover { background-color: #efcb00; color:black; } </style> 

Answer 3

我使用这个剪切来改变所有药丸的活性类在相同的UL（适用于文件准备）：

 $('ul.nav.nav-pills li a').click(function() { $(this).parent().addClass('active').siblings().removeClass('active'); }); 

Answer 4

对于Bootstrap 4.0（在input的时候是alpha），你应该在a元素上指定.active类。

对我来说只有以下工作：

 .nav-pills > li > a.active { background-color: #ff0000!important; } 

!important也是必要的。

Answer 5

第1步：定义一个名为applycolor的类，它可以用来应用您select的颜色。

第2步：定义当它hover时发生什么操作。 如果你的表单背景是白色的，那么你必须确保在hover选项卡上不会变白。 为了达到这个目的，使用!important子句在hover属性上强制这个特性。 我们这样做是为了覆盖Bootstrap的默认行为。

第3步：将这个类应用到您正在定位的选项卡上。

CSS部分：

 <style> .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { color: #fff; background-color: #337ab7 !important; } .nav > li > a:hover, .nav > li > a:focus { text-decoration: none; background-color: none !important; } .applycolor { background-color: #efefef; text-decoration: none; color: #fff; } .applycolor:hover { background-color: #337ab7; text-decoration: none; color: #fff; } </style> 

选项卡部分：

 <section class="form-toolbar row"> <div class="form-title col-sm-12" id="tabs"> <ul class="nav nav-pills nav-justified"> <li class="applycolor"><a data-toggle="pill" href="#instance" style="font-size: 1.8rem; font-weight: 800;">My Apps</a></li> <li class="active applycolor"><a data-toggle="pill" href="#application" style="font-size: 1.8rem; font-weight: 800;">Apps Collection</a></li> </ul> </div> </section>