如何更改链接颜色(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>

我是Bootstrap的新手.这里我指出了3个班级.我至少有3个.css文件:styles.css,flat-ui.css,bootstrap.css.我不知道如何更改这些链接颜色.

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

根据需要更改样式.

Answer 2

对于直接更改,您可以在<a>标记中使用Bootstrap类(它不适用于<div>):

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

Answer 3

如果使用的是引导4，你可以简单的用一个颜色的工具类（如text-success，text-danger等...）。

您还可以创建自己的类（例如text-my-own-color）

这两个选项都显示在下面的示例中，运行代码片段以查看实时演示。

.text-my-own-color {
  color: #663300 !important; // Define your own color in your CSS
}
.text-my-own-color:hover, .text-my-own-color:active {
  color: #664D33 !important; // Define your own color's darkening/lightening 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>