Twitter Bootstrap与jQuery UI？[关闭]

214

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

有没有从使用jQuery UI到Bootstrap的经验？这是我想做的事情，但是在我这样做之前，我想知道我可能会遇到什么问题。

4

当被问到这时，可能还没有一个可能的解决方案... Addy Osmani和他的团队一直在努力将两者合并-如果您陷入两者之间，请检查一下，也许您可以得到所需的一切！- addyosmani.github.io/jquery-ui-bootstrap

— 路灯

1

如何更新（2014！）答案？有人可以在这里开始赏金吗？

— 彼得·克劳斯

来自Bootstrap网站-“ Bootstrap一次仅支持一个模态窗口。不支持嵌套模态，因为我们认为嵌套模态是不良的用户体验。” -悲痛。

— 乔治·贝尔

133

我有几个项目。

我认为最大的不同

jQuery UI是后备安全的，它可以正常工作并且在旧的浏览器中看起来不错，其中Bootstrap基于CSS3，这在新的浏览器中基本上意味着GREAT，而在旧的浏览器中则不那么出色
更新频率：Bootstrap有了一些很棒的新功能，进行了重大更新，但可悲的是，它们可能会破坏以前的代码，因此，您不能只安装Bootstrap并在有新的主要版本时进行更新，它基本上需要大量的新代码
jQuery UI基于良好的html结构，并具有JavaScript的转换功能，而Bootstrap基于外观和可自定义的内联结构。（在JQUERY UI中调用小部件，在Bootstrap中定义它）

那么该选择什么呢？

这始终取决于您正在处理的项目类型。美观，快速的小部件会更好吗，还是您的用户经常使用旧的浏览器？

我总是同时使用两种方法，因此可以同时使用两种方法中的最佳方法。

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

— 马可·约翰内森
source

2

-感谢您抽出宝贵的时间回答。我需要在IE9或其他具有相当好的CSS3支持的更高版本的浏览器上工作的工具。Bootstrap对我来说看起来不错。一个问题。我正在使用ASP.MVC。我注意到一些需要更少的东西。Boostrap是否可以在Microsoft ASP MVC平台上正常工作？“较少”适合哪里？

— 杰西卡

您可以将较少的文件编译为.css文件。构建引导程序（使用make），将创建准备使用的CSS文件。这样，您就不需要使用更少的东西。

— mikaelb 2012年

3

LESS是一个CSS框架。完全不需要使用Boostrap（它们具有常规的CSS / JS版本），但是通过LESS，您可以轻松地在CSS中创建可变字符（更改颜色等），使其依赖并具有功能。参见此处：lesscss.org，.NET中有一个适用于编译器的Beta

— Marco Johannesen12年

20

您甚至如何使用“两全其美”？我已经得到的最接近的是使用jQueryUI的引导（基本上是jQueryUI的主题），但仍然是设计为引导1.4，而不是2.0，并试图冲突时使用JS的按钮等有

— 亚当证券

3

@ PhoenixX_2生病了！示例：在bootstrap中，您将所有类都写在button元素上（即button button-primary button-small，在jQueryUI中，您将元素分配为按钮，即只需添加“ btn”，然后通过JS使其成为按钮$(".btn").button()。这意味着在Bootstrap中，在HTML中定义它，然后在jQueryUI中在JS中定义它。如果在jQueryUI上更新/更改某些内容（即Bootstrap版本），则Bootstrap上的负数就是您需要编辑HTML，而这通常更容易。两者都有正负！:)

— Marco Johannesen

73

两者都使用过后，Twitter的Bootstrap是一种出色的技术组合。这里有一些区别，

小部件：jQuery UI在这里胜出。它提供的日期小部件非常有用，而Twitter Bootstrap则不提供任何东西。
脚手架：Bootstrap在这里胜出。Twitter的网格既固定又固定。jQuery UI甚至没有提供此方向，而将页面布局留给最终用户使用。
开箱即用的专业性：使用CSS3的Bootstrap处于领先地位，而jQuery UI相比之下显得过时。
图标：我会绑上这个。Bootstrap的图标比jQuery UI 更好，但我不喜欢这些术语，Glyphicons Halflings通常不是免费提供的，但是Bootstrap和Glyphicons创造者之间的安排使开发者无需付出任何代价。谢谢您，我们要求您在可行时包括一个指向Glyphicons的可选链接。
图片和缩略图：转到Bootstrap，jQuery UI甚至在这里都没有帮助。

其他注意事项

重要的是要了解这两种技术如何在各个领域竞争。有很多重叠之处，但是如果您想要简单的脚手架和固定/流体创建，Bootstrap不是另一种技术，那么它就是最好的技术。如果您只需要单个窗口小部件，则jQuery UI可能甚至不在前三名中。如今，jQuery UI主要只是一个玩具，它为使用统一框架创建客户端小部件提供了一致性和概念证明。

— 埃文·卡洛尔
source

34

您可以同时使用相对较少的问题。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包括polyfills和IE特定代码，这些代码将允许所有功能在IE 6、7 8和9中运行。

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

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

— eterps
source

好答案。很难回答的一个问题是，与twitter引导程序及其插件未包含的jQuery ui相比，jQuery ui真正提供了什么？

— MindWire

5

对不起，刚刚看到了这个。就js小部件而言，jQuery UI具有日期选择器和滑块，它们不包含在Bootstrap中。jqUI还包括交互作用和效果，例如拖放，显示/隐藏动画，类切换等。将jqUI的交互与Bootstrap的布局组件结合在一起是一个非常强大的结合。

— 2012年

6

需要注意的一个问题；这两个项目都以不兼容的方式定义$ .fn.button。

— 李维

27

我们两者都使用过，并且我们喜欢Bootstrap，因为它的简单性以及其开发和增强的速度。jQuery UI的问题在于它以蜗牛的步伐前进。推出菜单栏，树控件和数据网格等通用功能需要数年之久，而这些功能始终处于计划/开发阶段。我们等了再等，最后放弃了，并为我们的产品http://dblite.com使用了其他ExtJS库。

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

因此，我认为使用最终会过时的东西毫无意义...

— 拉吉夫
source

43

一切最终都将过时。做任何事情都是没有意义的。

— tilgovi

6

没错，我们只需要选择一个我们认为可以保持更长久的市场。

— 拉吉夫

8

不，您只需要选择一种可以从客户那里赚钱的东西。一旦它开始工作，即使它过时了，它也应该继续工作一段时间，因此，唯一真正关心的是金钱。

— 亚当