向Bootstrap添加颜色类

Or Duer 发表于 Dev

或杜尔

我研究了Bootstrap，并发现其中包括一些“颜色类别”（主要，成功，危险等）。我想知道是否有一种方法可以像以前提到的那样添加更多的类别。

例如：“原色”可以与许多元素一起使用，并且将应用定义的颜色，其他颜色类别也是如此。我是否可以创建一个名为“重要”的类，定义其颜色并将其应用于所有地方，就像包含的类一样，而不必为每个元素单独创建一个版本（使用普通的CSS或任何预处理器）

谢谢！

格莱布·凯玛斯基（Gleb Kemarsky）

您是否正在寻找这样的东西？

@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;
}

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