1. ホーム
  2. twitter-bootstrap

[解決済み] Twitter Bootstrapの名前空間を利用してスタイルが衝突しないようにする方法

2022-10-09 22:17:15

質問

Twitter Bootstrap を使いたいのですが、特定の要素にしか使えません。そこで、すべての Twitter Bootstrap クラスに私のプレフィックスを付けるか、less mixins を使用する方法を考えなければなりません。私はまだ経験が浅いので、これを行う方法をよく理解していません。以下は、私がスタイルを設定しようとしているHTMLの例です。

<div class="normal-styles">
  <h1>dont style this with bootstrap</h1>
  <div class="bootstrap-styles">
    <h1>use bootstrap</h1>
  </div>
</div>

この例では、Twitter Bootstrapは両方の h1 の両方を通常のスタイルにしますが、Twitter Bootstrapのスタイルを適用する箇所をより選択的にしたいのです。

解決方法は?

これは思ったより簡単であることが判明しました。LessとSassの両方が名前空間をサポートしています(同じ構文を使っています)。bootstrapをインクルードするとき、それを名前空間化するためにセレクタの中でそうすることができます。

.bootstrap-styles {
  @import 'bootstrap';
}

更新しました。 LESSの新しいバージョンでは、以下のようになります。

.bootstrap-styles {
  @import (less) url("bootstrap.css");
}

同じような質問がここで回答されています。