twitter bootstrap - page - Cambia colore del bootstrap di Twitter Nav-Pills




page navigation bootstrap (4)

Sto provando a cambiare il colore attivo (dopo che è stato cliccato rimane di colore blu chiaro di Twitter) per ogni scheda:

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

(Come) posso farlo in CSS?


Io uso questo snipped per cambiare la classe attiva per tutte le pillole nello stesso ul (applicato al documento pronto):

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

La soluzione più votata non ha funzionato per me. (Bootstrap 3.0.0) Tuttavia, questo ha fatto:

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
    color:black;
    background-color:#fcd900;
    }

includendo questo nella pagina i <style></style> servono bene per ogni pagina

e mescolandolo su due tonalità dà un effetto brillante come:

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

Per Bootstrap 4.0 (in alfa al momento della digitazione) è necessario specificare la classe .active sull'elemento a.

Per me solo il seguente ha funzionato:

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

Anche l' !important era necessario.


Puoi fornire la tua classe al contenitore nav-pills con il tuo colore personalizzato per il tuo link attivo, in questo modo puoi creare tutti i colori che desideri senza modificare i colori predefiniti di bootstrap in altre sezioni della tua pagina. Prova questo:

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>

Ed ecco il CSS per il tuo colore personalizzato:

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

Inoltre, se preferisci sostituire il colore predefinito per l'oggetto .active nelle tue nav-pills , puoi modificare l'originale in questo modo:

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




twitter-bootstrap