如何更改链接颜色（引导程序）

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

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

但您仍然可以创建自己的帮助类来保持 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;}

...现在您可以继续使用所需的引导颜色构建面板锚链接。

Answer 4

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

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

两个选项都显示在下面的示例中，运行 code sn-p 以查看现场演示。

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

Answer 5

使用引导程序 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 6

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

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

Answer 7

现在在 Bootstrap 5 中，您有彩色链接。 See here.

<a href="#" class="link-primary">Primary link</a>
<a href="#" class="link-secondary">Secondary link</a>
<a href="#" class="link-success">Success link</a>
<a href="#" class="link-danger">Danger link</a>
<a href="#" class="link-warning">Warning link</a>
<a href="#" class="link-info">Info link</a>
<a href="#" class="link-light">Light link</a>
<a href="#" class="link-dark">Dark link</a>