logo标签列表

我可以同时使用Twitter Bootstrap和jQuery UI吗？

jquery-uitwitter-bootstrap
108
我正在使用Twitter Bootstrap，想要使用“自动建议”功能，但Bootstrap本身并不提供此功能。然而，jQuery UI 却有其自己的方法来实现“自动建议”。
我能同时使用两者吗？会导致带宽过载吗？
6
jQuery UI 的大小为 6.6k（压缩和gzip后），因此除非您的带宽以 kb 计量，否则这不会成为问题。 - BryanH
4
自从我发布这个问题以来，情况已经发生了变化。现在有很多适用于替代现有jQuery UI插件的Bootstrap插件。现在，我使用专为Bootstrap开发的插件。 - Sanket Sahu
1
为什么不使用 Twitter 的 Typeahead（http://twitter.github.io/typeahead.js/examples/）来实现自动建议？ - koppor
13个回答
83

请查看jquery-ui-bootstrap。以下是自README中的内容：

Twitter的Bootstrap是我最喜欢的2011年项目之一，但是经常使用后，我想要两件事情：

能够与jQuery UI并行工作（这导致了许多小部件在视觉上出现问题）；能够使用Bootstrap样式主题化jQuery UI小部件。虽然我喜欢jQuery UI，但我（和其他人一样）发现一些当前的主题看起来有点过时。我的希望是这个主题为其他有同感的人提供一个不错的替代选择。需要澄清的是，这个项目并不旨在取代Twitter Bootstrap。它仅提供了一个受Bootstrap设计启发的jQuery UI兼容主题。它还提供了一个版本的Bootstrap CSS，其中有一些（次要的）部分被注释掉，以使该主题可以与之并行工作。

62

仅作更新，Bootstrap v2不再与jQuery UI冲突。

https://github.com/twbs/bootstrap/issues/171

编辑：正如@Freshblood所述，仍然有一些冲突。但是，Twitter最初的帖子表明他们正在解决这个问题，而且它大部分运作良好，尤其是与v1相比。

10
你真的确定吗？我仍然看到jQuery日期选择器存在问题。 - Freshblood
1
请查看这个 jQuery UI 日期选择器 http://jqueryui.com/demos/datepicker/#dropdown-month-year 。正如您所看到的，使用这些设置后，日期选择器包含下拉框元素，因此 Bootstrap 已经覆盖了所有输入元素。但是，如果您不使用这些设置来使用日期选择器，则不会有任何问题。 - Freshblood
1
任何包含输入元素的小部件都会与 Twitter Bootstrap 的 CSS 样式发生冲突。 - Freshblood
1
否定。Bootstrap的按钮功能与jQuery UI不兼容，因为它们都定义了一个button()方法。 - BryanH
正如我的编辑所示，@BryanH，这是对v1的巨大改进，我认识到仍然存在一些问题。他们也解决了大多数样式冲突。 - Eonasdan
显示剩余2条评论
24

为了以后的参考（因为这是 Google 目前的最佳答案），要防止 jQuery UI 覆盖 Bootstrap 或您自定义的样式，您需要创建一个自定义下载，并选择 no-theme 主题。这将仅包括 jQuery UI 的重置，并不会为各种元素超载 Bootstrap 样式。

顺带一提，一些 jQuery UI 组件（如日期选择器）具有本地的 Bootstrap 实现。本地的 Bootstrap 实现将使用 Bootstrap CSS 类、属性和布局，因此应该与框架的其他部分更好地集成。

我在这里没有看到无主题主题：http://jqueryui.com/themeroller/。我错过了还是它不再存在？ - new name
3
请使用这个链接 http://jqueryui.com/download/。向下滚动页面并在列表中选择“无主题”（"No Theme"）。 - T0xicCode
3

根据我的有限经验，我也遇到了一些问题。似乎可以使用Bootstrap CSS样式对JQuery元素（如按钮）进行样式设置。然而，我创建了一个JQuery UI标签，并想要将一个仅使用Bootstrap input-append类的输入框锁定在每个标签底部时，只有第一个标签位置正确。因此，结合使用JQuery tabs和Bootstrap buttons可能不太可行。

2

