ブートストラップのデフォルトのオーバーライド！重要なカラーコード

Question

私はブートストラップを使用しており、このウェブサイトを開発しようとしています。特にbg-primaryカテゴリを使用して、デフォルトの色をロイヤルブルーに設定します。しかし、私は、 "購読する"ボタンの象徴と一致するように色が必要です。ただし、検査でわかるように、カードの背景の色は、重要なタグを持つ青色のデフォルト設定になっています。彼らはそれに重要なタグを配置するので、BG-原色を変更する

私のCSSは（も、私の重要な彼らを上書きしません）自然な色のブートストラップのセットを上書きすることはできません。

.bg-primary { 
    background-color: #3292a6 !important; 
} 

ブートストラップのデフォルトの重要なタグを.bg-primaryクラスに取り込み直して取り戻すにはどうすればよいですか？

Answer 1

あなたが（ `：ホバー」と '他の人の間で' ディセーブルに）たくさんのことをオーバーライドする必要があります、私は新しいCSSクラスを作成し提案します：

buttonColor { 
    border: none; 
    background-color: black; 
    color: white; 
    padding: 10px 20px; 

} 
buttonColor:hover { 
    cursor: pointer; 
    background-color: white; 
    color: black; 
} 

Answer 2

を試してみてください。

.card.bg-primary { 
    background-color: #3292a6 !important; 
} 

「と呼ばれる概念がある CSSで

（カスケーディング・スタイル・シート）：

はここに理由です"私の上記のルールは、ただ1つのクラス（.bg-primary）の代わりに2つのクラス（.card & .bg-primary）を使用するため動作します。

一般に、ブートストラップクラスをオーバーライドするには、クラスを前面に追加することでより具体的なCSSルールを作成します（注意：これは魔法のように動作しません。特にブートストラップナビでは効果がありません）

Answer 3

!importantタグを追加して自分のbg-primaryクラスのクラスを乗り越えるだけでよいでしょう。このルールを適用してより具体的なルールを作成してください。そこにも。

SOこれを参照してください - How to override !important?

このMozillaのポスト - 2つの一般的なアプローチがありますhttps://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#How_to_override_!important

Answer 4

- 。

いくつかの場所でオーバーライドしたい場合は、Jesse Phillipsのプライマシソリューションが最適ですが、全体的にオーバーライドしたい場合は、ヘッダーの解析方法に直接アクセスできますあなたのCSSルールは、後でブートストラップ

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

よりも文書に含まれていることを確認することは、あなたがしなければならないすべては、あなたがオーバーライドしたいクラスを一致して、あなたのルールに！重要なタグを追加しています。

編集：3番目のオプション私は時にはこれを試してみるとあなたがこの変更を緩めてくれるので、そこに重要なタグをローカルにあなたのサーバーにbootstrap.cssを保存し、ブートストラップを新しいバージョンに更新します。