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

问题描述

在我的设计中，我想更改我的链接并在特定部分悬停颜色。我尽我所能，但我做不到。我是bootstrap的新手。我如何更改 Bootstrap 4 ？一个简单的代码在这里 -

 < div class =cardstyle =max-width：320px;> 
< div class =card-header text-center>< h3>导航< / h3>< / div> 
< div class =card-block> 
< ul class =nav navbar-navstyle =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> 
< / ul> 
< / div> 
< / div> 
  

解决方案

Bootstrap 4的CSS代码是用Sass SCSS）而不是现在更少。
Bootstrap 4附带一个咕噜声构建链。
自定义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 file。

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

  $ link-color：＃f00; // red 
 $ link-hover-color：＃0f0; // green 
 
 //核心变量和mixins 
 @importvariables; 
 @importmixins; 
 .... 
  

请注意，上述内容会改变您所有链接的颜色。要改变只有 .nav .nav-link 甚至 .card .nav .nav-link 的颜色，你会必须使用更高的特异性来编译CSS代码。不要使用重要的

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

在你的代码中改变所有 .nav .nav-link s的颜色颜色，在你的 scss / bootstrap结尾使用后面的SCSS代码.scss file：

  .... 
 //工具类
 @importutilities; 
 .nav-link {
 color：＃f00; // red 
 
 @include hover-focus {
 color：＃0f0; //绿色
} 
} 
  

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

  .... 
 //工具类
 @importutilities; 
 .card .nav-link {
 color：＃f00; // red 
 
 @include hover-focus {
 color：＃0f0; //绿色
} 
} 
  

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

更改所有链接：

  a {color：＃f00;} 
a：hover {color：＃0f0;} 
  

HTML：

 <！ -  Bootstrap CSS  - > 
< link rel =stylesheethref =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;} 
  

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