css - jQuery UI 和 Bootstrap 主题冲突

Question

我有 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 数据影响我的引导按钮？

score 5 · Accepted Answer

尤其是按钮是个问题。jQuery UI 的按钮实现与 Bootstrap 的冲突。如果您想以标准形式使用它们，您可以在小部件初始化之前将以下行添加到您的页面中，以消除冲突：

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

我只在简单的情况下对此进行了测试，但我认为它通常可以工作。此处使用适当的参考链接描述了该方法：

score 2 · Accepted Answer

2

您可以将两全其美与此主题相结合：http: //addyosmani.github.com/jquery-ui-bootstrap

于 2012-08-29T03:21:27.373 回答

2 回答 2