除此之外,我喜欢Bootstrap的响应式布局功能。另一方面,我也喜欢jQuery Mobile的“页面”方法和可能性(包括滑动事件等)以及转换效果。
是否有专业项目将两者结合在一起?或者有人尝试过但失败了吗?
我知道使用Bootstrap与jQuery Mobile看起来像一个类似的问题,但它已经过时了(指Bootstrap 2)。
结论 我不建议在复杂项目中将JQuery Mobile和Bootstrap组合使用。
JQM知识 我们正在构建一系列复杂的Web应用程序,全部使用JQuery Mobile(JQM)框架。我们已经花费了一年多时间进行这项工作,现在对JQM有相当合理的了解。
优点:其中一些功能非常有用,例如持久的页脚和移动友好组件,使HTML5应用程序具有非常本地化的感觉。 缺点:我们不得不禁用JQM的许多功能,例如预加载页面,以创建我们所需的复杂功能。
最终结果很好,因为我们已经骗过iOS开发人员,让他们认为它是本地的。
Bootstrap知识 我最近还使用Bootstrap制作了一个响应式网站,以宣传以上JQM产品,效果非常好(http://www.sure-sense.com)。
组合使用 我尝试将Bootstrap与JQM项目组合在一起,用于仪表板应用程序,但很快就发现这两个框架不兼容。 JQM的CSS覆盖了Bootstrap CSS上的组件,结果是一些组件看起来像JQM,而另一些则像Bootstrap。
个人认为jQuery Mobile拥有比您实际需要的更多功能,同时它会让您陷入一种不灵活的构建方式。当您有许多具有不同动画效果的面板时,它开始变得混乱和有缺陷,并且通常在很短时间内就可以完成80%的工作,但是完成自定义操作则需要很长时间。
我建议使用Twitter Bootstrap,然后添加插件以支持您需要的功能。
Bootstrap有许多非官方的插件,您可以添加这些插件来模仿jQuery Mobile的功能:http://bootsnipp.com/resources
这里有一个指南,只使用jQuery Mobile的滑动事件: http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/
或者,您可以使用自己的插件手动添加滑动事件: http://stephband.info/jquery.event.swipe/
如果您想要一个可扩展的侧边栏菜单,您可以轻松地自己添加它:
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
http://jsfiddle.net/Osis/Mns8q/ http://codepen.io/krichnafsky/pen/cuhkL http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/