我正在尝试为每个标签更改活动颜色(点击后仍然是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中执行此操作吗?
答案 0 :(得分:86)
您可以使用您的活动链接的自定义颜色向nav-pills
容器提供您自己的类,这样您就可以创建任意数量的颜色,而无需修改页面其他部分中的引导程序默认颜色。试试这个:
<强>标记强>
<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;
}
此外,如果您希望替换.active
中nav-pills
项的默认颜色,则可以像这样修改原始颜色:
.nav-pills > .active > a, .nav-pills > .active > a:hover {
background-color: red;
}
答案 1 :(得分:37)
投票最多的解决方案对我不起作用。(Bootstrap 3.0.0)但是,这样做了:
[usrs]\Anaconda\Scripts
在.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
color:black;
background-color:#fcd900;
}
页面上包含此标记,可以为每页基础提供
将它混合在两个色调上可以产生如下效果:
<style></style>
答案 2 :(得分:7)
对于Bootstrap 4.0(在输入时的alpha版本中),您应该在.active
元素上指定a
类。
对我来说,只有以下工作:
.nav-pills > li > a.active {
background-color: #ff0000!important;
}
!important
也是必要的。
答案 3 :(得分:4)
这是Bootstrap 4.0特有的。
<强> HTML 强>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link nav-link-color" href="#about">home</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-color" href="#contact">contact</a>
</li>
</ul>
<强> CSS 强>
.nav-pills > li > a.active {
background-color: #ffffff !important;
color: #ffffff !important;
}
.nav-pills > li > a:hover {
color: #ffffff !important;
}
.nav-link-color {
color: #ffffff;
}
答案 4 :(得分:3)
我使用此剪辑来更改同一ul中所有药丸的活动类(在文档准备好时应用):
$('ul.nav.nav-pills li a').click(function() {
$(this).parent().addClass('active').siblings().removeClass('active');
});
答案 5 :(得分:2)
.nav-pills .nav-link.active {
background-color: #ff0000!important;
}
答案 6 :(得分:2)
如果您不想包括任何额外的CSS,则可以在nav-link元素中使用按钮颜色类,它将使药丸的格式与常规按钮相同。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<ul class="nav nav-pills p-3">
<li class="nav-item">
<a class="nav-link active" href="#">Normal</a>
</li>
<li class="nav-item">
<a class="nav-link active btn-primary" href="#">Primary</a>
</li>
<li class="nav-item">
<a class="nav-link active btn-secondary" href="#">Secondary</a>
</li>
<li class="nav-item">
<a class="nav-link active btn-success" href="#">Success</a>
</li>
<li class="nav-item">
<a class="nav-link active btn-warning" href="#">Warning</a>
</li>
<li class="nav-item">
<a class="nav-link active btn-danger" href="#">Danger</a>
</li>
</ul>
答案 7 :(得分:1)
以下代码对我有用:-
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
color: #fff;
background-color: rgba(0,123,255,.5);
}
注意:-使用Bootstrap 4对我有用
答案 8 :(得分:1)
用于更改所有按钮的SCSS选项...
// do something for each color
@each $color, $value in $theme-colors {
// nav-link outline colors on the outer nav element
.nav-outline-#{$color} .nav-link {
@include button-outline-variant($value);
margin: 2px 0;
}
// nav-link colors on the outer nav element
.nav-#{$color} .nav-link {
@include button-variant($value, $value);
margin: 2px 0;
}
}
所以您最终得到了所有定义的颜色.nav-primary
类似于.btn-primary
...
<div class="col-2 nav-secondary">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link" aria-expanded="true" aria-controls="addService" data-toggle="pill" href="#addService" role="tab" aria-selected="false">
Add Service
</a>
<a class="nav-link" aria-expanded="true" aria-controls="bonusPayment" data-toggle="pill" href="#bonusPayment" role="tab" aria-selected="false">
Bonus Payment
</a>
<a class="nav-link" aria-expanded="true" aria-controls="oneTimeInvoice" data-toggle="pill" href="#oneTimeInvoice" role="tab" aria-selected="false">
Invoice - One Time
</a>
<a class="nav-link active" aria-expanded="true" aria-controls="oneTimePayment" data-toggle="pill" href="#oneTimePayment" role="tab" aria-selected="true">
Payment - One Time
</a>
</div>
</div>
答案 9 :(得分:0)
步骤1:定义一个名为applycolor
的类,可用于应用您选择的颜色。
步骤2:定义当它悬停时发生的动作。如果表单背景为白色,则必须确保在悬停时标签不会变为白色。要实现此目的,请使用!important
子句在悬停属性上强制使用此功能。我们这样做是为了覆盖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>
答案 10 :(得分:0)
此问题的解决方案因情况而异。
解决它的一般方法是
1.)右键单击引导丸,然后选择检查或检查元素是否为Firefox
2.)复制用于更改颜色的规则的css选择器
3.)像这样在您的自定义css文件中对其进行修改...
.TheCssSelectorYouJustCopied{
background-color: #ff0000!important;//or any other color
}
答案 11 :(得分:0)
这对我来说在Bootstrap 4.4.1上非常有效!
.nav-pills > li > a.active{
background-color:#46b3e6 !important;
color:white !important;
}
.nav-pills > li.active > a:hover {
background-color:#46b3e6 !important;
color:white !important;
}
.nav-link-color {
color: #46b3e6;
}
答案 12 :(得分:0)
这对我有用 Bootstrap v3.3.7 把它写在你的 css 文件中!
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: #0d0d0d;
}
答案 13 :(得分:0)
在 Bootstrap 5.0.x 上:
<style>
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
color: #fff;
background-color: #af2e89;
}
</style>