0

異なるカラー セットを持つ 2 つの Bootstrap コンポーネントを持つ推奨される方法はありますか?

たとえば、2 つのナビゲーション タブ (1 つはダーク テーマ、もう 1 つはライト テーマ) です。

できれば次のようなもの：

<div class="dark"><ul class="nav nav-tabs"> ... </ul></div>
<header>...</header>
<div class="light"><ul class="nav nav-tabs"> ... </ul></div>

しかし、このようなものは問題ないかもしれません:

<ul class="dark-nav dark-nav-tabs"> ... </ul>
<header>...</header>
<ul class="dark-nav light-nav-tabs"> ... </ul>

2 つの Bootstrap CSS ファイルを含めることをお勧めします。1 つは暗い variables.less で、もう 1 つは明るい色ですが、何らかの名前空間にスタイルのプレフィックスを付けます。理想的には、誤って入力するなどのリスクを最小限に抑えたいと思います。暗い領域を回避する方が簡単です。

4

2 に答える 2

0

.lessLESS では、他の/.cssファイルを好きな場所にインポートできます。また、ルールセット内にもインポートできます。

#dark {
   @import "style-dark.less";
}

#light {
   @import "style-light.less";
}

これを、色をカスタマイズできる Bootstrap オプションと組み合わせると、生成された 2 つのファイルを適切なルールセットにインポートするだけで、目的の結果を得ることができます。

于 2013-11-13T19:56:43.700 に答える