1

私はこのような状況にあります。私は自分のアプリケーションでブートストラップと jquery-ui を使用しており、次のように含まれています。

<link href="bootstrap.min.css" rel="stylesheet" media="screen"/>
<link href="jquery-ui.css" rel="stylesheet" media="screen"/>
<!-- My custom stylesheet -->
<link href="style/style.css" rel="stylesheet" media="screen"/>

jquery-ui を使用してモーダル ウィンドウを開くと、次のルールにより、コンテンツに「独自の」フォント ファミリとフォント サイズがあることに気付きました。

.ui-widget input, 
.ui-widget select, 
.ui-widget textarea, 
.ui-widget button {
    font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;
    font-size: 1em;
}

Chrome (F12) でデバッグするとき、このルールを「無効」にして、期待どおりの結果を得ることができます。しかし、カスタム スタイルシートでそれを行う方法がわかりません。私はこれがうまくいくことを知っています：

.ui-widget input, 
.ui-widget select, 
.ui-widget textarea, 
.ui-widget button {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
}

または、jquery-ui.css ファイルのルールをコメント アウトすることもできます。しかし、後で「ベース」フォントを変更することにした場合、1 か所で変更を加え、jquery-ui およびブートストラップ css ファイルを変更しない方法を探していました。どうすればこれを達成できますか? Chrome でルールを「無効化」するメカニズムはどのように機能しますか?

4

3 に答える 3

2

同じコードを独自のスタイルシートに配置するだけです。このような

.ui-widget input, 
.ui-widget select, 
.ui-widget textarea, 
.ui-widget button {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
}

また、カスタム CSS ファイルが jQuery UI CSS の後にリンクされている限り、デフォルトのスタイルが上書きされます。

その後、いつでも変更できます。

于 2013-08-29T12:50:42.517 に答える
2

Chrome の機能はデバッグ機能であり、「実際の」機能はありません。

あなたがする必要があるのは、残りの値よりも優先する値を確立することです。これを行うには、CSS ファイルの順序を変更し (jquery-ui の後に bootstrap.min.css を追加すると、そのルールが jquery-ui のルールに取って代わります)、独自のルールを追加して他のすべてのルールを上書きします。

警告として、jquery-ui とブートストラップ CSS の両方を使用しないことをお勧めします。どちらも、それぞれのフレームワークが行うことに対してかなり完全であることを望んでおり、多くの重複が発生する可能性があります。

また、(オーバーライドを導入するのではなく) ベース CSS を実際に制御したい場合は、ブートストラップ フレームワークの LESS (または SASS ポート) バージョンを使用してみてください。その後、フォントの選択などを変数に格納し、それを変更することができます。あなたがそれを使用するどこでもフォントを変更します！

于 2013-08-29T12:52:51.573 に答える
0

最善の解決策は、1 つのスタイルシートと 1 つのフレームワークに固執することです。ほとんどの場合、jQuery UI と Bootstrap は相性が悪いため、Bootstrap モーダルを使用することをお勧めします。そうすれば、スタイルはどこでも一貫します。

別の方法は、jQuery UI のスタイルシートを編集して、それらの行を単純に削除することです。縮小されている場合は、ワード ラップ機能と検索/検索機能を備えたテキスト エディター (適切なエディター) を使用します。しかし、あなたはそれをしたくないようです。

これらの制限があるため、スタイルを継承するように依頼するのが最善の選択です。

.ui-widget input, 
.ui-widget select, 
.ui-widget textarea, 
.ui-widget button {
    font-family: inherit;
    font-size: inherit;
}

これを他のスタイルシートの下に配置することで、要素の jQuery UI のスタイルをオーバーライドし、代わりに、body 要素に設定されたフォント Bootstrap など、最も近い親のスタイルを取得します。

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
于 2013-08-29T12:50:29.413 に答える