如何在 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>

原文由 Fahim Foysal Kamal 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 文件的开头重新声明变量。

The color of the .nav-link and nav-link:hover is set by the default colors for the a selectors, you can changes these colors in scss/bootstrap.scss as如下：

 $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
  }
}

要仅修改 .nav-links 中的 .cards --- 的颜色，您应该创建具有更高特异性的 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 发布，翻译遵循 CC BY-SA 3.0 许可协议