web-dev-qa-db-ja.com

Twitter bootstrap Nav-Pillsの色の変更

各タブのアクティブな色を変更しようとしています（クリックした後は、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-bootstrapnavnav-pills
59
Elias7

アクティブリンクのカスタムカラーを使用して、独自のクラスをnav-pillsコンテナに提供できます。これにより、ページの他のセクションのbootstrapデフォルトカラーを変更せずに、好きな数のカラーを作成できます。 。これを試して：

マークアップ

<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;
}
88
Andres Ilich

最も投票されたソリューションは私にとってはうまくいきませんでした。（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>タグは、ページごとに適切に機能します

そして2つの色合いでそれを混ぜると、次のような素晴らしい効果が得られます：

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

Bootstrap 4.0（入力時のアルファ）では、a要素で.activeクラスを指定する必要があります。

私にとっては、以下だけが働いた：

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

!importantも必要でした。

7
Felipe Maia

これは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;
}
5
Sam Sokeye

私はこれを使用して、同じul内のすべてのピルのアクティブクラスを変更します（ドキュメントの準備時に適用されます）。

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

ブートストラップ4.0ソリューション

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

次のコードは私のために働いた：-

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

注：-これはBootstrap 4を使用して機能しました

1
Shashishekhar Hasabnis

この問題の解決策は、ケースごとにわずかに異なる傾向があります。それを解決する一般的な方法は
1。）bootstrap丸薬を右クリックし、Firefoxの場合は要素の検査または検査を選択
2。）色を変更するルールのCSSセレクターをコピーします
3。）カスタムcssファイルで次のように変更します...

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

ステップ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>
0
Ganesh Kamath - 'Code Frenzy'