如何在Bootstrap版本4中更改鏈接顏色和懸停顏色？

Question

在我的設計中，我想更改我的鏈接並在特定部分懸停顏色。我盡我所能，但我做不到。我是bootstrap的新手。我如何更改它爲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> 

Answer 1

兩種方式（這實際上是一個）：

1.添加你自己的風格

實際上引導允許自己在幾乎所有情況下被覆蓋，因此，如果你設置自己的.css它將推翻在bootstrap.css中設置的樣式

因此，將此添加到您自己的.css中：

.navbar ul li a { 
color:#fff;} 
.navbar ul li a:hover { 
color:#000;} 

你會看到它的魅力。

2.你可以去尋找一切bootstrap.css設置

我非常不鼓勵你這樣做，除非確有必要的，因爲每一個造型可以被覆蓋，因爲這將創造一個更清潔的結構造型。

Answer 2

添加到您的CSS：

a.nav-link {color:#FFFFFF;} !important 
a.nav-link:hover {color:#F00F00; text-decoration:none;} !important 

不包括在第一重要的標籤，雖然，看看是否在增加他們之前有任何衝突，我個人更喜歡只是做一個搜索&發現的。相關的類和父級divs來清除任何衝突或更改我正在使用的類名稱。

Answer 3

Bootstrap 4的CSS代碼是使用Sass（SCSS）而不是Less來編譯的。 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文件的開頭重新聲明變量。

的.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的顏色，您將不得不使用更高的specificity來編譯CSS代碼。請勿使用!important

另請注意，Bootstrap目前處於Alpha狀態，因此您不應將其用於生產。變量聲明.nav-link的顏色還不存在，但有可能在將來做什麼，也看到：https://github.com/twbs/bootstrap/issues/18630

改變所有.nav .nav-link S的顏色的顏色在代碼中使用的後續SCSS代碼在年底您scss/bootstrap.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;}