Bootstrap 变色药丸

我试图改变每个标签的活动颜色(点击之后仍然是 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 中做到这一点？

163678 次浏览
小开
最佳答案

您可以向 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;
}

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

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

我使用这个剪切来更改同一 ul 中所有药丸的活动类(应用于已准备好的文档) :

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

投票最多的解决方案对我不起作用。然而，这个方案起作用了:

.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>
小开

对于 Bootstrap 4.0(在输入时为 alpha) ，您应该在 a元素上指定 .active类。

对我来说，只有以下方法有效:

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

!important也是必要的。

--

编辑: 根据 CodeMantle 下面的评论在 !important之前添加空间

小开

步骤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>
小开

这是 Bootstrap 4.0特有的。

超文本标示语言

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

这个问题的解决方案，往往因情况而略有不同。 解决这个问题的一般方法是
1.)右键单击引导程序丸，并选择如果 firefox 检查或检查元素
2.)复制用于改变颜色的规则的 css 选择器
3.)在您的自定义 css 文件中修改它，像这样... < br > 

.TheCssSelectorYouJustCopied{
background-color: #ff0000!important;//or any other color
}
小开

Bootstrap 4.x 解决方案

.nav-pills .nav-link.active {
background-color: #ff0000 !important;
}
小开

以下代码对我有效:-

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
color: #fff;
background-color: rgba(0,123,255,.5);
}

注意:-使用 Bootstrap 4，这对我很有用

小开

在引导程序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;
}
小开

如果你不想包括任何额外的 CSS，你可以只使用按钮颜色类到导航链接元素，它会格式化药丸就像一个普通的按钮。

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

小开

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>

enter image description here

小开

这对我来说很管用 Bootstrap v3.3.7 写在你的 css 文件！

.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: #0d0d0d;
}
小开

在 Bootstrap 5.0.x 上:

<style>
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
color: #fff;
background-color: #af2e89;
}
</style>
小开

Bootstrap 5.x 动态解决方案

从标准示例只需添加下面的 html 和 css Btn btn-有色人种 我添加“[ data-bs-target ]”以避免干扰导航栏的导航链接

.nav-link[data-bs-target] {
}
.nav-link[data-bs-target]:hover {
color: var(--bs-btn-hover-color);
background-color: var(--bs-btn-hover-bg);
border-color: var(--bs-btn-hover-border-color);
}
.nav-link[data-bs-target].active {
color: var(--bs-btn-hover-color);
background-color: var(--bs-btn-hover-bg);
border-color: var(--bs-btn-hover-border-color);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link btn btn-primary active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
<button class="nav-link btn btn-info" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
<button class="nav-link btn btn-danger" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
<button class="nav-link btn btn-success" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>


提交答案