ブートストラップにカラークラスを追加する

Question

私はブートストラップを調べて、「カラークラス」がほとんどないことに気付きました（プライマリ、成功、危険など） クラスを追加する方法があるかどうかを知りたいのですが簡単に言及したようなものです。

例： "primary"は多くの要素で使用でき、定義された色が適用され、他の色クラスも適用されます。 「重要」という名前のクラスを作成し、そのクラスの色を定義し、インクルードされたクラスと同じように、各要素ごとに個別に（普通の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で変数を宣言することができます ブートストラップはsassでビルドされています。

あなたが宣言した色を見つけることができるファイルvariable.scssではソースコードhere

を見つけることができます。例えば

：

$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'クラスで設定された色をオーバーライドする必要があります。これは、この例の宣言の後ろにあるためです。