Twitter Bootstrap vs jQuery UI？ [关闭]答案

【问题标题】：Twitter Bootstrap vs jQuery UI? [closed]Twitter Bootstrap vs jQuery UI？ [关闭]
【发布时间】：2012-04-04 16:09:40
【问题描述】：

我一直在使用 jQuery UI 进行一些基本的页面增强。按钮和输入样式和模式对话框。现在我遇到了 Bootstrap，它看起来还不错。

有没有人从使用 jQuery UI 到 Bootstrap 的经验？这是我想做的事情，但在我这样做之前，我想知道我可能面临哪些问题。

【问题讨论】：

一个可能的解决方案在被问到这个问题时可能不可用... Addy Osmani 和他的团队一直在努力合并这两者——如果你被困在它们之间，请查看并查看也许你可以得到你想要的一切！ - addyosmani.github.io/jquery-ui-bootstrap
如何更新（2014 年！）答案？任何人都可以在这里开始赏金吗？
来自 Bootstrap 网站——“Bootstrap 一次只支持一个模式窗口。不支持嵌套模式，因为我们认为它们是糟糕的用户体验。” -- 好悲伤。

标签： javascript jquery jquery-ui twitter-bootstrap

【解决方案1】：

我有几个项目。

我认为最大的不同

jQuery UI 是后备安全的，它可以正常工作并且在旧浏览器中看起来不错，其中Bootstrap 基于 CSS3，这基本上意味着在新浏览器中非常好，在旧浏览器中不太好
李>
更新频率：Bootstrap 正在获得一些具有很棒的新功能的重大更新，但遗憾的是它们可能会破坏以前的代码，所以当有新的主要版本时，你不能只安装 bootstrap 和更新，它基本上需要很多新的编码
jQuery UI 基于良好的 html 结构并从 JavaScript 转换而来，而 Bootstrap 则基于可视化和可定制的内联结构。（在 JQUERY UI 中调用一个小部件，在 Bootstrap 中定义它）

那么选择什么？

这始终取决于您正在进行的项目类型。酷炫且快速的小部件更好，还是您的用户经常使用旧浏览器？

我总是最终同时使用两者，所以我可以两全其美。

这里是两个框架的链接，如果您决定使用它们。

【讨论】：

-感谢您花时间回答。我的需求是在 IE9 或其他具有相当好的 CSS3 支持的更高版本浏览器上工作。 Bootstrap 开始对我很好。一个问题。我正在使用 ASP.MVC。我注意到需要更少的东西。 Boostrap 能否在 Microsoft ASP MVC 平台上正常工作？ “少”在哪里适合？
可以将less文件编译成.css文件。构建引导程序（使用 make），将创建准备使用的 CSS 文件。这样你就不需要少用了。
LESS 是一个 CSS 框架。使用 Boostrap 绝对不需要它（它们有常规的 CSS / JS 版本），但是使用 LESS，您可以轻松地在 CSS 中制作变量（更改颜色等），使其依赖，具有功能。请参阅此处：lesscss.org，.NET 中的编译器有一个 BETA 版本，请参阅：dotlesscss.org
你如何使用“两全其美”？我得到的最接近的是使用jQueryUI Bootstrap（基本上是一个jQueryUI主题），但它仍然是设计好的对于 Bootstrap 1.4，而不是 2.0，在尝试将 JS 用于按钮等时会发生冲突。
@PhoenixX_2 我试试！示例：在引导程序中，您在按钮元素上编写所有类（即button button-primary button-small，在 jQueryUI 中，您将元素分配为按钮，即只需添加“btn”，然后通过 JS 将其设为按钮$(".btn").button()。这意味着在 Bootstrap 中您可以在 HTML 中定义它，而在 jQueryUI 中您在 JS 中定义它。如果您更新/更改某些内容（即 Bootstrap 版本），则 Bootstrap 的负面影响是您需要编辑 HTML，而 jQueryUI 您只需要更改您的JS 这通常更容易。两者都有积极和消极的一面！:)

【解决方案2】：

同时使用了两者，Twitter 的 Bootstrap 是一个卓越的技术集。以下是一些差异，

