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

有没有人有任何经验,从使用jQuery UI Bootstrap?这就是我想做的,但在我这样做之前,我想知道我可能会面临什么问题。


我有几个项目。

在我看来这是最大的不同

jQuery UI is fallback safe, it works correctly and looks good in old browsers, where Bootstrap is based on CSS3 which basically means GREAT in new browsers, not so great in old Update frequency: Bootstrap is getting some great big updates with awesome new features, but sadly they might break previous code, so you can't just install bootstrap and update when there is a new major release, it basically requires a lot of new coding jQuery UI is based on good html structure with transformations from JavaScript, while Bootstrap is based on visually and customizable inline structure. (calling a widget in JQUERY UI, defining it in Bootstrap)

那么选择什么呢?

这取决于你所从事的项目类型。是看起来又酷又快的小部件更好,还是您的用户经常使用旧的浏览器?

我总是两者都用,所以我可以利用两个世界的优点。

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

jQuery UI 引导


两者都可以使用,问题相对较少。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包括腻子和IE特定代码,将允许所有功能在IE 6,7,8和9中工作。

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

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


我们两者都用过,我们喜欢Bootstrap,因为它的简单性和它被开发和增强的速度。jQuery UI的问题在于它以蜗牛的速度移动。像菜单栏、树形控件和数据网格等常见功能的推出需要数年时间,这些功能一直处于计划/开发阶段。我们等啊等,等啊等,最后放弃了,在我们的产品http://dblite.com中使用了ExtJS等其他库。

Bootstrap在很短的时间内提供了一套非常全面的特性,我相信它很快就会超过jQuery UI。

所以我认为没有必要使用最终会过时的东西……


在使用了这两种技术之后,Twitter的Bootstrap是一套优秀的技术。这里有一些区别,

Widgets: jQuery UI wins here. The date widget it provides is immensely useful, and Twitter Bootstrap provides nothing of the sort. Scaffolding: Bootstrap wins here. Twitter's grid both fluid and fixed are top notch. jQuery UI doesn't even provide this direction leaving page layout up to the end user. Out of the box professionalism: Bootstrap using CSS3 is leagues ahead, jQuery UI looks dated by comparison. Icons: I'll go tie on this one. Bootstrap has nicer icons imho than jQuery UI, but I don't like the terms one bit, Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical. Images & Thumbnails: goes to Bootstrap, jQuery UI doesn't even help here.

其他的笔记,

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