ブートストラップはスタイルを変えることができますか?

ブートストラップのデフォルトのスタイルを変更する

ブートストラップを長い間使用していなかったので忘れていました自分のニーズに合わせてスタイルを変更します。

開始してすぐに新しいクラスを追加し、CSS スタイルを書き換えて元のスタイルを上書きしましたが、実際には機能しませんでした。セレクターの優先順位が考慮されていないためです。これらの質問の中には面接で聞かれることもありますが、理論と実践を結びつけることができませんでした。

私の解決策は、サブセレクターを通じて重みを増やすことです。他の人も ID を使用しているのを見ると、ID を持つセレクターを追加するのは好きではありません。

一連のセレクターとその優先順位を思い出してください。

1. css セレクター

1. タグ セレクター (body、div、p、ul、li など)

2. クラス セレクター(例: class)

3. ID セレクター (例: id)

4. グローバル セレクター (例: * 数値)

5. 組み合わせ選択セレクター(例: .head .head_logo、2 つのセレクターがスペースバーで区切られていることに注意してください)

6. 子孫セレクター (例: #head .nav ul li 親セットから子孫セットへのセレクター)

7. グループ セレクター div、span、img {color:Red} は、同じスタイルのタグがグループに表示されることを意味します

8. セレクターを継承します (例: div p、注意してください) 2 つのセレクターはスペース バーを使用します。個別)

9. 疑似クラス セレクター (例: リンク スタイル、要素の疑似クラス、4 つの異なる状態: リンク、訪問済み、アクティブ、ホバー)

10. 文字列照合用の属性セレクター (^ $ * 3 種類、それぞれ先頭、末尾、および包含に対応)

11. サブセレクター (例: div>p、大きい値を持つ)記号>)

12.CSS 隣接兄弟セレクター (例: h1 p、プラス記号付き)

関連する推奨事項: 「bootstrap 入門チュートリアル 」

2. 優先度

#スタイル宣言で !重要 ルールを使用すると、スタイル宣言は CSS 内の他の宣言をオーバーライドします。IE6 はこの属性をサポートしません。

インライン スタイル シートのウェイトは最大 1000、つまり HTML の要素タグにスタイルを追加すること、つまりインライン スタイルです。この方法はCSSの管理が難しくなるため、お勧めできません。

ID セレクターの重みは 100 で、1 つ以上の ID セレクターによって定義されます。たとえば、#id{margin:0;}id セレクターはクラス セレクター .classname{margin:3pxl} をオーバーライドします。

クラス クラス セレクターの重みは 10 で、1 つ以上のクラス セレクター、属性セレクター、および擬似クラス セレクターによって定義されます。たとえば、.classname{margin:3px} は div{margin:6px;} をカバーします。

ラベル セレクターの重みは 1 です。1 つ以上のタイプ セレクターによって定義されます。たとえば、div{marigin:6px;} は *{margin:10px;} をカバーします。

ワイルドカード セレクター: *{marigin:6px;} など。

ブラウザのカスタマイズまたは継承の値は 0.1 です。

概要の並べ替え: !重要 > インライン スタイル > ID セレクター > クラス セレクター > タグ > ワイルドカード > 継承 > ブラウザのデフォルト プロパティ

三、! important

! important の使用は悪い習慣であり、できる限り避ける必要があります。これは、スタイル シートに固有のカスケード ルールが破られ、デバッグやバグの発見がより困難になるためです。 ! important ルールを持つ 2 つの競合する宣言が同じ要素に適用される場合、より優先される宣言が使用されます。

クエリ エクスペリエンス:

サイト全体の CSS では ! important を使用しないでください。

! important は、サイト全体または外部 CSS (参照される ExtJ や YUI など) をカバーする必要がある特定のページでのみ使用してください。

プラグインでは ! important を決して使用しないでください。

最適化するには、!重要ではなく、スタイル ルールの優先順位を使用して問題を解決することを検討してください。

以上がブートストラップはスタイルを変えることができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。