ブートストラップをオーバーライドするにはどうすればよいですか？

次のコードは、ボタンが選択されているときにボタンテキストを暗い色にします。私はこれがブートストラップのbtnクラスに埋め込まれたコードから来たと仮定します。ボタンを選択した後にテキストの色が変わらないようにするには、コードをオーバーライドするにはどうすればよいですか？ブートストラップをオーバーライドするにはどうすればよいですか？

ボタンの アクティブ状態を意味し、「選択」で、これはあなたがそれを達成する方法であると仮定すると

<html> 
<head> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<style> 
    .buttonColor{ 
    color:#ff0000; 
} 
.buttonColor:hover{ 
    color:#ffff00; 
} 
</style> 
</head> 
<body> 
    <button class="buttonColor btn" > Submit</button> 
</body> 
</html>

出典

2016-04-27 SimonRH

をしてあなたのオーバーライドスタイルでもっと*** *** ***。 –

：

.buttonColor:active { 
    color: #ffff00; 
}

出典

2016-04-27 15:11:29 Simone

これは一般的な質問です：How to overwrite styling in Twitter Bootstrap、best way to override bootstrap css、リストに行く。

CSS law of specifityで読んでください。ブートストラップのbutton.btn宣言を上書きします

button.buttonColor.btn { 
    color: red; 
    padding: 50px; 
}

：あなたの例では

：あなたのクラス宣言で、より具体的なら基本的に、あなたは同じ要素をターゲットにしている他の人をオーバーライドすることができます。

同様

、他の状態を上書きする擬似セレクタを追加：

button.buttonColor.btn:active、button.buttonColor.btn:hoverなど

出典

2016-04-27 15:13:19

-1

ブートストラップは、特定の要素の状態を標的とする:hover、:activeと:focus擬似クラスの両方を使用する：

/* Example of Bootstrap :active styles for buttons */ 
.btn.active, .btn:active { 
    background-image: none; 
    outline: 0; 
    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125); 
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125); 
}

と一緒に：

あなたはより具体的にしたい場合は、明示的に独占的に <button>要素目標ができ

/* The more specific your selector (e.g. the more accurately it describes an */ 
/* element, the more likely a style will be applied. */ 
.btn.buttonColor:active, 
.btn.buttonColor.active, 
.btn.buttonColor:hover, 
.btn.buttonColor:focus { 
    color: #ffff00!important; 
}

：

だからあなただけ明示的に独自のスタイルを使用してそれらを無効にする必要があります

button.btn.buttonColor:active, 
button.btn.buttonColor.active, 
button.btn.buttonColor:hover, 
button.btn.buttonColor:focus { 
    color: #ffff00!important; 
}

出典

2016-04-27 15:13:42

あなたのコードを試しましたが、動作しませんでした。 – SimonRH

スタイルに余分な '.button'が追加されました。私はそれを削除しました、それを試してみてください。あなたは[ここのサンプルコードを使って見ることができます]（http://jsbin.com/nuvaho/edit?html,output）。 –

ブートストラップをオーバーライドするにはどうすればよいですか？

答えて

関連する問題