2017-04-24 2 views
1

私は作成している単純なhtmlページを持っています。私のパネルでは、カスタムCSSで色をハードコーディングせずに異なる色を持つヘッダーが必要です。Cssヘルパーを.success、danger、.primaryクラスに追加する

は、私はそれは私がこれをより明確にするために

.success, .primary, .dangerなど

の代わりに使用できる色が含まれていることができDROPIN CSSファイルがあり、私は私のパネルヘッダとすることができ、他のコンポーネントをしたいです

.success, .primary, .danger他の色を持つようにしてください。

誰もこのようなヘルパーに出会えましたか?

答えて

2

ここでは、CSSクラスの色をカスタマイズできます。

各要素について、デフォルトの色を変更して、独自のグラフィック要素色でパッケージをダウンロードすることができます。

2

http://getbootstrap.com/customize

が、これはより明確にするために、私は私のパネルヘッダーおよび他の色を持っている.success、.primary、.dangerでスタイルすることができ、他のコンポーネントをしたいです。

サイト内の特定のパネルヘッダーのみを上記のクラスでスタイルする場合は、これらを外部クラスの内側に囲む必要があります。

<div class="specific-headers"> 
    <div class="success"> 
    // ... 
    </div> 
</div> 

次に、CSSファイルで、このように上書きできます。

.specific-headers > .success { 
    color: ..., 
    background-color: ... 
} 

したがって、指定したクラスでページをデザインできますが、標準の色は他の場所で使用できます。

これらのクラスが適用されているすべての要素に別の色を適用したい場合は、単に直接オーバーライドしてください。

.success { 
    color: ..., 
    background-color: ... 
} 

Twitterのブートストラップの後に独自のCSSファイルを含めることに注意してください。そうしないと、カスタマイズが上書きされます。

私は簡単なhtmlページを作成しています。私のパネルでは、カスタムCSSで色をハードコーディングせずに異なる色を使用する必要があります。

なぜ自分でハードコードしたくないのですか?あなたの色を指定する必要があります。 SASSまたはLESSを使用することをお勧めします。色を指定する変数のメリットがあります。