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

Question

在我的设计中，我想在特定部分更改链接和悬停颜色。我尽力了，但我做不到。我是新手。如何为 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>

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 的颜色由a 选择器的默认颜色设置，您可以在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 的颜色，您必须使用更高的specificity 编译CSS 代码。不要使用!important

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

要更改代码中所有 .nav .nav-links 的颜色，请使用 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;}    

Answer 2

您可以通过添加自定义 css 文件（如 mystyle.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"/>

在 mystyle.css 中：

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

Answer 3

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

1.添加自己的样式

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

因此将其添加到您自己的 .css 中：

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

你会发现它是一种魅力。

2。你可以去找到bootstrap.css中设置的所有东西

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

Answer 4

2020 - Google 把我带到这里是为了类似的事情。

引导 4.5

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

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

//CSS

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

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

Answer 5

在我的设计中，我想在特定部分更改链接和悬停颜色。

您正在描述可以在 BS4 中使用 sass 一次性解决的 3 件事。如果您可以访问自定义项目的 .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 参数的值。因此，请密切注意您放置颜色的位置，以帮助定义您的自定义变体。

  .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 个简单的步骤。在你第一次这样做之后，每隔一次就很容易了。通过采用这种方法，您可以完全控制链接和悬停颜色。重复使用和/或创建任意数量的变体。

希望对你有帮助

Answer 6

将此添加到您的 CSS：

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

虽然一开始不要包含重要的标签，在添加之前看看是否有任何冲突。我个人更喜欢只搜索和查找相关类和父 div 以清除任何冲突或更改类我正在使用的名称。

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>

Answer 8

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

Answer 9

如果你只是想让悬停颜色和非悬停状态一样，使用这个变量：

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