向Bootstrap添加一個顏色類

Question

我已經看過Bootstrap，並注意到包含很少「顏色類」（主要，成功，危險等） 我想知道是否有添加更多類的方法就像那些簡單的方法。

例如： 「主」可以與許多元素一起使用，並且將應用定義的顏色，其他顏色類也會應用。 我可以創建一個名爲「重要」的類，定義它的顏色並將它應用到任何地方，就像所包含的類一樣，不需要爲每個元素單獨製作一個版本（使用普通css或任何預處理器）

謝謝！

Answer 1

您正在尋找這樣的事情？

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

Answer 2

是的，你可以在SASS中聲明變量 Bootstrap是用sass編譯的。

你可以找到源代碼here

在文件variable.scss你可以找到宣稱的顏色。

例如：

$custom-color: #5cb85c; 

聲明瞭一個新的顏色，這可以用於像：

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

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

Answer 3

您可以創建在引導一個新的類爲另一種顏色。我建議把它稱爲非重要的東西，因爲它已經與感嘆號「！important」結合使用了。相反，你可以想出另一個類名，如'緊急'或'極端'或'必要'，因此不存在衝突。您只需將它添加到bootstrap.css文件像這樣：

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

如果要簡單地用於一些文字，然後你只需在聲明中添加：

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

如果您正在覆蓋另一個或多個類的顏色，而是希望其他類（ES）的所有其它參數繼續有效，你可以把它們放在一起在同一個聲明，如下所示：

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

'緊急'顏色應該覆蓋在'btn'或'btn-default'類中設置的任何顏色，因爲它在這個例子中的聲明之後。