5

私は現在、Bootstrap を使用しています。自分のサイトでは、それに付属する特定のデフォルト設定をオーバーライドしたいと考えています。多くの Bootstrap ルールは非常に深くネストされているため、ほとんどの場合、私が定義したものよりも優先されます。

私のオーバーライド css ファイルでは、叩くよりも良いオプションがありますか?

!important

それぞれのルールについてですか、それとも最近はみんなそれを扱っているのでしょうか?

4

6 に答える 6

9

FWIW、これは私にとってはうまくいきます。

  • LESS をまだ使用していない場合は、時間をかけて理解してください。時間を大幅に節約でき、すべてを整理しておくのが簡単になりますhttp://lesscss.org。あなたは十分に報われるでしょう;）

  • 元の Bootstrap LESS ファイルを編集して次の Bootstrap 更新ですべてを失う代わりに、新しい theme-css.less ファイルとおそらく theme.variables.less ファイルを作成し、Bootstrap LESS ファイルと同じディレクトリに保存します。

  • 新しいファイルが正しくコンパイルされるように、bootstrap.less を編集します。

    ..

    // CSS リセット @import "reset.less";
    // コア変数とミックスイン

    @import "variables.less"; // カスタムの色、フォント サイズなどに合わせてこれを変更
    @import "mixins.less";

    @import "theme-variables.less"; // <==== カスタム CSS 変数

    // グリッド システムとページ構造
    @import "scaffolding.less";
    @import "grid.less";
    @import "layouts.less";

    // Base CSS
    @import "type.less";
    @import "code.less";
    @import "forms.less";
    @import "tables.less";

    @import "theme-css.less"; // <==== カスタム CSS

    ..

  • Bootstrap のカスタマイズ ページを使用して、カスタマイズしたい CSS の大部分を制御する変数の名前を見つけます。これらを必要に応じて変更し、theme.variables.less ファイルに追加します。

  • http://lesscss.org/に従って、LESS のネストされたルールを使用します 。<==これは重要です。複雑な CSS を大幅に簡素化します。

LESS を初めて使用する場合、これは単純な 5 分間の修正ではないことを認識していますが、一度セットアップしてネストされたルールを使用し始めると、CSS は美しくシンプルになり、保守が容易になります。

2015 年 6 月の更新
上記の手法は、現在は少し古くなっています。まだ動作しますが、ジェイク は私が気に入っている変更を提案し、長期的なメンテナンスを簡素化します.

メインの bootstrap.less ファイルを編集する代わりに:

  • 新しい theme.less ファイルを作成する

  • bootrap.less とカスタム変更をインポートします。例:

    @import "path-to/bootstrap.less;
    @import "path-to/custom.less;

  • theme.less をコンパイルする

このようにすると、bootstrap.less ファイルを更新した場合にカスタムの変更が失われる可能性が低くなります。

于 2013-02-21T22:15:49.633 に答える
4

!importantは最後の手段であり、理想的には使用しないでください。CSS をオーバーライドする場合は、CSS カスケード ルールを尊重します。より「具体的な」ルールは、「具体的」でないルールよりも常に優先されます。例えば

<div id="someid">Howdy</div>


div { 
    color: red;
}

div#someid {
    color: blue;
}

#someid は 2 番目のルールをより具体的にするため、両方が同じ要素を指しているにもかかわらず、テキストを青色にします。

于 2013-02-21T21:32:49.167 に答える
2

これは、CSSスコアリングがセレクターに対してどのように機能するかです。

インラインスタイルは、CSSのすべてに勝ります。例えば。<p style="margin:0;">CSSファイルのすべてを上書きします。

IDは1000ポイントとしてカウント：＃sub-head、＃page-wrapperクラスは100ポイントとしてカウントZ：.sub-head、.page-wrapper要素は10ポイントとしてカウント：a、p、div、ul、li疑似セレクターは1としてカウント：: hover、：first-child、：last-child

スタイルのポイントが最も高いセレクターがページにレンダリングされます。

！重要なのは、引っ張るもう1つの切り札であり、めったに使用しないでください。たとえば、特別なテキストや余白を着色するために使用するのが好きです。

これはそれをより詳細に説明する良いリンクです。その非常に簡単です。

リンク

于 2013-02-21T22:02:46.967 に答える
0

これに対する私の答え。ブートストラップ スタイル シートの後にカスタム スタイル シートを追加すると、すべてが機能します。

(カスタム ブートストラップ テーマの wordpress サイト) - この場合、ブートストラップ スタイル シートの後にスタイル シートをエンキューした後に問題が修正されました

于 2016-03-11T03:53:36.877 に答える
0

最も簡単で最初に行うべきことは、html ファイルの先頭にあるスタイルシート リンクの順序を確認することです。

最初にブートストラップ CSS にリンクしてから、次の行で style.css (または同様の) ファイルにリンクします。

この順序を逆にすると、特定のスタイル要素をオーバーライドする際に問題が発生する可能性があります。

于 2017-12-07T18:14:51.873 に答える