[解決済み] 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");
}
関連
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] Twitter Bootstrapでナビバーの色を変更する
-
[解決済み] Twitter Bootstrap Form File Element Upload Button(ファイルアップロードボタン
-
[解決済み] Twitter Bootstrapのモーダルクローズに関数をバインドする
-
[解決済み] Twitter Bootstrapを使った中央寄せのコンテンツはどうなっているのか?
-
[解決済み] Twitter Bootstrapのモーダルサイズを大きくする
-
[解決済み] レスポンシブWebサイトがモバイルで全幅に拡大表示される。
-
[解決済み] Bootstrapでテーブルの行をソートする [終了しました]。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Bootstrap 4のColでコンテンツを下に揃える方法
-
[解決済み】Bootstrapを使用したフォームのマークエラーについて
-
[解決済み】Bootstrap 3 ナンバーバーの折りたたみについて
-
[解決済み] reactjsアプリでbootstrapのcssとjsをインクルードする方法は?
-
[解決済み] BootstrapはCDNから使うべきか、それとも自分のサーバーにコピーを作るべきか?
-
[解決済み] Twitter ブートストラップ スクロール可能なテーブル
-
[解決済み] Bootstrap 3 のスタックドタブ
-
[解決済み] レスポンシブWebサイトがモバイルで全幅に拡大表示される。
-
[解決済み] Twitter Bootstrap でテーブルのテキストを中央揃えにする
-
[解決済み] Bootstrapでテーブルの行をソートする [終了しました]。