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

Bootstrap 4的CSS代码是用Sass(SCSS)而不是Less now编译的.Bootstrap 4附带一个grunt构建链.自定义Bootstrap的"最佳"方法是使用默认构建链.

下载并解压缩源代码

导航到bootstrap(bootstrap-4-dev)文件夹

npm install在你的控制台中运行

运行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你必须编译具有更高特异性的 CSS代码.不要使用!important

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

要更改.nav .nav-link代码中所有s 颜色的颜色,请使用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:

或具有更高的特异性:

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

甚至:

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