4

Twitter の Bootstrap ライブラリを使用してプライマリ ボタンを作成するには、次のように 2 つの CSS クラスを使用する必要がありますclass="btn btn-primary"。

btn に含まれるすべての CSS を btn-primary に含めることができたのに、なぜ彼らはこのように API を設計したのでしょうか? 純粋にコードの重複を節約してファイルサイズを節約するためですか、それとももっと複雑な理由がありますか?

4

2 に答える 2

6

これは、OOCSSの原則によるものです。要素から特定のスタイルを分離すると、コードとスタイルの再利用が向上し、css 内の任意のオブジェクトをすばやく簡単に変更できます。たとえば.btn、デフォルトの灰色でボタンのスタイルを設定するメイン クラスがある場合、その.btnクラスのすべてのボタンは同じスタイルになりますが、定義済みのスタイルを使用すると、同じボタン クラスを拡張して複数の異なる配色をサポートすることができます。デフォルトの.btnプロパティを何度も書き直すため、保守が容易になります。および他のすべてのボタン状態クラスの css を見ると.btn-warning、ボタンの色とスタイルを定義するだけで、ボタン クラスをもう一度書き直す必要がないことがわかります。

.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
    background-color: #F89406;
}

これにより、読みやすく、より短く、よりクリーンなスタイルシートが可能になります。

于 2012-05-08T15:25:48.853 に答える
6

btn-primaryデフォルトのボタンではないためです。緑に変わるのと同じように青に変えるのは、追加の CSS ですbtn-success。

デフォルトのボタンは灰色です。

于 2012-05-08T15:22:11.257 に答える