如何在Bootstrap 4版本中更改链接颜色和悬停颜色？

Question

在我的设计中，我想要更改特定部分的链接和悬停颜色。我已经尝试了很多次，但仍无法做到。我对Bootstrap还不熟悉。如何为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>

- Fahim Foysal Kamal

---

对于将来使用 Bootstrap 4.1+ 的读者，请参考以下链接：https://dev59.com/uVcQ5IYBdhLWcg3wEPoK - Carol Skelly

Answer 1

Bootstrap 4的CSS代码现在使用Sass（SCSS）编译，而不是Less。 Bootstrap 4附带一个grunt构建链。 自定义Bootstrap的“最佳”方法是使用默认构建链。

1. 下载并解压源代码
2. 导航到bootstrap (bootstrap-4-dev)文件夹
3. 在控制台中运行npm install
4. 运行grunt dist重新编译CSS代码

现在您可以编辑scss/bootstrap.scss或scss/_variables.scss来更改颜色。 下面的示例将编辑scss/bootstrap.scss，请确保在scss/bootstrap.scss文件的开头重新声明变量。

.nav-link和nav-link:hover的颜色由选择器的默认颜色设置，您可以按以下方式更改scss/bootstrap.scss中的这些颜色：

$link-color:                 #f00; //red
$link-hover-color:           #0f0; //green

// Core variables and mixins
@import "variables";
@import "mixins";
....

请注意，以上更改会更改所有链接的颜色。要仅更改.nav .nav-link或甚至.card .nav .nav-link的颜色，您将需要使用更高特异性编译CSS代码。不要使用!important。

还请注意，Bootstrap目前处于alpha状态，因此您不应将其用于生产。声明.nav-link颜色的变量尚不存在，但在未来可能存在，请参见：https://github.com/twbs/bootstrap/issues/18630

要更改代码中所有.nav .nav-link的颜色，请在scss/bootstrap.scss文件末尾使用以下SCSS代码：

....
// Utility classes
@import "utilities";
.nav-link {
 color: #f00; //red

  @include hover-focus {
    color: #0f0; //green
  }  
}  

要修改仅在.cards内的.nav-links的颜色，您应该创建具有更高特异性的CSS代码，如下所示：

....
// Utility classes
@import "utilities";
.card .nav-link {
 color: #f00; //red

  @include hover-focus {
    color: #0f0; //green
  }  
}  

当然，您也可以在编译后的 bootstrap.css 文件末尾创建自己的 CSS 代码。根据您的需求使用更高的特定性；

更改所有链接：

