Как изменить цвет ссылки (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>

Я очень новичок в Bootstrap. Здесь у меня есть 3 класса. И у меня есть как минимум 3 файла .css: styles.css, flat-ui.css, bootstrap.css. Я не знаю, как изменить эти цвета ссылок.

Ответы

Ответ 1

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

Измените стили, как пожелаете.

Ответ 2

Для прямого изменения вы можете использовать классы Bootstrap в теге <a> (он не будет работать в <div>):

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

Ответ 3

Я полностью понимаю, что код в исходном quesiton отображает ситуацию с привязкой к navbar. Но поскольку вы также погружаетесь в другие компоненты, возможно, полезно знать, что варианты класса для стилизации текста могут не работать.

Но вы все равно можете создать свои собственные вспомогательные классы, чтобы сохранить поток "Bootstrap" в вашем HTML. Вот одна идея, чтобы помочь связать стили ссылок, которые находятся в регионах panel-title.

Следующий код сам по себе не будет создавать цвет предупреждения на вашей якорной ссылке...

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

Но вы можете расширить пакет стилей Bootstrap, добавив свой собственный класс с соответствующими цветами, такими как...

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

... Теперь вы можете продолжать строить свои привязки к панели с помощью цветов Bootstrap, которые вы хотите.

Ответ 4

Если вы используете Bootstrap 4, вы можете просто использовать класс утилит цвета (например, text-success, text-danger и т.д.).

Вы также можете создавать свои собственные классы (например, text-my-own-color)

Обе опции показаны в примере ниже, запустите фрагмент кода, чтобы увидеть живую демонстрацию.

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

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

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

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