Widgets：jQuery UI 在这里获胜。它提供的日期小部件非常有用，而 Twitter Bootstrap 没有提供任何此类功能。
脚手架：Bootstrap 在这里获胜。 Twitter 的流动和固定网格都是一流的。 jQuery UI 甚至不提供这个方向，将页面布局留给最终用户。
开箱即用的专业精神：使用 CSS3 的 Bootstrap 遥遥领先，相比之下 jQuery UI 显得过时了。
图标：我会在这个上打个结。 Bootstrap has nicer icons imho 比 jQuery UI，但我一点也不喜欢这些术语，Glyphicons Halflings 通常不是免费提供的，但 Bootstrap 和 Glyphicons 创建者之间的安排使这成为可能，因为您无需支付任何费用开发商。为表示感谢，我们要求您在可行的情况下提供一个可选的 Glyphicons 链接。
图像和缩略图：goes to Bootstrap，jQuery UI 在这里甚至没有帮助。

其他说明，

了解这两种技术如何在这些领域竞争也很重要。有很多重叠，但如果你想要简单的脚手架和固定/流体创建 Bootstrap 不是另一种技术，它是最好的技术。如果你想要任何一个小部件，jQuery UI 可能甚至不在前三名。今天，jQuery UI 主要只是一个玩具，用于使用统一框架创建客户端小部件的一致性和概念验证。

【讨论】：

【解决方案3】：

您可以同时使用这两种方法，但问题相对较少。 Twitter Bootstrap 使用 jQuery 1.7.1（在撰写本文时），我想不出为什么不能将额外的 Jquery UI 组件集成到 HTML 模板中。

我一直在使用在 Initializr.com 构建的 HTML5 Boilerplate 和 Twitter Bootstrap 的组合。这将两个很棒的入门模板组合成一个很棒的入门项目。查看http://html5boilerplate.com/ 和http://www.initializr.com/ 的详细信息，或者马上开始使用，转到http://www.initializr.com/，单击“Bootstrap 2”按钮，然后单击“下载”。这将为您提供入门所需的所有 js 和 css。

不要被 HTML5 和 CSS3 吓到。 Initializr 和 HTML5 Boilerplate 包括 polyfill 和 IE 特定代码，这些代码将允许所有功能在 IE 6、7、8 和 9 中工作。

在 Twitter Bootstrap 中使用 LESS 也是可选的。他们使用 LESS 来编译 Bootstrap 使用的所有 CSS，但如果您只想覆盖或添加自己的样式，他们会为此提供一个空的 css 文件。

还有一个空白的js文件（script.js）供你添加自定义代码。您可以在此处为其他 jQueryUI 组件添加处理程序或选择器。

【讨论】：

很好的答案。快速的问题很棘手，jquery ui 真正提供了什么，而不是 twitter bootstrap 及其插件中不包含的内容？
抱歉，刚看到这个。至于 js 小部件，jQuery UI 有一个日期选择器和滑块，它们不包含在 Bootstrap 中。 jqUI 还包括交互和效果，例如拖放、显示/隐藏动画、类切换等等。将 jqUI 的交互与 Bootstrap 的布局组件结合起来可以是一个非常强大的组合。
一个需要注意的问题；两个项目都以不兼容的方式定义 $.fn.button。

【解决方案4】：

我们都使用过，我们喜欢 Bootstrap 的简单性以及开发和增强的速度。 jQuery UI 的问题在于它以蜗牛的速度发展。推出菜单栏、树控件和 DataGrid 等一直处于规划/开发阶段的通用功能需要数年时间。我们等了等，终于放弃了，使用了 ExtJS 等其他库作为我们的产品http://dblite.com。

Bootstrap 在很短的时间内提供了相当全面的功能集，我相信它很快就会超过 jQuery UI。

所以我认为使用最终会过时的东西没有意义......

【讨论】：

一切终将过时。做任何事都没有意义。
没错，我们只需要选择一个我们认为能坚持更长时间的那个。
不，您只需要选择能够从您的客户那里获得收益的那个。一旦你让它工作了，它应该会继续工作一段时间，即使它已经过时了，所以唯一真正关心的是钱。