a {color: #f00;}
a:hover {color: #0f0;}

HTML：

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap-4-dev/dist/css/bootstrap.css">
<style>
  a {color: #f00;}
  a:hover {color: #0f0;}
</style> 

或者更高的特异性：

.nav-link {color: #f00;}
.nav-link:hover {color: #0f0;}

或者甚至更好：

.card .nav-link {color: #f00;}
.card .nav-link:hover {color: #0f0;}    

- Bass Jobsen

---

终于有人老派风格了 :) - cybernet2u

Answer 2

您可以通过添加自定义CSS文件（例如mystyle.css），并将其放置在head部分中的bootstrap之后，来覆盖bootstrap类：

您可以通过添加自定义CSS文件（例如mystyle.css），并将其放置在head部分中的bootstrap之后，来覆盖bootstrap类：

<!-- 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"/>

在 mystyle.css 文件中：

.navbar-light .navbar-nav .nav-link {
color: whitesmoke;
}
.navbar-light .navbar-nav .nav-link:hover {
color: whitesmoke;
}

- bdaoudi

Answer 3

两种方法（实际上是一种）：

1. 添加自己的样式

实际上，Bootstrap 在几乎所有情况下都允许被覆盖，因此，如果您在自己的 .css 中设置了某些内容，它将覆盖 bootstrap.css 中设置的样式。

因此，在自己的 .css 中添加以下内容：

.navbar ul li a {
color:#fff;}
.navbar ul li a:hover {
color:#000;}

你会发现它的工作效果很棒。

2. 你可以去找到在bootstrap.css中设置的所有内容。

我强烈不建议你这样做，除非真的有必要，因为每个样式都可以被覆盖，并且这将为你的样式创建一个更清晰的结构。

- Andrew Adam

---

你永远不需要使用“去找…”的方法。 - Bass Jobsen

@BassJobsen 是的，我非常同意这是不必要的，这就是为什么我说一切都可以用另一种方式完成，但是除了代码整洁和美观之外，在您的意见中还有没有其他原因不这样做，只是出于好奇？ - Andrew Adam

因为您无法在更改后更新Bootstrap。 - Bass Jobsen

Answer 4

2020年-谷歌带我来到这里，寻找类似的内容。

Bootstrap 4.5

对于那些只想在悬停时更改链接颜色或 <a> 标记的人，只需应用自定义类，例如 hover_black，如下所示：

注意-我的链接是白色的，但在悬停时变成黑色。

//CSS

.text_white          { color: white;  } 
a.hover_black:hover  { color: black !important;  } 

// HTML
<a class="text_white hover_black"> Link </a>

- MarcoZen

Answer 5

最初的回答： 我设计中，我想要在特定部分更改我的链接和悬停颜色。 你正在描述可以在BS4中使用Sass一次解决的三个问题。如果您可以访问自定义项目的.scss文件并编译它，则建议采用以下方法... 对于这种情况，您可以创建一个自定义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*/
}

我假设您已经将十六进制颜色分配给了sass变量，就像这样：

$m-color-red: #da291c;
$m-color-blue: #004c97;
..etc..

如果是这样，请从您的Sass文件中的任何特定位置调用您的mixin。既然这是您第一次，注意以下参数 $ m-color-white 表示上面 $ bgcolorOff 参数的值。因此，请注意放置颜色的位置，以帮助定义自定义变体。"Original Answer"翻译成"最初的回答"。

  .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');
   }

最初的回答：

最后，在创建按钮或锚链接时，您可以将以下内容添加到元素结构中：

<a class="btn btn-sm m-3 m-variant ">my custom button</a>

4个简单步骤。第一次操作后，每次都很容易。采用这种方法，可以完全控制链接和悬停颜色。可以重复使用或创建任意数量的变体。

希望这能帮到你。

"最初的回答"

- klewis

Answer 6

将以下内容添加到您的CSS中：

a.nav-link {color:#FFFFFF;} !important
a.nav-link:hover {color:#F00F00; text-decoration:none;} !important

不要在最开始就包含重要的标签，先检查是否有任何冲突再添加。我个人更喜欢通过搜索和查找相关类和父级div来消除任何冲突或更改我正在使用的类名。

- Joel

---

但是悬停颜色没有改变。 - Fahim Foysal Kamal

我不确定我是否理解了你的问题，所以我只能说 - 如果你输入了我给你的代码，但没有看到效果，那么你需要找出在层次结构中哪个元素通过具有优先权来创建冲突。.card // .card-block // .card-block ul // .card-block ul li // .card-block ul li a // .card-block ul li a.nav-link //检查你的CSS文件，看看是否调用了这些元素。 - Joel

当处理一个大的CSS文件时，如果你很难找到冲突，那么一个好的方法是为目标子元素上面的所有父元素编写测试代码，并在CSS中使用不同的:hover颜色指定每个元素。将它们标记为!important并查看测试时哪种颜色显示出来。然后你就会知道哪个元素有冲突了。 - Joel

但是在我的代码中，悬停效果不起作用。我遵循了你的所有建议。 - Fahim Foysal Kamal

在这种情况下不要使用!important，请参考https://css-tricks.com/when-using-important-is-the-right-choice/。 - Bass Jobsen

Answer 7

虽然我只是个新手，但 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>

- Dr. Jon Paarlberg

---

这是默认设置，但我认为问题更多地涉及将颜色更改为他特别想要的颜色，很可能是为了与他的网站主题相匹配。 - Mannyfatboy

Answer 8

如果您只想将悬停颜色设置为与非悬停状态相同，请使用此变量：

$emphasized-link-hover-darken-percentage: 0;

- kjdion84

Answer 9

这些 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;
}

- Doberon

---

这将改变链接的颜色，但不会在悬停时生效。 .nav-link.active 仅会为当前活动的链接更改颜色。 https://www.w3schools.com/bootstrap4/bootstrap_navs.asp - Mannyfatboy