Comment changer la couleur du lien (Bootstrap)

enter image description here

<div class="collapse navbar-collapse">
                    <ul class="nav pull-right">
                        <li class="active"><a href="#">О нас</a></li>
                        <li><a href="#">Как это работает</a></li>
                        <li><a href="#">Цены</a></li>
                        <li><a href="#">Контакты</a></li>
                    </ul>

Je suis très nouveau à Bootstrap. Ici j'ai 3 classes pointées. Et j'en ai au moins 3 .fichiers css: styles.css, plat ui.css, bootstrap.CSS. Je ne sais pas comment faire pour modifier ces lien-couleurs.

17
demandé sur jgillich 2014-05-30 12:03:34

3 réponses

ul.nav li a, ul.nav li a:visited {
    color: #anycolor !important;
}

ul.nav li a:hover, ul.nav li a:active {
    color: #anycolor !important;
}

ul.nav li.active a {
    color: #anycolor !important;
}

changez les styles comme vous voulez.

23
répondu Mihail Burduja 2014-05-30 08:13:28

pour un changement direct, vous pouvez utiliser les classes Bootstrap dans le <a> balise (il ne fonctionnera pas dans le <div>):

<h4 class="text-center"><a class="text-warning" href="#">Your text</a></h4>
18
répondu Roubi 2015-06-01 15:43:30

je suis pleinement conscient que le code dans le quesiton original affiche une situation d'être lié à navbar. Mais comme vous plongez également dans d'autres composants, il peut être utile de savoir que les options de classe pour le style de texte peut ne pas fonctionner.

mais vous pouvez toujours créer vos propres classes helper pour maintenir le "Bootstrap flow" dans votre HTML. Voici une idée pour aider les liens de style qui sont dans panneau-titre régions.

le code suivant en lui-même ne sera pas le style une couleur d'avertissement sur votre lien d'ancrage...

<div class="panel panel-default my-panel-styles"> 
...    
  <h4 class="panel-title">
    <a class="accordion-toggle btn-block text-warning" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
      My Panel title that is also a link
    </a>
  </h4>
 ...
 </div>

mais vous pouvez étendre le paquet de style Bootstrap en ajoutant votre propre classe avec des couleurs appropriées comme celle-ci...

.my-panel-styles .text-muted {color:#777;}
.my-panel-styles .text-primary {color:#337ab7;}
.my-panel-styles .text-success {color:#d44950;}
.my-panel-styles .text-info {color:#31708f;}
.my-panel-styles .text-warning {color:#8a6d3b;}
.my-panel-styles .text-danger {color:#a94442;}

...Maintenant, vous pouvez continuer à construire vos liens d'ancrage de panneau avec les couleurs de Bootstrap que vous voulez.

3
répondu klewis 2016-03-16 22:09:24