![中更改]( "中更改")
本文介绍了如何在 Bootstrap 版本 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 的最佳"方法是使用默认构建链.
- 下载并解压源代码
- 导航到
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;//红色的$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.
- download and unzip the source code
- navigate to the
bootstrap (bootstrap-4-dev) folder - run
npm install in your console - 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 中更改链接颜色和悬停颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！