twitter-bootstrap - colores - button bootstrap

Cómo cambiar el color del enlace(Bootstrap)

Question

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

Soy muy nuevo en Bootstrap. Aquí tengo 3 clases apuntadas. Y tengo al menos 3 archivos .css: styles.css, flat-ui.css, bootstrap.css. No sé cómo cambiar estos colores de enlace.

Answer 1

Para un cambio directo, puedes usar las clases de Bootstrap en la etiqueta <a> (no funcionará en el <div> ):

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

Answer 2

Si está utilizando Bootstrap 4 , puede usar una clase de utilidad de color (por ejemplo, text-success , text-danger , etc.).

También puede crear sus propias clases (por ejemplo, text-my-own-color )

Ambas opciones se muestran en el siguiente ejemplo.

.text-my-own-color {
  color: #663300 !important;
}

<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">
    <li class="active"><a class="text-success" href="#">О нас</a></li>
    <li><a class="text-danger" href="#">Как это работает</a></li>
    <li><a class="text-warning" href="#">Цены</a></li>
    <li><a class="text-my-own-color" href="#">Контакты</a></li>
  </ul>
</div>

Answer 3

Soy plenamente consciente de que el código en la pregunta original muestra una situación relacionada con la barra de navegación. Pero como también te sumerges en otros componentes, puede ser útil saber que las opciones de clase para el estilo de texto pueden no funcionar.

Pero aún puede crear sus propias clases de ayuda para mantener el "flujo de inicio" en su HTML. Aquí hay una idea para ayudar a los enlaces de estilo que están en las regiones de título de panel .

El siguiente código por sí solo no marcará un color de advertencia en su enlace de anclaje ...

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

Pero podría extender el paquete de estilo Bootstrap agregando su propia clase con colores apropiados como este ...

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

... Ahora puede continuar construyendo sus enlaces de anclaje de panel con los colores de Bootstrap que desee.

Answer 4

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

Cambia los estilos como quieras.