Bootstrap CSSスタイルをオーバーライドするにはどうすればよいですか？

234

bootstrap.css私のウェブサイトに合うように変更する必要があります。直接custom.css変更bootstrap.cssするのではなく、別のファイルを作成する方が良いと思います。1つの理由はbootstrap.css、更新を取得する必要があるためです。すべての変更を再度含めようとすると苦労します。これらのスタイルの読み込み時間を少し犠牲にしますが、オーバーライドするいくつかのスタイルでは無視できます。

アンカー/クラスのスタイルbootstrap.cssを削除するようにオーバーライドするにはどうすればよいですか？たとえば、次のスタイリングルールをすべて削除したい場合legend：

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

ですべて削除できbootstrap.cssますが、CSSのオーバーライドに関するベストプラクティスについての私の理解が正しい場合は、代わりに何をすべきですか？

明確にするために、これらの凡例のスタイルをすべて削除し、親のCSS値を使用したいと思います。プラナフの答えを組み合わせて、私は次のことをしますか？

legend {
  display: inherit !important;
  width: inherit !important;
  padding: inherit !important;
  margin-bottom: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  border: inherit !important;
  border-bottom: inherit !important;
}

（私は次のようなことをする方法があることを望んでいました:)

legend {
  clear: all;
}
html  css  twitter-bootstrap 
— アレックス
ソース

回答:

491

!important将来的には独自のスタイルをオーバーライドする可能性が高いため、使用は適切なオプションではありません。これにより、CSSの優先順位が残ります。

基本的に、すべてのセレクターには独自の数値「重み」があります。

  • ID 100ポイント
  • クラスと疑似クラスの10ポイント
  • タグセレクターと疑似要素に1ポイント
  • 注：要素に自動的に勝つインラインスタイルが設定されている場合（1000ポイント）

2つのセレクタースタイルの中で、ブラウザーは常により重みのあるものを選択します。スタイルシートの順序は、優先度が同じである場合にのみ重要です。そのため、Bootstrapをオーバーライドするのは簡単ではありません。

オプションは、Bootstrapソースを検査し、特定のスタイルが正確にどのように定義されているかを調べ、そのセレクターをコピーして、要素の優先度を等しくすることです。しかし、その過程でBootstrapのすべての甘さを少し緩めます。

これを克服する最も簡単な方法は、次のように、ページ上のルート要素の1つに追加の任意のIDを割り当てることです。 <body id="bootstrap-overrides">

このようにして、CSSセレクターの前にIDを付けるだけで、要素に100ポイントの重みを即座に追加し、Bootstrap定義をオーバーライドできます。

/* Example selector defined in Bootstrap */
.jumbotron h1 { /* 10+1=11 priority scores */
  line-height: 1;
  color: inherit;
}

/* Your initial take at styling */
h1 { /* 1 priority score, not enough to override Bootstrap jumbotron definition */
  line-height: 1;
  color: inherit;
}

/* New way of prioritization */
#bootstrap-overrides h1 { /* 100+1=101 priority score, yay! */
  line-height: 1;
  color: inherit;
}
— 密輸業者
ソース
IDは一度しか使用できないので#bootstrap-overrides、クラスを作成してみませんか？
— chharvey、2015
2
@chharvey：より良い計算をしなければならなくなるからです。この例のクラスの場合はprio 11であり、cssの定義がbootstrap.cssの後にある場合は、問題ありません。ただし、これはかなり近く、prioの大きな時間を後押しするIDとして設定するので、prioの計算と常に正しいかどうかのテストをそれほど心配する必要はありません。デフォルトを明確に上書きする場合は、IDを使用すると簡単です。
— ホーガン2015
ちょうど私の日を作りました。私はこれを知っていて、それでも私のスタイルが解釈されない理由を理解しようとして立ち往生しています。
— hogan 2015
3
あなたが言及したポイント（IDの100、クラス/疑似クラスの10、タグセレクター/疑似要素の1）はリテラルですか、それとも、この例ではこれらの値を作成しましたか？
— カイルヴァセッラ2017
2
あなたの説明は良いです、それはCSSに新しい人にそれを説明する方法として理にかなっていますが、誤解を招きやすいです。あなたが言及したことの正しい名前はspecificity、各cssセレクターの「重み」を定義するcssです。ここではそれについていくつかの詳細：css-tricks.com/specifics-on-css-specificity/...
— アドリアーノ
85

HTMLのヘッドセクションで、custom.cssをbootstrap.cssの下に配置します。

<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">

次に、custom.cssで、オーバーライドする要素にまったく同じセレクターを使用する必要があります。ブートストラップにはより具体的なセレクターがないため、この場合はlegend単にlegendcustom.cssにとどまります。

legend {
  display: inline;
  width: auto;
  padding: 0;
  margin: 0;
  font-size: medium;
  line-height: normal;
  color: #000000;
  border: 0;
  border-bottom: none;
}

しかし、の場合にはh1例えば次のような、より具体的なセレクタの世話をする必要があります.jumbotron h1ので、

h1 {
  line-height: 2;
  color: #f00;
}

上書きしません

.jumbotron h1,
.jumbotron .h1 {
  line-height: 1;
  color: inherit;
}

これは、どのスタイルルールが要素に適用されるかを正確に知るために理解する必要があるcssセレクターの特異性の有用な説明です。 http://css-tricks.com/specifics-on-css-specificity/

その他はすべて、コピー/貼り付けおよび編集のスタイルの問題です。

— マーカス・コトレンダー
ソース
28

基本スタイルシートの一部をオーバーライドしているので、ロード時間にはあまり影響しません。

私が個人的にフォローしているいくつかのベストプラクティスを次に示します。

  1. ベースCSSファイルの後に常にカスタムCSSをロードします（応答しません）。
  2. !important可能であれば使用を避けてください。これにより、基本CSSファイルのいくつかの重要なスタイルを上書きできます。
  3. メディアクエリを失いたくない場合は、常にcustom.cssの後にbootstrap-sensitive.cssをロードしてください。- 従わなければなりません
  4. 必要なプロパティを変更することをお勧めします（すべてではありません）。
— ラフルパティル
ソース
10
以来、bootstrap-responsive.cssもう存在し、これはまだ本当立っていない、またはこれはもはや関連しているのですか？
— Shaun Wilson
20

custom.cssファイルを、bootstrap.cssの下の最後のエントリとしてリンクします。Custom.cssスタイル定義はbootstrap.cssをオーバーライドします

HTML

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">

custom.cssにある凡例のすべてのスタイル定義をコピーして、それに変更を加えます（例：margin-bottom：5px;-これはmargin-bottom：20px;をオーバーライドします）

— パラマシバン
ソース
はい、私はすでにそれをしました。すみません、私の質問ははっきりしていませんでした。私の質問は、bootstrap.min.cssからスタイルをオーバーライドするためにcustom.cssで何をするかを尋ねていました。
— Alex
bootstrap-theme.min.cssも使用している場合はどうなりますか？
— Quasaur 2015
min cssを使用しても機能しました
— mimi
5

legendブートストラップで定義されたスタイルをリセットするには、cssファイルで次のようにします。

legend {
  all: unset;
}

参照：https : //css-tricks.com/almanac/properties/a/all/

CSSのallプロパティは、テキストの方向を制御するdirectionおよびunicode-bidiプロパティを除いて、選択された要素のすべてのプロパティをリセットします。

可能な値は次のとおりです：initial、inherit＆unset。

補足：clearプロパティはfloat（https://css-tricks.com/almanac/properties/c/clear/）との関連で使用されます

— ヴィベック・アサリエ
ソース
3

かなり大きな変更を行う場合は、ブートストラップ自体で直接変更して再構築することをお勧めします。次に、ロードされるデータの量を減らすことができます。

作成ガイドについては、GitHubのブートストラップを参照してください。

— ビクター・ヘックビスト
ソース
必要なカスタマイズの程度によっては、これが最も簡単なオプションになる可能性があります。たとえば、テーマの色を変更するには非常に多くのオーバーライドが必要になるため、テンプレートの変更とカスタムビルドを選択します。
— デビッドカークランド2014
@alexバンプソースと再構築？
— VictorHäggqvist15年
3

https://bootstrap.themes.guide/how-to-customize-bootstrap.htmlを参照してください

  1. 単純なCSSオーバーライドの場合は、bootstrap.cssの下にcustom.cssを追加できます

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">

  2. より広範囲の変更については、SASSが推奨される方法です。

    • 独自のcustom.scssを作成する
    • custom.scssの変更後にBootstrapをインポートする

    • たとえば、本体の背景色を明るい灰色の#eeeeeeに変更し、青色の原色のコンテキストカラーをBootstrapの$ purple変数に変更します...

      /* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */   

/* simply assign the value */ 
$body-bg: #eeeeee;

/* or, use an existing variable */
$theme-colors: (
  primary: $purple
);
/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";
— コンヤック
ソース
2

少し遅れましたが、私がやったことは、ルートにクラスを追加してからdiv、カスタムスタイルシートのすべてのブートストラップ要素を拡張することです。

.overrides .list-group-item {
    border-radius: 0px;
}
.overrides .some-elements-from-bootstrap { 
    /* styles here */
}
<div class="container-fluid overrides">
    <div class="row">
        <div class="col-sm-4" style="background-color: red">
            <ul class="list-group">
                <li class="list-group-item"><a href="#">Hey</a></li>
                <li class="list-group-item"><a href="#">I was doing</a></li>
                <li class="list-group-item"><a href="#">Just fine</a></li>
                <li class="list-group-item"><a href="#">Until I met you</a></li>
                <li class="list-group-item"><a href="#">I drink too much</a></li>
                <li class="list-group-item"><a href="#">And that's an issue</a></li>
                <li class="list-group-item"><a href="#">But I'm okay</a></li>
            </ul>
        </div>
        <div class="col-sm-8" style="background-color: blue">
            right
        </div>
    </div>
</div>
— mr5
ソース
-1
  1. コンソールのターゲットボタンを調べます。
  2. [要素]タブに移動し、コードにカーソルを合わせて、ブートストラップで使用されるデフォルトのIDまたはクラスを見つけてください。
  3. 関数を呼び出してスタイル/テキストを上書きするには、jQuery / javascriptを使用します。

この例を見てください：

  $(document).ready(function(){
      $(".dropdown-toggle").css({ 
        "color": "#212529",
        "background-color": "#ffc107",
        "border-color": "#ffc107"
       });
      $(".multiselect-selected-text").text('Select Tags');
  });
— アナンド・チャウダリー
ソース
-1

私は（ブートストラップ4）あなた自身のCSSを後ろに置くことを知りました bootstrap.css .jsが最善のソリューションである。

変更する項目（要素の検査）を見つけて、まったく同じ宣言を使用すると、オーバーライドされます。

これを理解するのに少し時間がかかりました。

— ヘンリー
ソース
-3

凡例にIDを与え、CSSを適用します。legend（）にid helloを追加するように、CSSは次のようになります。

#legend  legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}
— アマーガウル
ソース
-9

cssの代わりにjquery cssを使用します。。。jqueryはブートストラップCSSよりも優先されます...

例えば

$(document).ready(function(){
        $(".mnu").css({"color" : "#CCFF00" , "font-size": "16px" , "text-decoration" : "overline"});    


);

 instead of

.mnu
{

font-family:myfnt;
font-size:20px;
color:#006699;

}
— アジート・サンクワル
ソース
6
HTMLを使用して構造を提供し、CSSを使用してスタイルを提供し、JavaScript（jQueryを含む）を使用して対話性を提供する必要があります。jQueryを使用してスタイルをオーバーライドすることは、優れたアーキテクチャの原則に反するものであり、6か月後にコードで作業しようとする人にとっては非常に混乱します。
— スティーブンR.スミス
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.