jQuery UI和Bootstrap主题结合

Max*_*lov 5 css jquery-ui twitter-bootstrap

我有jQuery UI主题和链接到我的页面的Bootstrap 2.1 css.在我使用Bootstrap样式按钮的情况下,它们上不显示任何文本.原来,jQuery UI主题中的这些行导致了问题:

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

在调试工具中删除时,1em不再将按钮文本强制转换为不可见.我已经确定了后来在样式表列表中的Bootstrap.css,所以它有更多的价值,但jQuery UI的缺点更具体.如何防止jQuery UI css数据影响我的引导按钮?

Mar*_*arc 5

特别是按钮是个问题.jQuery UI的按钮实现与Bootstrap的冲突.如果要以标准形式使用它们,可以在窗口小部件初始化之前将以下行添加到页面中,以消除冲突:

var btn = $.fn.button.noConflict() // reverts $.fn.button to jqueryui btn
$.fn.btn = btn // assigns bootstrap button functionality to $.fn.btn
Run Code Online (Sandbox Code Playgroud)

我只在简单的情况下对此进行了测试,但我认为它在一般情况下都有效.这里用适当的参考链接描述了这种方法:

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