Изменение цвета Twitter bootstrap Nav-таблетки

Question

Изменение цвета Twitter bootstrap Nav-таблетки

Я пытаюсь изменить активный цвет (после его нажатия он остается светло-голубым цветом 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?

595 7

twitter-bootstrap

7 ответов:

Comments

Ничего не найдено.

Andres Ilich · Accepted Answer · 2012-05-13 02:06:36

вы можете поставить свой собственный класс 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;
}

Nezam · Accepted Answer · 2015-05-19 14:33:20

по итогам голосования решение не работает для меня.(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>

Felipe Maia · Accepted Answer · 2017-04-18 03:20:28

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

для меня работало только следующее:
.nav-pills > li > a.active {
    background-color: #ff0000!important;
}
The !important также необходимо.

Michael Simons · Accepted Answer · 2012-07-30 15:52:38

Я использую этот отрезанный для изменения активного класса для всех таблеток в том же ul (применяется при готовности документа):
$('ul.nav.nav-pills li a').click(function() {           
    $(this).parent().addClass('active').siblings().removeClass('active');           
});

Sam Sokeye · Accepted Answer · 2017-12-28 04:01:36

это специфично для 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;
}

Ganesh Kamath - 'Code Frenzy' · Accepted Answer · 2017-09-22 12:48:03

Шаг 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>

Jerome Blacq · Accepted Answer · 2018-09-19 13:46:56

решение этой проблемы, как правило, немного отличаются от случая к случаю. Общий способ решить это -
1.) щелкните правой кнопкой мыши на загрузочной таблетке и выберите проверить или проверить элемент, если firefox
2.) скопируйте селектор css для правила, которое изменяет цвет
3.) измените его в своем пользовательском файле css следующим образом...
.TheCssSelectorYouJustCopied{
    background-color: #ff0000!important;//or any other color
}