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

Bootstrap 4的CSS代码是用Sass（SCSS）而不是Less now编译的。 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; //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的颜色，请使用scss/bootstrap.scss文件末尾的以下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;}

Answer 2

2020年-Google带来了类似的服务。

Bootstrap 4.5

对于那些只希望在链接时更改链接颜色或标记的人，只需应用一个自定义类，如下所示说hover_black即可；

注意-链接停留在我的链接上时，白色但黑色

//CSS

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

// HTML
<a class="text_white hover_black"> Link </a>

Answer 3

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

您所描述的3件事可以用sass一次在BS4中解决。如果您有权访问自定义项目的.scss文件并能够对其进行编译，那么我建议您采用以下方法...

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

@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个简单步骤。第一次执行此操作后，隔其他时间很容易。通过采用这种方法，您可以完全控制链接和悬停颜色。重用和/或创建任意多个变体。

希望这会有所帮助

Answer 4

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

private final ApplicationContextRunner contextRunner = new ApplicationContextRunner()
        .withConfiguration(AutoConfigurations.of(DataSourceAutoConfiguration.class))
        .withPropertyValues("spring.datasource.initialization-mode=never",
                "spring.datasource.url:jdbc:hsqldb:mem:testdb-" + new Random().nextInt());

@Test
public void testDefaultDataSourceExists() {
    this.contextRunner.run((context) -> assertThat(context).hasSingleBean(DataSource.class));
}

并在mystyle.css中：

<!-- 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"/>

Answer 5

将此添加到您的CSS：

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

首先不要包含重要的标签，在添加之前看看是否有任何冲突。我个人更喜欢只做一个搜索＆amp;找到相关的类和父div来清除任何冲突或更改我正在使用的类名。

Answer 6

我只是一个菜鸟，但Bootstrap 4有一个名为＆＃34; nav-link＆＃34;您在link元素标记中使用的内容。我使用的是黑色的原色彩色导航栏，链接颜色相同。这解决了我。

<ul class="navbar-nav">
    <li class="nav-item">
        <a href="/Results/Create" class="nav-link">Create New Request</a>
    </li>
</ul>

Answer 7

我发现此链接对满足我的需求很有用。

Bootstrap 4 Colors

Answer 8

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

Answer 9

如果你只是想让悬停颜色和非悬停状态一样，使用这个变量：

$emphasized-link-hover-darken-percentage: 0;

Answer 10

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

<强> 1。添加自己的样式

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

将此添加到您自己的.css：

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

你会发现它可以作为一种魅力。

<强> 2。您可以找到bootstrap.css中设置的所有内容

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

如何在Bootstrap版本4中更改链接颜色和悬停颜色？

10 个答案: