16

在我的设计中，我想在特定部分更改链接和悬停颜色。我尽力了，但我做不到。我是新手。如何为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>
4

9 回答 9

37

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

要更改代码中所有 s 的颜色，请在文件.nav .nav-link末尾使用以下 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;}
于 2016-01-03T10:11:52.977 回答
12

您可以通过添加自定义 css 文件（如 mystyle.css）来覆盖引导程序类，并将其放在引导程序之后的 head 部分：

<!-- Bootstrap CSS -->
<link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap"  rel="stylesheet">     
<link rel="stylesheet"  href="path/mystyle.css" type="text/css"/>

在 mystyle.css 中：

.navbar-light .navbar-nav .nav-link {
color: whitesmoke;
}
.navbar-light .navbar-nav .nav-link:hover {
color: whitesmoke;
}
于 2019-06-14T09:19:57.157 回答
5

两种方式（实际上是一种）：

1.添加自己的样式

实际上，bootstrap 几乎在所有情况下都允许被覆盖，因此如果您在自己的 .css 中设置某些内容，它将覆盖 bootstrap.css 中设置的样式

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

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

你会看到它是一种魅力。

2.你可以去找到bootstrap.css中设置的所有东西

除非真的有必要，否则我非常不鼓励你这样做，因为每个样式都可以被覆盖，它会为你的样式创建一个更干净的结构。

于 2016-01-03T04:37:19.483 回答
3

2020 - 谷歌把我带到这里是为了类似的事情。

引导程序 4.5

对于那些只想在悬停时更改链接颜色或 < a > 标签的人，只需应用自定义类，例如 hover_black 如下；

注意 - 我的链接在悬停时是白色的但黑色的

//CSS

.text_white          { color: white;  } 
a.hover_black:hover  { color: black !important;  } 


// HTML
<a class="text_white hover_black"> Link </a>
于 2020-05-29T14:58:50.607 回答
2

在我的设计中，我想在特定部分更改链接和悬停颜色。

您正在描述可以在 BS4 中使用 sass 一次性解决的 3 件事。如果您有权访问自定义项目的 .scss 文件并能够编译它，那么我会推荐以下方法...

对于这种特殊情况，您可以像这样创建自定义 mixin：

@mixin my-variant($bgcolorOff, $borcolorOff, $bgcolorOn, $borcolorOn, $bgcolorAct, $borcolorAct, $txtcolorOff, $txtcolorOn, $txtsize, $txtalign){
    @include button-variant($bgcolorOff, $borcolorOff, $bgcolorOn, $borcolorOn, $bgcolorAct, $borcolorAct);
    color:#333; /*set a fallback color*/
    font-weight:normal; /*customize other things about your like so like*/
    text-transform:none; /*customize other things about your like so like*/
    text-decoration:none; /*customize other things about your like so like*/
    text-align:$txtalign; /*reference parameter values like so*/
}


我假设您已经将十六进制颜色分配给 sass 变量，如下所示：

$m-color-red: #da291c;
$m-color-blue: #004c97;
..etc..

如果是这样，请从 sass 文件中的任何特定位置调用您的 mixin。感觉这是您的第一次，请注意以下参数如何$m-color-white表示上述参数的值$bgcolorOff。因此，请密切注意您放置颜色的位置，以帮助定义您的自定义变体。

  .m-variant {
      @include my-variant($m-color-white, $m-color-grey-light, $m-color-off-white, $m-color-grey-light, $m-color-blue, $m-color-grey-light, $m-color-grey-light, $m-color-grey-light, 1.200em, 'left');
   }


最后，当您创建按钮或锚链接时，您可以将以下内容添加到元素结构中：

<a class="btn btn-sm m-3 m-variant ">my custom button</a>


4个简单的步骤。在你第一次这样做之后，每隔一次就很容易了。通过采用这种方法，您可以完全控制链接和悬停颜色。重用和/或创建任意数量的变体。

希望这可以帮助

于 2019-02-19T15:31:54.817 回答
1

将此添加到您的 CSS 中：

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

不过不要一开始就包含重要的标签，在添加它们之前看看是否有任何冲突。我个人更喜欢搜索和查找相关的类和父 div 以清除任何冲突或更改类名 I'米使用。

于 2016-01-03T04:37:29.023 回答
0

如果您只想使悬停颜色与非悬停状态相同，请使用此变量：

$emphasized-link-hover-darken-percentage: 0;
于 2021-01-07T20:40:02.607 回答
0

我只是一个菜鸟，但 Bootstrap 4 有一个名为“nav-link”的类，您可以在链接元素标签中使用它。我使用的是深色原色导航栏，链接颜色相同。这为我解决了。

<ul class="navbar-nav">
    <li class="nav-item">
        <a href="/Results/Create" class="nav-link">Create New Request</a>
    </li>
</ul>
于 2018-03-18T21:08:06.480 回答
0

这些 CSS 对我有用

.nav-pills .nav-link {
    color: #fff;
    cursor: default;
    background-color: #868686;
}

.nav-pills .nav-link.active {
    color: #000;
    cursor: default;
    background-color: #afafaf; 
    font-weight: bold;
}
于 2019-10-11T22:39:00.010 回答