改变 Twitter bootstrap Nav-Pills 的颜色

Posted 2023-04-12

【中文标题】改变 Twitter bootstrap Nav-Pills 的颜色

【英文标题】：Changing color of Twitter bootstrap Nav-Pills

【发布时间】：2012-05-20 14:33:36

【问题描述】：

我正在尝试更改每个标签的活动颜色（点击后它仍然是 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 中做到这一点？

【问题讨论】：

如何操作颜色？你的意思是把蓝色换成别的东西？

嗨，安德烈斯，是的，将颜色更改为其他颜色...

【参考方案1】：

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

【讨论】：

您还必须将 .nav-pills > .active > a:focus 添加到 CSS 文件中的该列表中，以确保即使您单击导航药丸时颜色也保持不变。

@raffian 在 3.X 中，您必须更具体，对于最后一个示例：.nav-pills > li.active > a, .nav-pills > li.active > a:hover - bootstrap CSS 现在指定 li.active，而不仅仅是 .active

这对我不起作用，我必须将 !important 添加到背景颜色中。

【参考方案2】：

投票最多的解决方案对我不起作用。（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>

【讨论】：

感谢这对我也有用...应该标记为正确答案！

【参考方案3】：

对于 Bootstrap 4.0（在键入时为 alpha 版本），您应该在 a 元素上指定 .active 类。

对我来说只有以下工作：

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

!important 也是必需的。

--

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

【讨论】：

这在 Firefox 中不起作用。 !important;之前需要一个空格

【参考方案4】：

Bootstrap 4.x 解决方案

.nav-pills .nav-link.active 
    background-color: #ff0000 !important;

【讨论】：

这适用于 Chrome 88，但不适用于 Firefox 85。它需要在 !important; 之前有一个空格

【参考方案5】：

这是 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;

【讨论】：

嗨@sam-sokeye，我认为最佳答案可能已经适用于Bootstrap 4。

【参考方案6】：

我使用这个片段来更改同一 ul 中所有药丸的活动类（在文档准备好时应用）：

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

【参考方案7】：

以下代码对我有用：-

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

注意：- 这对我使用 Bootstrap 4 有效

【参考方案8】：

如果您不想包含任何额外的 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>

【参考方案9】：

用于更改所有按钮的 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>

【参考方案10】：

在 Bootstrap 5.0.x 上：

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

【参考方案11】：

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

【参考方案12】：

此问题的解决方案往往因情况而异。 解决它的一般方法是 1.) 右键单击​​引导药丸并选择检查或检查元素如果是 firefox 2.) 复制更改颜色规则的 css 选择器 3.) 在您的自定义 css 文件中修改它，如下所示...

.TheCssSelectorYouJustCopied
    background-color: #ff0000!important;//or any other color

【参考方案13】：

这在 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;

【讨论】：

4.4.x 中没有 nav-link-color

【参考方案14】：

这对我有用 Bootstrap v3.3.7 把它写在你的css文件中！

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