Question

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。我不知道如何更改这些链接颜色。

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

我完全清楚原始问题中的代码显示与导航栏相关的情况。但是当你也深入研究其他组件时，知道文本样式的类选项可能不起作用可能会有所帮助。

但是你仍然可以创建自己的帮助程序类来保持HTML中的“Bootstrap流程”。以下是帮助设置 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颜色构建面板锚点链接。

Answer 4

使用bootstrap 4和SCSS 在此处查看此链接以获取全部详细信息

https://getbootstrap.com/docs/4.0/getting-started/theming/

简而言之...

打开lib / bootstrap / scss / _navbar.scss并找到创建这些变量的语句

  .navbar-nav {
    .nav-link {
      color: $navbar-light-color;

      @include hover-focus() {
        color: $navbar-light-hover-color;
      }

      &.disabled {
        color: $navbar-light-disabled-color;
      }
    }

所以现在您需要覆盖

$navbar-light-color
$navbar-light-hover-color
$navbar-light-disabled-color

创建一个新的scss文件 _localVariables.scss 并添加以下内容（带有您的颜色）

$navbar-light-color : #520b71
$navbar-light-hover-color: #F3EFE6;
$navbar-light-disabled-color: #F3EFE6;

@import "../lib/bootstrap/scss/functions";
@import "../lib/bootstrap/scss/variables";
@import "../lib/bootstrap/scss/mixins/_breakpoints";

在您的其他scss页面上，只需添加

@import "_localVariables";

代替

@import "../lib/bootstrap/scss/functions";
@import "../lib/bootstrap/scss/variables";
@import "../lib/bootstrap/scss/mixins/_breakpoints";

Answer 5

如果您使用的是 Bootstrap 4 ，则可以简单地使用color utiliy class（例如text-success，text-danger等）。

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

这两个选项都显示在下面的示例中。

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

您可以使用.text-reset类将颜色从默认的蓝色重置为所需的任何颜色。希望这会有所帮助。

来源：https://getbootstrap.com/docs/4.5/utilities/text/#reset-color

如何更改链接颜色（Bootstrap）

6 个答案: