web-dev-qa-db-ja.com

Bootstrap CSSスタイルをオーバーライドする方法

私は自分のウェブサイトに合うようにbootstrap.cssを修正する必要があります。 custom.cssを直接変更するよりも、個別のbootstrap.cssファイルを作成するほうが良いと思います。その理由の1つは、bootstrap.cssを更新する必要があるためです。私はこれらのスタイルのためにいくらかのロード時間を犠牲にするつもりですが、それは私がオーバーライドしているいくつかのスタイルのためにごくわずかです。

bootstrap.cssをオーバーライドしてI remove アンカー/クラスのスタイルにするにはどうすればよいですか？たとえば、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値を使用します。それでPranavの答えを組み合わせて、私は以下をしますか？

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;
}
htmlcsstwitter-bootstrap
201
Alex

!importantを使用するのは良い選択ではありません、将来あなた自身のスタイルを上書きしたいと思うでしょう。それは私達にCSSの優先順位を残します。

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

  • ID 100ポイント
  • クラスと疑似クラスで10ポイント
  • タグセレクタと擬似要素は1ポイント

2つのセレクタスタイルの中でブラウザは常により重みのあるものを選択します。スタイルシートの順序は優先順位が同じ場合にのみ問題になります。そのため、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;
}
424
smugglerFlynn

Htmlの頭の部分で、custom.cssをbootstrap.cssの下に置きます。

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

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

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/ /

他のすべては単にコピー/貼り付けや編集のスタイルの問題です。

77
Markus Kottländer

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

私が個人的に従うベストプラクティスは次のとおりです。

  1. 常に基本CSSファイルの後にカスタムCSSをロードします（応答しません）。
  2. 可能であれば!importantを使用しないでください。それは基本CSSファイルからのいくつかの重要なスタイルを上書きすることができます。
  3. メディアクエリを失いたくない場合は、custom.cssの後に必ずbootstrap-respond.c.cをロードしてください。 - 従わなければなりません
  4. 必要なプロパティを変更することを優先します（すべてではありません）。
26
Rahul Patil

Bootstrap.cssの下の最後のエントリとして、custom.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をオーバーライドします）。

16
Paramasivan

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

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

3
Victor Häggqvist

少し遅くなりましたが、私がしたことは、ルート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>
2
mr5

ブートストラップで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/ ）

2
Vivek Athalye
  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
Anand Chaudhary

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を作成します
    • import Bootstrap custom.scssの変更後

    • たとえば、本文の背景色を明るい灰色#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";
0
konyak