CSS 如何在 Bootstrap 版本 4 中更改链接颜色和悬停颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34573324/
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 can I change link color and hover color in Bootstrap version 4?
提问by Fahim Foysal Kamal
In my design, I want to change my link and hover color in a specific part. I try my best but I can't do that. I am new in bootstrap. How can I change it for Bootstrap 4? A simple code is here-
在我的设计中，我想更改特定部分的链接和悬停颜色。我尽力了，但我做不到。我是引导程序的新手。如何为Bootstrap 4更改它？一个简单的代码在这里 -
<div class="card" style="max-width: 320px;">
<div class="card-header text-center"><h3>Navigation</h3></div>
<div class="card-block">
<ul class="nav navbar-nav" style="font-size: 1.50em;">
<li><a href="#" class="nav-link">Home</a></li>
<li><a href="#" class="nav-link">Documents</a></li>
<li><a href="#" class="nav-link">Videos</a></li>
<li><a href="#" class="nav-link">Gallery</a></li>
<li><a href="#" class="nav-link">Download</a></li>
</ul>
</div>
</div>
回答by Bass Jobsen
The CSS code of Bootstrap 4 is compiled with Sass (SCSS) instead of Less now. Bootstrap 4 ships with a grunt build chain. The "best" way to customize Bootstrap is using the default build chain.
Bootstrap 4 的 CSS 代码现在使用 Sass (SCSS) 而不是 Less 编译。Bootstrap 4 附带了一个 grunt 构建链。自定义 Bootstrap 的“最佳”方法是使用默认构建链。
- download and unzip the source code
- navigate to the
bootstrap(bootstrap-4-dev) folder - run
npm installin your console - run
grunt distto recompile your CSS code
- 下载并解压源代码
- 导航到
bootstrap(bootstrap-4-dev) 文件夹 npm install在你的控制台中运行- 运行
grunt dist以重新编译您的 CSS 代码
To change the colors to can edit both scss/bootstrap.scssor scss/_variables.scssnow.
The examples below edit scss/bootstrap.scss, make sure you redeclare the variables at the begin of the scss/bootstrap.scssfile.
要将颜色更改为可以同时编辑scss/bootstrap.scss或scss/_variables.scss现在编辑。下面的示例编辑scss/bootstrap.scss，请确保在scss/bootstrap.scss文件开头重新声明变量。
The color of the .nav-linkand nav-link:hoveris set by the default colors for the aselectors, you can changes these colors in scss/bootstrap.scssas follows:
的颜色.nav-link和nav-link:hover由默认颜色设定的a选择，你可以改变这些颜色scss/bootstrap.scss，如下所示：
$link-color: #f00; //red
$link-hover-color: #0f0; //green
// Core variables and mixins
@import "variables";
@import "mixins";
....
Notice that the above change the colors of all your links. To change the colors of only .nav .nav-linkor even .card .nav .nav-linkyou will have to compile CSS code with a higher specificity. Do not use !important
请注意，以上更改了所有链接的颜色。要更改 only.nav .nav-link或 even 的颜色，.card .nav .nav-link您必须编译具有更高特异性的CSS 代码。不要使用!important
Also notice that Bootstrap currently is in a alpha state, so you should not use it for production. Variables to declare the colors of the .nav-linkdo not exist yet, but possible do in future, see also: https://github.com/twbs/bootstrap/issues/18630
另请注意，Bootstrap 当前处于 alpha 状态，因此您不应将其用于生产。声明颜色的变量.nav-link尚不存在，但将来可能会这样做，另请参阅：https: //github.com/twbs/bootstrap/issues/18630
To change the color of the colors of all .nav .nav-links in your code use the follow SCSS code at the end of your scss/bootstrap.scssfile:
要更改.nav .nav-link代码中所有s的颜色，请使用scss/bootstrap.scss文件末尾的以下 SCSS 代码：
....
// Utility classes
@import "utilities";
.nav-link {
color: #f00; //red
@include hover-focus {
color: #0f0; //green
}
}
To modify the colors of only the .nav-linksinside the .cardsyou should create CSS code with a higher specificity as follows:
要仅修改.nav-links内部的颜色，.cards您应该创建具有更高特异性的 CSS 代码，如下所示：
....
// Utility classes
@import "utilities";
.card .nav-link {
color: #f00; //red
@include hover-focus {
color: #0f0; //green
}
}
Of course you can also create your own CSS code at the end of the compiled bootstrap.cssfile. Depending of your needs use higher specificity;
当然，您也可以在编译bootstrap.css文件的末尾创建自己的 CSS 代码。根据您的需要使用更高的特异性；
Change all links:
更改所有链接：
a {color: #f00;}
a:hover {color: #0f0;}
HTML:
HTML：
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap-4-dev/dist/css/bootstrap.css">
<style>
a {color: #f00;}
a:hover {color: #0f0;}
</style>
Or with higher specificity:
或者具有更高的特异性：
.nav-link {color: #f00;}
.nav-link:hover {color: #0f0;}
Or even:
甚至：
.card .nav-link {color: #f00;}
.card .nav-link:hover {color: #0f0;}
回答by bdaoudi
You can override the bootstrap classes by adding a custom css file like mystyle.css and place it just after bootstrap in the head section:
您可以通过添加像 mystyle.css 这样的自定义 css 文件来覆盖引导程序类，并将其放在引导程序之后的 head 部分：
<!-- Bootstrap CSS -->
<link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="path/mystyle.css" type="text/css"/>
and inside mystyle.css:
在 mystyle.css 中：
.navbar-light .navbar-nav .nav-link {
color: whitesmoke;
}
.navbar-light .navbar-nav .nav-link:hover {
color: whitesmoke;
}
回答by Andrew Adam
Two ways (which is actually one):
两种方式（实际上是一种）：
1. Adding your own styles
1. 添加自己的样式
Actually bootstrap allows being overwritten in almost every case, therefore if you set something in your own .css it will overrule the style set in bootstrap.css
实际上，bootstrap 几乎在所有情况下都允许被覆盖，因此如果您在自己的 .css 中设置某些内容，它将覆盖在 bootstrap.css 中设置的样式
So adding this to your own .css:
因此，将其添加到您自己的 .css 中：
.navbar ul li a {
color:#fff;}
.navbar ul li a:hover {
color:#000;}
You will see it works as a charm.
你会看到它是一种魅力。
2. You can go and find everything set in bootstrap.css
2.你可以去bootstrap.css中找到所有设置
I highly discourage you doing so unless it is really necessary, since every styling can be overwritten and it will create a cleaner structure for your styling.
我强烈不鼓励你这样做，除非真的有必要，因为每个样式都可以被覆盖，它会为你的样式创建一个更清晰的结构。
回答by klewis
In my design, I want to change my link and hover color in a specific part.
在我的设计中，我想更改特定部分的链接和悬停颜色。
You are describing 3 things that can be tackled all at once within BS4 with sass. If you have access to the .scss file of your custom project and able to compile it, then I would recommend the following approach...
您正在描述可以在 BS4 中使用 sass 一次性解决的 3 件事。如果您有权访问自定义项目的 .scss 文件并能够对其进行编译，那么我会推荐以下方法...
For this particular case, you can create a custom mixin like so:
对于这种特殊情况，您可以像这样创建自定义 mixin：
@mixin my-variant($bgcolorOff, $borcolorOff, $bgcolorOn, $borcolorOn, $bgcolorAct, $borcolorAct, $txtcolorOff, $txtcolorOn, $txtsize, $txtalign){
@include button-variant($bgcolorOff, $borcolorOff, $bgcolorOn, $borcolorOn, $bgcolorAct, $borcolorAct);
color:#333; /*set a fallback color*/
font-weight:normal; /*customize other things about your like so like*/
text-transform:none; /*customize other things about your like so like*/
text-decoration:none; /*customize other things about your like so like*/
text-align:$txtalign; /*reference parameter values like so*/
}
I am assuming your have hex colors assigned to sass variables already like this:
我假设您已经将十六进制颜色分配给 sass 变量，如下所示：
$m-color-red: #da291c;
$m-color-blue: #004c97;
..etc..
If so, call your mixin from any specific location in your sass file. Sense this is your first time, notice how the following parameter $m-color-whiterepresents the value for $bgcolorOffparameter above. So pay close attention to where you put your colors to help define your custom variant.
如果是这样，请从 sass 文件中的任何特定位置调用 mixin。感觉这是您的第一次，请注意以下参数如何$m-color-white表示$bgcolorOff上述参数的值。因此，请密切注意放置颜色的位置，以帮助定义自定义变体。
.m-variant {
@include my-variant($m-color-white, $m-color-grey-light, $m-color-off-white, $m-color-grey-light, $m-color-blue, $m-color-grey-light, $m-color-grey-light, $m-color-grey-light, 1.200em, 'left');
}
Finally, when you create your buttons, or anchor links, you can add the following to your element structures:
最后，当您创建按钮或锚链接时，您可以将以下内容添加到元素结构中：
<a class="btn btn-sm m-3 m-variant ">my custom button</a>
4 easy steps. After you do this the first time, every other time is easy. By taking this approach, you take full control of your link and hover colors. Re-use and/or create as many variants as you like.
4个简单的步骤。在你第一次这样做之后，每隔一次就很容易了。通过采用这种方法，您可以完全控制链接和悬停颜色。根据需要重复使用和/或创建尽可能多的变体。
Hope this helps
希望这可以帮助
回答by Doberon
these CSS work for me
这些 CSS 对我有用
.nav-pills .nav-link {
color: #fff;
cursor: default;
background-color: #868686;
}
.nav-pills .nav-link.active {
color: #000;
cursor: default;
background-color: #afafaf;
font-weight: bold;
}
回答by MarcoZen
2020 - Google brought me here for something similar.
2020 年 - 谷歌为了类似的事情把我带到这里。
Bootstrap 4.5
引导程序 4.5
For those who would like to change only the link color or the < a > tag color upon hover, just apply a custom class, say hover_black as follows; Note - my links are white but black when hovered upon
对于那些只想在悬停时更改链接颜色或 < a > 标签颜色的人，只需应用自定义类，如下所示 hover_black；注意 - 我的链接在悬停时是白色但黑色
//CSS
.text_white { color: white; }
a.hover_black:hover { color: black !important; }
// HTML
<a class="text_white hover_black"> Link </a>
回答by Joel
Add this to your CSS:
将此添加到您的 CSS：
a.nav-link {color:#FFFFFF;} !important
a.nav-link:hover {color:#F00F00; text-decoration:none;} !important
Don't include the important tags at first though, see if there are any conflicts before adding them in. I personally prefer to just do a search & find of the relevant classes and parent divs to clear any conflicts or change the class name I'm using.
不过，一开始不要包含重要的标签，在添加它们之前查看是否有任何冲突。我个人更喜欢只搜索和查找相关类和父 div 以清除任何冲突或更改类名 I'米使用。
回答by Dr. Jon Paarlberg
I'm just a noob, but Bootstrap 4 has a class called "nav-link" that you use in the link element tag. I was using a dark, primary colored navbar and the links were the same color. This solved it for me.
我只是个菜鸟，但 Bootstrap 4 有一个名为“nav-link”的类，您可以在链接元素标签中使用它。我使用的是深色的原色导航栏，并且链接的颜色相同。这为我解决了它。
<ul class="navbar-nav">
<li class="nav-item">
<a href="/Results/Create" class="nav-link">Create New Request</a>
</li>
</ul>
