twitter-bootstrap 如何更改链接颜色（引导程序）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23949804/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change link color (Bootstrap)
提问by anindis
<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>
I'm very new to Bootstrap. Here I have 3 classes pointed. And I have at least 3 .css files: styles.css, flat-ui.css, bootstrap.css. I don't know how to change these link-colors.
我对 Bootstrap 很陌生。在这里，我指出了 3 个课程。我至少有 3 个 .css 文件：styles.css、flat-ui.css、bootstrap.css。我不知道如何更改这些链接颜色。
回答by Roubi
For a direct change, you can use Bootstrap classes in the <a>tag (it won't work in the <div>):
对于直接更改，您可以在<a>标签中使用 Bootstrap 类（它在 中不起作用<div>）：
<h4 class="text-center"><a class="text-warning" href="#">Your text</a></h4>
回答by Mihail Burduja
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;
}
Change the styles as you wish.
根据需要更改样式。
回答by cetinajero
If you are using Bootstrap 4, you can simple use a color utility class(e.g. text-success, text-danger, etc... ).
如果使用的是引导4，你可以简单的用一个颜色的工具类（如text-success，text-danger等...）。
You can also create your own classes (e.g. text-my-own-color)
您还可以创建自己的类（例如text-my-own-color）
Both options are shown in the example below, run the code snippetto see a live demo.
这两个选项都显示在下面的示例中，运行代码片段以查看实时演示。
.text-my-own-color {
color: #663300 !important; // Define your own color 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>回答by klewis
I'm fully aware that the code in the original quesiton displays a situation of being navbar related. But as you also dive into other compontents, it maybe helpful to know that the class options for text styling may not work.
我完全知道原始问题中的代码显示了与导航栏相关的情况。但是当您还深入研究其他组件时，了解文本样式的类选项可能不起作用可能会有所帮助。
But you can still create your own helper classes to keep the "Bootstrap flow" going in your HTML. Here is one idea to help style links that are in panel-titleregions.
但是您仍然可以创建自己的帮助程序类来保持“引导流程”在您的 HTML 中运行。这是帮助设置面板标题区域中的链接样式的一个想法。
The following code by itself will not style a warning color on your anchor link...
以下代码本身不会在您的锚链接上设置警告颜色的样式...
<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>
But you could extend the Bootstrap styling package by adding your own class with appropriate colors like this...
但是您可以通过添加您自己的具有适当颜色的类来扩展 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;}
...Now you can continue building out your panel anchor links with the Bootstrap colors you want.
...现在您可以继续使用您想要的 Bootstrap 颜色构建面板锚链接。
回答by Matt Falkowski
using bootstrap 4 and SCSS check out this link here for full details
使用引导程序 4 和 SCSS，请在此处查看此链接以获取完整详细信息
https://getbootstrap.com/docs/4.0/getting-started/theming/
https://getbootstrap.com/docs/4.0/getting-started/theming/
in a nutshell...
简而言之...
open up lib/bootstrap/scss/_navbar.scss and find the statements that create these variables
打开 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;
}
}
so now you need to override
所以现在你需要覆盖
$navbar-light-color
$navbar-light-hover-color
$navbar-light-disabled-color
create a new scss file _localVariables.scssand add the following (with your colors)
创建一个新的 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";
and on your other scss pages just add
并在您的其他 scss 页面上添加
@import "_localVariables";
instead of
代替
@import "../lib/bootstrap/scss/functions";
@import "../lib/bootstrap/scss/variables";
@import "../lib/bootstrap/scss/mixins/_breakpoints";
