La modification de la couleur de Twitter bootstrap Nav-Pills

Je suis en train de changer de couleur (après son cliqué il reste twitter de la lumière de couleur bleue) 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 le faire en CSS?

Manipuler la couleur comment? tu veux dire changer le bleu à quelque chose d'autre?
Salut Andres, oui, changer la couleur de quelque chose d'autre...

InformationsquelleAutor Elias7 | 2012-05-12

88

Vous pouvez fournir votre propre classe pour la nav-pills récipient avec votre couleur personnalisée pour votre lien actif, de cette façon, vous pouvez créer autant de couleurs que vous le souhaitez sans modifier le fichier de bootstrap couleurs par défaut dans d'autres sections de votre page. Essayez ceci:

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 code CSS de votre couleur personnalisée:
```
.red .active a,
.red .active a:hover {
    background-color: red;
}
```
Aussi, si vous préférez remplacer la couleur par défaut pour le .active élément dans votre nav-pills vous pouvez modifier l'original de la sorte:
```
.nav-pills > .active > a, .nav-pills > .active > a:hover {
    background-color: red;
}
```
- merci beaucoup! cela m'a aidé aussi
- Vous devez aussi ajouter le .nav-pills > .active > a:focus à cette liste dans le fichier CSS, assurez-vous que la couleur reste la même, même lorsque vous cliquez sur le navpill.
- Ne pouvez pas obtenir que cela fonctionne sur bs 3.0
- En 3.X vous avez pour être plus précis, pour le dernier exemple: .nav-pills > li.active > a, .nav-pills > li.active > a:hover - bootstrap CSS spécifie li.active maintenant, non seulement .active
- Cela ne fonctionne pas pour moi directement, j'ai dû ajouter !important pour la couleur d'arrière-plan.
- Ce qui a fonctionné pour moi aussi.
InformationsquelleAutor Andres Ilich

Le plus de vote est la solution n'a pas fonctionné pour moi.(Bootstrap 3.0.0) Cependant, ce n':

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

y compris sur la page <style></style> tags sert à la base par page bien

et de la mélanger deux teintes, 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>

merci de cette solution a fonctionné pour moi aussi
Merci cela a fonctionné pour moi aussi...doit être marqué comme réponse correcte!

InformationsquelleAutor Nezam

8

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

Pour moi seule la suivante travaillé:
```
.nav-pills > li > a.active {
    background-color: #ff0000!important;
}
```
La !important a également été nécessaire.
- Parfait, merci
InformationsquelleAutor Felipe Maia

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

Salut @sam-sokeye, je pense que la réponse sommet, peut-être déjà travailler pour Bootstrap 4.

InformationsquelleAutor Sam Sokeye

Bootstrap 4.0 Solution

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

InformationsquelleAutor Tomasz

- Je utiliser ce ciselée pour changer de classe pour toutes les pilules dans la même ul (appliquée au document de prêt):

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

InformationsquelleAutor Michael Simons

1

Le code suivant fonctionné pour moi:-
```
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: rgba(0,123,255,.5);
}
```
Remarque:- Ce qui a fonctionné pour moi en utilisant Bootstrap 4
- Cela a fonctionné pour moi aussi.
- vous pouvez upvote la réponse, puis. Merci
InformationsquelleAutor Shashishekhar Hasabnis

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

Étape 2: Définir les actions qui arrive à lui, lorsqu'il se trouve. Si votre fond est blanc, alors vous devez assurez-vous que passez la souris sur l'onglet ne tourne pas blanc. Pour réaliser cela, utilisez la !important clause de force de cette fonctionnalité sur le vol stationnaire de la propriété. Nous faisons cela pour remplacer Bootstrap comportement par défaut.

Étape 3: Appliquer la classe pour les Onglets qui vous cibler.

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>

La Section Onglet :

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

InformationsquelleAutor Ganesh Kamath - 'Code Frenzy'

0

La Solution à ce problème, tend à différer légèrement d'un cas à l'autre.
La façon de le résoudre est de

1.) droit-cliquez sur le fichier d'amorce de la pilule et sélectionnez inspecter ou d'inspecter l'élément si firefox

2.) copiez le sélecteur css pour la règle qui modifie la couleur

3.) modifier votre fichier css spécifique comme si...
```
.TheCssSelectorYouJustCopied{
    background-color: #ff0000!important;//or any other color
}
```
InformationsquelleAutor Jerome Blacq

Vous devez vous connecter pour publier un commentaire.