jQueryのUIとブートストラップテーマの衝突

Question

私は、jQueryのUIテーマとブートストラップ2.1のCSSを私のページにリンクしています。ブートストラップスタイルのボタンを使用している場合は、テキストは表示されません。

デバッグ・ツールで削除

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

は、1EMはもはやボタンのテキストを落とし、それが見えないほど小さくなるように：それは、これらの問題を引き起こしているのjQuery UIのテーマで行があったことが判明しました。私はBootstrap.cssを後でスタイルシートのリストに入れておいたほうがいいので、もっと価値がありますが、jQuery UIのdefeinicitonはより具体的です。ブートストラップボタンに影響を与えるjQuery UIのCSSデータをプリペンドするにはどうすればよいですか？

Answer 1

ボタンを、特に、問題です。 jQuery UIのボタンインプリメンテーションは、ブートストラップと矛盾します。あなたが彼らの標準的な形式でそれらを使用する場合は、競合を排除するために、前にウィジェットの初期化に、あなたのページに次の行を追加することができます。

var btn = $.fn.button.noConflict() // reverts $.fn.button to jqueryui btn 
$.fn.btn = btn // assigns bootstrap button functionality to $.fn.btn 

私は簡単な例でこれをのみテストしてみました、私はそれが一般的に動作すると推測します。ここでは、適切な参照リンクを使用してアプローチを説明します。

http://www.dullsharpness.com/2013/04/29/resolve-jqueryui-and-twitter-bootstrap-button-conflict/

Answer 2

あなたはこのテーマに両方の長所を組み合わせることができますhttp://addyosmani.github.com/jquery-ui-bootstrap