Question

我正在使用Twitter Bootstrap，我想使用Bootstrap中没有的“自动建议”，而jQuery UI有自己的自动建议方法。

我可以同时使用吗？它会超载带宽吗？

Answer 1

结帐jquery-ui-bootstrap。来自自述文件：

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

与jQuery UI并行工作的能力（某些东西   导致一些小部件在视觉上破坏）主题的能力   使用Bootstrap样式的jQuery UI小部件。虽然我喜欢jQuery UI，但我   （和其他人一样）发现一些当前的主题看起来有点过时了。   我希望这个主题为其他人提供了一个不错的选择   感觉一样。为了澄清，该项目并非旨在或打算这样做   取代Twitter Bootstrap。它仅提供与jQuery UI兼容的功能   主题灵感来自Bootstrap的设计。它还提供了一个版本   带有几个（次要）部分的Bootstrap CSS注释掉了哪些启用   与之合作的主题。

Answer 2

只是为了更新它，bootstrap v2不再与jquery ui冲突

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

编辑：作为@Freshblood，有一些事情仍然存在冲突。然而，正如最初发布的Twitter表明，他们正在研究这个问题并且它在很大程度上有效，特别是与v1相比。

Answer 3

为了将来参考（因为这是谷歌的最佳答案ATM），为防止jQuery UI覆盖引导程序或您的自定义样式，您需要创建自定义下载并选择no-theme主题。这将只包括jQuery UI的重置，而不是为各种元素重载bootstrap的样式。

虽然我们正在使用它，但是一些jQuery UI组件（例如datepicker）具有本机引导程序实现。本机引导实现将使用引导程序css类，属性和布局，因此应该与框架的其余部分更好地集成。

Answer 4

在我有限的经历中，我也遇到过各种各样的问题。似乎可以使用bootstrap CSS设置JQuery元素（例如按钮）的样式。但是，我遇到的问题是创建了一个JQuery UI选项卡，并且希望仅将引导程序锁定输入（使用input-append类）锁定到每个选项卡的底部，只有第一个正确放置。所以，JQuery选项卡+ Bootstrap按钮=可能不是。

Answer 5

Bootstrap仍然无法使用Jquery UI，例如modal.Bootstrap具有不错的风格，但作为一个框架与Twitter背后不是很好。

Answer 6

如果你遇到了javascript命名空间冲突，你可以使用Bootstrap的noConflict()函数让它放弃jQuery UI的功能。

Answer 7

虽然这个问题特别提到了jQuery-UI autosuggest功能，但问题标题更为通用：bootstrap 3是否可以与jQuery UI一起使用？我在使用jQUI日期选择器（弹出日历）功能时出现问题。我解决了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的自定义下载（删除了一些内容，如所有交互，对话框，进度条和一些我不会使用的效果） - 并确保选择＆＃34; Cupertino＆＃34;在底部作为我的主题。

我安装了它们：

docker run -d -p 8080:80 tutum/apache-php -v /Users/user-name-here/apache-php/sample:/app/

对于那些感兴趣的人，CSS文件夹看起来像这样：

<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>

Answer 8

如果不在本地存储并使用它们提供的链接，则可能会提高性能。在某些情况下，客户端可能已经缓存了脚本。至于jQueryUI的情况，我建议不要在必要时加载它。它们都被最小化了，但你可以启动控制台并查看网络选项卡，看看加载它需要多长时间，一旦它最初下载它将被缓存，所以你不应该担心它。我的结论将是是的，使用它们但使用CDN

Answer 9

是的，你可以同时使用两者。来自twitter的js bootstrap是jquery插件的集合。 shhould与jQuery UI没有任何冲突。

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

Answer 10

Kendo UI有一个很好的bootstrap theme here和一组可与jquery-UI相媲美的网页用户界面。他们还有一个open source version，可以很好地适应主题。

Answer 11

我使用jquery ui开发了网站，我只是尝试插入引导程序以供将来开发和样式化，但它几乎打破了所有内容。

所以不，他们不兼容。

Answer 12

因为这是谷歌在 jquery ui和bootstrap.js 上的最佳结果，所以我决定将其添加为社区维基。

我正在使用：

Bootstrap v3.2.0
的jquery-2.1.0
的jquery-UI-1.10.3

以某种方式，当我包含bootstrap.js时，它会禁用jquery ui autocomplete的下拉列表。

我的三个解决方法：

不包括bootstrap.js
或更多来预先输入lib
从bootstrap.js移动到bootstrap.min.js（很奇怪，但为我工作）

Answer 13

data-role =“none”是使它们协同工作的关键。您可以应用要引导触摸的元素，但jquery mobile要忽略。像这样 input type =“text”class =“form-control”placeholder =“Search” data-role =“none”

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

13 个答案: