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

108

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

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

jquery-ui  twitter-bootstrap 
— Sanket Sahu
source
6
jQuery UI为6.6k（最小化并压缩），因此除非您的带宽以kb为单位进行度量，否则这不会成为问题。
— BryanH
4
自从我发布了这个问题以来，事情已经发生了变化。现在，有很多Bootstrap插件足以替代现有的jQuery UI插件。现在，我将Bootstrap与用于bootstrap的插件一起使用。
— Sanket Sahu 2013年
1
为什么不使用Twitter的typeahead（twitter.github.io/typeahead.js/examples）进行自动提示？
— koppor

Answers:

83

查看jquery-ui-bootstrap。从自述文件：

Twitter的Bootstrap是我在2011年发布的最喜欢的项目之一，但是定期使用它使我想要两件事：

与jQuery UI并肩使用的能力（使许多小部件在视觉上中断的功能）使用Bootstrap样式为jQuery UI小部件设置主题的功能。尽管我喜欢jQuery UI，但我（和其他人一样）发现一些当前主题看起来有些过时。我希望这个主题为其他感觉相同的人提供一个体面的选择。需要澄清的是，该项目并非旨在或无意取代Twitter Bootstrap。它仅提供受Bootstrap设计启发的jQuery UI兼容主题。它还提供了Bootstrap CSS版本，其中注释了几个（次要）部分，使主题可以与主题一起使用。

— 山姆·多兰
source
62

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

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

编辑：作为@Freshblood，有些事情仍然存在冲突。但是，正如最初发布的那样，Twitter暗示他们正在努力进行此工作，并且与v1相比尤其有效。

— Eonasdan
source
10
您真的确定吗？我仍然看到jquery
— datepicker
我建议您使用bootstrap v2和jquery ui并创建一个空的测试页以验证它不是您的代码。我没有问题，因为新版本
— Eonasdan
1
请检查此jquery ui datepicker jqueryui.com/demos/datepicker/#dropdown-month-year。如您所见，datepicker包含dropdownbox元素，因此引导程序已覆盖所有输入元素。但是，如果不对这些设置使用datepicker，则不会有任何问题。
— Freshblood
1
任何包含输入元素的小部件都将与twitter bootstrap css样式冲突。
— Freshblood
1
负面的。Bootstrap的按钮功能都不能与jQuery UI一起使用，因为它们都定义了一个button()方法。
— BryanH
24

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

在此过程中，某些jQuery UI组件（例如datepicker）具有本机引导程序实现。本机引导程序实现将使用引导程序CSS类，属性和布局，因此应与框架的其余部分更好地集成。

— T0xic代码
source
我在这里看不到没有主题的主题：jqueryui.com/themeroller。我想念它了吗？
— 盖芬2014年
3
jqueryui.com/download是您应该使用的链接。滚动到底部，然后在列表中选择“无主题”。
— T0xicCode 2014年
3

以我有限的经验，我也遇到一些问题。看来可以使用Bootstrap CSS设置JQuery元素（如按钮）的样式。但是，我遇到了创建JQuery UI选项卡并希望将仅引导程序输入（使用input-append类）锁定到每个选项卡底部的问题，只有第一个正确放置。因此，JQuery选项卡+ Bootstrap按钮=可能不是。

— 磁通电容器
source
2

如果遇到javascript名称空间冲突，则可以使用Bootstrap的noConflict()功能使其成为jQuery UI的功能。

— 用户名
source
2

尽管此问题专门提到了jQuery-UI自动建议功能，但问题标题更为笼统：bootstrap 3是否可用于jQuery UI？我在使用jQUI datepicker（弹出日历）功能时遇到了麻烦。我解决了datepicker问题，希望该解决方案可以解决其他jQUI / BS问题。

今天，我很难获得最新的jQueryUI（1.12.1版）日期选择器以与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)
— 茜草属
source
1

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

— 安德烈
source
1

是的，您可以同时使用两者。twitter的js bootstrap是jquery插件的集合。与jQuery UI不应有任何冲突。

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

— 本尼·贾
source
4
所有JS都有正确的命名空间，但是您需要担心的是CSS冲突：如果在Bootstrap选项卡中包含JUI小部件，那么优先级是什么？
— btown 2012年
在Bootstrap中看起来不好的不仅是jQuery的CSS。Bootstrap通常使用进行CSS的全面更改，!important我发现自己经常不得不覆盖和修复，有时还要使用骇人的代码。我讨厌Bootstrap并不鼓励使用它，至少直到它停止与不使用Bootstrap类的元素混为一谈为止。（这不是原始设计师的错-我怀疑Twitter的原始开发人员期望他们正在努力成为一个受欢迎的图书馆。）
— Michael Scheper 2015年
0

我有使用jquery ui开发的网站，我只是尝试插入引导程序以用于将来的开发和样式设置，但是它实际上破坏了所有内容。

所以不，它们不兼容。

— 尼姆·坎普斯基
source
0

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

我在用：

  • 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（很奇怪，但对我有用）
— 2转
source
jQuery ui引导程序的组合也禁用了工具提示和日期选择器。
— Vipul Hadiya 2014年
-3

data-role =“ none”是使它们协同工作的关键。您可以将其应用于想要引导程序触及而忽略jquery mobile的元素。像这样的输入type =“ text” class =“ form-control” placeholder =“ Search” data-role =“ none”

— 迪内什·赫塔帕尔
source
1
这个问题是关于bootstrap和jquery-ui的，而不是关于jquery mobile的
— TJ
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.