Изменение цвета загрузочной ленты Twitter Nav-Pills

Ответ 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;
}

Кроме того, если вы предпочитаете заменять цвет по умолчанию для элемента .active в nav-pills, вы можете изменить оригинал так:

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

Ответ 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

Я использую это, чтобы изменить активный класс для всех таблеток в той же самой ul (применяется в готовом документе):

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

Ответ 4

Для Bootstrap 4.0 (в alpha на момент ввода) вы должны указать класс .active в элементе a.

Для меня работали только следующие:

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

Также необходим !important.

Ответ 5

Шаг 1: Определите класс с именем applycolor, который можно использовать для применения выбранного цвета.

Шаг 2: Определите, какие действия происходят с ним, когда он парит. Если фон формы белый, тогда вы должны убедиться, что при наведении курсора вкладка не станет белой. Для этого используйте предложение !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>

Ответ 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;
}