Вопрос по twitter-bootstrap – Изменение цвета Twitter-загрузчика Nav-Pills

57

Я пытаюсь изменить активный цвет (после нажатия на него остается светло-синий цвет в твиттере) для каждой вкладки:

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

Привет, Андрес, да, поменяй цвет на что-то другое ... Elias7
Манипулировать цветом как? ты имеешь ввиду сменить синий на что то другое? Andres Ilich

Ваш Ответ

9   ответов
2

Bootstrap 4.0 Solution

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

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

Markup

<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;
}
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded.nav-pills > li.active > a, .nav-pills > li.active > a:hoverError: User Rate Limit Exceededli.activeError: User Rate Limit Exceeded.active
Error: User Rate Limit Exceeded.nav-pills > .active > a:focusError: User Rate Limit Exceeded
@TeemuLeisti Не могу заставить это работать на bs 3.0
Error: User Rate Limit Exceeded
1

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

Примечание: - Это сработало для меня с помощью Bootstrap 4

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
35

(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>
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
0

лучаю. Общий способ решить это
1.) щелкните правой кнопкой мыши по таблетке начальной загрузки и выберите «проверить» или «проверить элемент», если firefox
2.) Скопируйте селектор CSS для правила, которое меняет цвет
3.) измените его в своем собственном CSS-файле, так что ...

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

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

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

азать.active класс наa элемент.

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

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

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

Error: User Rate Limit Exceeded
3

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>
&l,t;/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;
}
Error: User Rate Limit Exceeded
0

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

Шаг 2: Определите, какие действия происходят с ним, когда он зависает. Если фон вашей формы белый, вы должны убедиться, что при наведении вкладка не станет белой. Для достижения этого используйте!important пункт, чтобы принудительно включить эту функцию в свойство hover. Мы делаем это, чтобы переопределить поведение Bootstrap по умолчанию.

Шаг 3. Примените класс к тем вкладкам, на которые вы нацеливаетесь.

CSS section:

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

Tab Section :

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

Похожие вопросы