如何在 Bootstrap 版本 4 中更改链接颜色和悬停颜色? [英] How can I change link color and hover color in Bootstrap version 4?

问题描述

在我的设计中，我想更改特定部分的链接和悬停颜色.我尽力了，但我做不到.我是引导程序的新手.我如何为 Bootstrap 4 更改它?一个简单的代码在这里-

<div class="card-header text-center"><h3>导航</h3></div><div class="card-block"><ul class="nav navbar-nav" style="font-size: 1.50em;"><li><a href="#" class="nav-link">首页</a></li><li><a href="#" class="nav-link">文档</a></li><li><a href="#" class="nav-link">视频</a></li><li><a href="#" class="nav-link">图库</a></li><li><a href="#" class="nav-link">下载</a></li>

解决方案

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;//红色的$link-hover-color: #0f0;//绿色//核心变量和mixin@import "变量";@import "mixins";....

请注意，以上更改了所有链接的颜色.要仅更改 .nav .nav-link 甚至 .card .nav .nav-link 的颜色，您必须编译具有更高 特异性.不要使用 !important

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

要更改代码中所有 .nav .nav-link 的颜色，请使用 scss/bootstrap.scss 文件:

<代码>....//实用类@import "实用程序";.导航链接{颜色:#f00；//红色的@include 悬停焦点 {颜色:#0f0；//绿色}}

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

<代码>....//实用类@import "实用程序";.card .nav-link {颜色:#f00；//红色的@include 悬停焦点 {颜色:#0f0；//绿色}}

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

更改所有链接:

一个{颜色:#f00;}a:悬停{颜色:#0f0;}

HTML:

<link rel="stylesheet" href="bootstrap-4-dev/dist/css/bootstrap.css"><风格>{颜色:#f00;}a:悬停{颜色:#0f0;}</风格>

或者具有更高的特异性:

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

甚至:

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

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-

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

解决方案

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.

1. download and unzip the source code
2. navigate to the bootstrap (bootstrap-4-dev) folder
3. run npm install in your console
4. run grunt dist to recompile your CSS code

To change the colors to can edit both scss/bootstrap.scss or scss/_variables.scss now. The examples below edit scss/bootstrap.scss, make sure you redeclare the variables at the begin of the scss/bootstrap.scss file.

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 follows:

$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-link or even .card .nav .nav-link you will have to compile CSS code with a higher specificity. Do not use !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-link do not exist yet, but possible do in future, see also: 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.scss file:

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

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

To modify the colors of only the .nav-links inside the .cards you should create CSS code with a higher specificity as follows:

....
// 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.css file. Depending of your needs use higher specificity;

Change all links:

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> 

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

这篇关于如何在 Bootstrap 版本 4 中更改链接颜色和悬停颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！