web-dev-qa-db-fra.com

Changer la couleur des pilules de navigation Twitter bootstrap

J'essaie de changer la couleur active (il reste la couleur bleu clair de Twitter après avoir cliqué dessus) pour chaque onglet:

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

(Comment) puis-je faire cela en CSS?

twitter-bootstrapnavnav-pills
57
Elias7

Vous pouvez fournir votre propre classe au conteneur nav-pills avec votre couleur personnalisée pour votre lien actif. Vous pouvez ainsi créer autant de couleurs que vous le souhaitez sans modifier les couleurs par défaut de l'amorce dans les autres sections de votre page. Essaye ça:

Balisage 

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

Et voici le CSS pour votre couleur personnalisée:

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

De même, si vous préférez remplacer la couleur par défaut de l'élément .active dans votre nav-pills, vous pouvez modifier l'original de la manière suivante:

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

La solution la plus votée n'a pas fonctionné pour moi. (Bootstrap 3.0.0) Cependant, cela a:

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

y compris ceci sur les tags page <style></style> sert bien pour la base par page 

et le mélanger sur deux nuances donne un effet brillant comme:

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

Pour Bootstrap 4.0 (en alpha au moment de la frappe), vous devez spécifier la classe .active sur l'élément a.

Pour moi, seuls les éléments suivants ont fonctionné:

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

Le !important était également nécessaire.

7
Felipe Maia

J'utilise ce snippé pour changer la classe active pour toutes les pilules dans le même ul (appliqué au document prêt):

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

Ceci est spécifique à 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;
}
3
Sam Sokeye

Solution Bootstrap 4.0

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

Le code suivant a fonctionné pour moi: -

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

Remarque: - Cela a fonctionné pour moi avec Bootstrap 4

1
Shashishekhar Hasabnis

La solution à ce problème tend à différer légèrement d’un cas à l’autre ... La solution générale consiste à 
1.) Faites un clic droit sur la pilule d’amorçage et sélectionnez inspecter ou inspecter un élément si
2.) Copiez le sélecteur css de la règle qui change la couleur
3.) Modifiez-le dans votre fichier css personnalisé comme suit ...

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

Étape 1: Définissez une classe nommée applycolor qui peut être utilisée pour appliquer la couleur que vous choisissez.

Étape 2: Définissez les actions qui lui arrivent quand il survole. Si l'arrière-plan de votre formulaire est blanc, vous devez vous assurer que l'onglet ne devient pas blanc au survol. Pour ce faire, utilisez la clause !important pour forcer cette fonctionnalité sur la propriété de survol. Nous faisons cela pour remplacer le comportement par défaut de Bootstrap.

Étape 3: Appliquez la classe aux onglets que vous ciblez.

Section 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 des onglets: 

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