Twitter Bootstrap Nav-Pills的颜色更改

68

我正在尝试更改每个选项卡的活动颜色（单击后仍为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中执行此操作？

twitter-bootstrap  nav  nav-pills 
— 埃里亚斯7
source
1
操纵颜色如何？您的意思是将蓝色更改为其他颜色？
— 安德烈斯·伊里奇
嗨安德烈斯，是的，将颜色更改为其他颜色……
— Elias7

Answers:

98

您可以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;
}
— 安德烈斯·伊里奇（Andres Ilich）
source
3
您还必须.nav-pills > .active > a:focus在CSS文件中添加该列表，以确保即使单击导航栏时颜色也保持不变。
— Teemu Leisti
8
@raffian在3.X中，您必须更加具体，对于最后一个示例：.nav-pills > li.active > a, .nav-pills > li.active > a:hoverli.active.active
— -bootstrap
4
这对我不直接有效，我必须在背景色上添加！important。
— Sirar Salih
40

投票最多的解决方案对我不起作用。（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>
— 内扎姆
source
谢谢这也为我工作...应该被标记为正确答案！
— Vibhore Agg
13

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

对我来说只有以下工作：

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

的!important也是必要的。

— 费利佩·迈亚（Felipe Maia）
source
9

Bootstrap 4.x解决方案

.nav-pills .nav-link.active {
    background-color: #ff0000!important;
}
— 托马斯
source
6

这特定于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;
}
— 山姆·索基
source
喜@ SAM-sokeye，我觉得上面的答案可能已经工作了4自举
— 德里克·霍珀
3

我使用此片段来更改同一ul中所有药丸的有效类别（适用于准备就绪的文档）：

$('ul.nav.nav-pills li a').click(function() {           
    $(this).parent().addClass('active').siblings().removeClass('active');           
});
— 迈克尔·西蒙斯
source
2

以下代码为我工作：

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

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

— 沙希施卡尔·哈萨布尼斯
source
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>
展开摘要

— 巴里布雷拉
source
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>

在此处输入图片说明

— 艺人
source
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>
— Ganesh Kamath-“疯狂代码”
source
0

此问题的解决方案因情况而异。解决该问题的一般方法是：
1.）右键单击引导程序丸，然后选择firefox来检查或检查元素
2.）复制用于更改颜色的规则的css选择器
3.）在自定义css文件中进行修改，例如所以...

.TheCssSelectorYouJustCopied{
    background-color: #ff0000!important;//or any other color
}
— 杰罗姆·布拉克（Jerome Blacq）
source
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;
}
— 斯里亚什里·斯温
source
— 4.4.x中
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.