web-dev-qa-db-fra.com

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 pointues. Et j'ai au moins 3 fichiers .css: styles.css, flat-ui.css, bootstrap.css. Je ne sais pas comment changer ces couleurs de lien.

twitter-bootstrapcolorshyperlinknavbar
21
anindis
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 le souhaitez.

25
Mihail Burduja

Pour un changement direct, vous pouvez utiliser Bootstrap classes dans la balise <a> (Cela ne fonctionnera pas dans la <div>):

<h4 class="text-center"><a class="text-warning" href="#">Your text</a></h4>
25
Roubi

Je suis parfaitement conscient du fait que le code de la quesiton d'origine affiche une situation de relation avec navbar. Mais comme vous plongez également dans d’autres composants, il peut être utile de savoir que les options de classe pour le style du texte risquent de ne pas fonctionner.

Mais vous pouvez toujours créer vos propres classes d’aide pour conserver le "flux Bootstrap" dans votre code HTML. Voici une idée pour aider les liens de style qui sont dans les régions panneau-titre.

Le code suivant en lui-même ne créera pas de 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 package 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 Bootstrap de votre choix).

3
klewis

Si vous utilisez Bootstrap 4 , vous pouvez simplement utiliser un classe d’utilitaire de couleur (par exemple, text-success, text-danger, etc... ).

Vous pouvez également créer vos propres classes (par exemple, text-my-own-color)

Les deux options sont présentées dans l'exemple ci-dessous. Exécutez le extrait de code pour voir une démonstration en direct.

.text-my-own-color {
  color: #663300 !important; // Define your own color in your CSS
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar-collapse">
  <ul class="nav pull-right">

    <!-- Bootstrap's color utility class -->
    <li class="active"><a class="text-success" href="#">О нас</a></li>

    <!-- Bootstrap's color utility class -->
    <li><a class="text-danger" href="#">Как это работает</a></li>

    <!-- Bootstrap's color utility class -->
    <li><a class="text-warning" href="#">Цены</a></li>

    <!-- Custom color utility class -->
    <li><a class="text-my-own-color" href="#">Контакты</a></li>

  </ul>
</div>
3
cetinajero