手動の親セレクターを使用せずにブートストラップ スタイルを特定の要素に適用する方法

特定の要素での CSS スタイルの使用

テーブルベースのレイアウトから CSS への移行では、CSS スタイルを適用する必要が生じる場合があります。 Web ページの特定のセクションのみ。これは、指定されたクラス内に必要な要素をカプセル化することで実現できます。たとえば、次のように「bootstrap」クラスを使用して div でフォームをラップできます。

<div>

ただし、ページ上の他のフォームでは現在のスタイルを保持したいとします。すべての Bootstrap CSS ルールに親セレクターを手動で追加せずにこれを実現する簡単な方法はありますか?

解決策

Bootstrap 3 の場合、LESS を使用するとプロセスが簡素化されます。

1. Bootstrap ソース コードをダウンロードし、次のように style.less ファイルを作成します。

.bootstrap {
    @import "/path-to-bootstrap-less.less";
    @import "/path-to-bootstrap-responsive-less.less";
}

2. LESS ファイルをコンパイルします。 Less.js で Node.js などのコマンド ライン ツールを使用したり、GUI コンパイラーを探索したりできます。あるいは、npm を使用して LESS をインストールし、次のようにファイルをコンパイルします:

npm install -g less
lessc style.less style.css

以上が手動の親セレクターを使用せずにブートストラップ スタイルを特定の要素に適用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。