Bootstrap仍然无法与Jquery UI一起使用，例如modal。Bootstrap具有漂亮的样式，但作为由Twitter支持的框架并不是那么好。

2

如果你遇到了JavaScript命名空间冲突的问题，可以使用Bootstrap的noConflict()函数，将其功能让给jQuery UI。

2
尽管这个问题特别提到了jQuery-UI自动建议功能，但问题标题更为通用：Bootstrap 3与jQuery UI兼容吗？我在使用jQUI datepicker（弹出式日历）时遇到了麻烦。我解决了datepicker的问题，并希望解决方案可以帮助其他jQUI/BS问题。
今天我花了很长时间尝试让最新的jQueryUI（版本1.12.1）datepicker与bootstrap 3.3.7一起工作。所出现的问题是日历会显示，但无法关闭。
结果证明是jQUI和BS的版本问题。我使用了最新版本的Bootstrap，并发现必须将jQUI和jQuery降级到以下版本：
jQueryUI-1.9.2（经过测试 - 可行）
jQuery-1.9.1或2.1.4（经过测试 - 两者都可行。其他版本可能也可行，但这两个版本可行。）
Bootstrap 3.3.7（经过测试 - 可行） 因为我想使用自定义主题，所以我还制作了一个定制版的jQUI下载（删除了一些不需要的交互、对话框、进度条和一些我不使用的效果），并确保在底部选择了"Cupertino"作为我的主题。
我进行了安装：
<head>
...etc...
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/cupertino/jquery-ui-1.9.2.custom.min.css">
<link rel="stylesheet" href="css/bootstrap-3.3.7.min.css">

<!-- <script src="js/jquery-1.9.1.min.js"></script> -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/bootstrap-3.3.7.min.js"></script>
...etc...
</head>

对于那些感兴趣的人，CSS文件夹长这样：

[css]
  - bootstrap-3.3.7.min.css
  - font-awesome.min.css
  - style.css
  - [cupertino]
      - jquery-ui-1.9.2.custom.min.css
      [images]
          - ui-bg_diagonals-thick_90_eeeeee_40x40.png
          - ui-bg_glass_100_e4f1fb_1x400.png
          - ui-bg_glass_50_3baae3_1x400.png
          - ui-bg_glass_80_d7ebf9_1x400.png
          - ui-bg_highlight-hard_100_f2f5f7_1x100.png
          - etc (8 more files that were in the downloaded jQUI zip file)
1
Kendo UI有一个漂亮的Bootstrap主题和一套可与jquery-UI相媲美的Web UI。他们还有一个开源版本，可以很好地与该主题配合使用。
1

如果不将它们存储在本地并使用提供的链接，您可能会获得更好的性能。在某些情况下，客户端可能已经缓存了脚本。至于jQueryUI的情况，我建议只有在必要时才加载它。 它们都被最小化了，但是您可以启动控制台并查看网络选项卡，以查看其加载时间。一旦它被初始下载，它将被缓存，因此您不必担心之后的问题。我的结论是，是的，同时使用它们，但使用CDN。

1

是的，你可以同时使用它们。Twitter 的 js bootstrap 是一组 jQuery 插件。它不应该与 jQuery UI 产生任何冲突。

关于带宽过载，这实际上取决于你如何处理加载所有 js 文件的请求。如果你真的不想向服务器发出多个请求来请求每个文件，只需将它们连接在一起并最小化即可。或者你可能可以摆脱一些你不需要的 js bootstrap 插件。它非常模块化。

4
所有的 JS 都有正确的命名空间，但你需要担心的是 CSS 冲突：如果在 Bootstrap 标签页中包含 JUI 窗口小部件，哪个会优先显示？ - btown
不仅仅是 jQuery 的 CSS 在 Bootstrap 中看起来很糟糕。Bootstrap 经常进行全面的 CSS 更改，通常使用 !important，我发现自己经常不得不覆盖和修复这些更改，有时候还要用一些笨拙的代码。我讨厌 Bootstrap，并且不鼓励使用它，至少在它停止干扰不使用 Bootstrap 类的元素之前。（这并不是原始设计师的错，我怀疑 Twitter 的原始开发人员没有预料到他们所开发的东西会成为一个流行的库。） - Michael Scheper
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接