Question

我已经研究过Bootstrap，并注意到很少有＆＃34;颜色类＆＃34;包括（初级，成功，危险等）我想知道是否有办法添加更多类，比如简单提到的类。

例如：＆＃34;主＆＃34;可以与许多元素一起使用，并将应用定义的颜色，其他颜色类也是如此。我可以创建一个名为＆＃34; important＆＃34;的类，定义它的颜色并将其应用到所有地方，就像包含的类一样，而不是为每个元素单独制作它的版本（使用普通的css或任何预处理器）

谢谢！

Answer 1

你在找这样的东西吗？

＆＃13;

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.important,
.important a {
  color: #fff !important;
  background-color: #ffc107 !important;
  border-color: #ff9800 !important;
}
.important:active,
.important.active,
.important:focus,
.important.focus,
.important:hover,
.important a:hover {
  background-color: #ff9800 !important;
  border-color: #ff5722 !important;
}

＆＃13;

<div class="container">
  <nav class="navbar navbar-default">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="navbar-1">
      <ul class="nav navbar-nav">
        <li class="important"><a href="#">important item</a></li>
        <li><a class="important" href="#">important link</a></li>
      </ul>
    </div>
  </nav>

  <div class="important">important block</div>

  <p>important <span class="important">text</span></p>

  <div class="alert important">important alert</div>

  <div class="well important">important well</div>

  <button class="btn important">important button</button>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

＆＃13;

Answer 2

是的，您可以在SASS中声明变量 Bootstrap是用sass构建的。

您可以找到源代码here

在文件variable.scss中，您可以找到声明的颜色。

例如：

 $custom-color: #5cb85c;

声明一种新颜色，可以像：

一样使用

.custom-class {
  color:$custom-color;
}

.another-class{
  color:$custom-color;
}

Answer 3

您可以在bootstrap中为另一种颜色创建一个新类。我建议将其称为非重要的东西，因为它已经被使用并带有感叹号'！important'。相反，你可以提出另一个类名，如“紧急”或“极端”或“命令”，这样就没有冲突。您可以将其添加到bootstrap.css文件中，如下所示：

.urgent { color: #ff0000; } /* Put any color you want */

如果它只是用于某些文本，那么你只需在声明中添加它：

<p class="urgent">Some text goes here</p>

如果你要覆盖另一个或多个类的颜色但希望其他类的所有其他参数继续有效，你可以将它们放在同一个声明中，如下所示：

<p><a class="btn btn-default urgent" href="#" role="button">View details</a></p>

'紧急'颜色应该覆盖'btn'或'btn-default'类中设置的任何颜色，因为它在本例中的声明中出现。

Answer 4

这是一个较旧的问题，但公认的答案不是最完整和/或面向未来的。如果您将SASS编译作为构建步骤的一部分，这就是我的建议。

例如，如果要向生成的CSS类中添加新的“第三级”颜色，例如text-tertiary，bg-tertiary，alert-tertiary等，我们可以使用以下步骤：

设置一个.scss文件，其中将包含所有SCSS和引导程序替代。

@import "_variables";
@import "~bootstrap/scss/bootstrap.scss";

为您的引导程序变量配置/替代创建_variables.scss文件：

@import "~bootstrap/scss/_functions.scss";
@import "~bootstrap/scss/_variables.scss";

// TODO: overwrite variables to style the app for the client's theme
$tertiary: #218f8b;

// Add "tertiary" styles to the generated classes
$theme-colors: (
  "tertiary": $tertiary,
);

进一步阅读：有关主题的更多信息，请参见官方引导程序文档：https://getbootstrap.com/docs/4.0/getting-started/theming/#add-to-map

向Bootstrap添加颜色类

4 个答案: