我可以将 bootstrap 3 与 jQuery Mobile 一起使用吗？答案

【问题标题】：Can I use bootstrap 3 together with jQuery Mobile?我可以将 bootstrap 3 与 jQuery Mobile 一起使用吗？
【发布时间】：2013-09-09 07:44:55
【问题描述】：

我读过很多“bootstrap vs. jQuery mobile”的文章。很明显，他们都有不同的目标。那么将它们结合起来呢？

除此之外，我喜欢 bootstrap 的响应式布局功能。另一方面，我也喜欢“页面”方法以及 jQuery mobile（包括滑动事件等）和转换的可能性。

是否有将两者结合的专业项目？还是有人尝试这样做但失败了？

我知道Using Bootstrap with jQuery Mobile 看起来像一个类似的问题，但它已经过时了（参考引导程序 2）。

【问题讨论】：

我个人不会将它们结合起来，因为它们采用了两种完全不同的方法，很难将两者结合起来。它们的目标在一个方面并没有什么不同，它们都是为您提供构建用户界面的有用组件的框架。
您只是想让 jQm 网站响应式吗？你不需要另一个框架。
正如我在问题中所写：有没有人这样做或者有人试图徒劳地这样做？我知道利弊，但这不是我的问题。如果您帮不上忙，请不要投反对票！
回答你的问题，数学：我有几个项目，我将使用 jqm 或 bootstrap 或两者。而且我认为这个问题是有道理的：我可以想象它会在一开始就解决，但是当项目变得越来越复杂时，处理起来就会变得很麻烦。
我实际上已经走了另一条路——使用 Bootstrap 来节省时间，它使用简单的 UI 元素为我节省了时间，并推出了我自己的 AJAX 导航系统/合并了其他库，如hammer.js，用于滑动等操作事件。我发现有时必须以 jQM 的方式做事很麻烦，但很少用 Bootstrap 的方式来做。

标签： javascript jquery css jquery-mobile twitter-bootstrap

【解决方案1】：

结论对于复杂的项目，我不建议将 JQuery Mobile 和 Bootstrap 结合使用。

JQM 知识 我们正在使用 JQuery Mobile (JQM) 框架构建一系列复杂的 Web 应用程序。我们花了一年多的时间来制作这个，现在对 JQM 有了相当的了解。

优点：一些功能非常有用，例如持久页脚和移动友好组件，它们为 HTML5 应用程序提供了一种非常原生的感觉。缺点：我们不得不禁用 JQM 的很多功能，例如预加载页面来创建我们需要的复杂功能。

最终结果很好，因为我们欺骗了 iOS 开发人员，让他们认为它是原生的。

引导知识 我最近还使用引导程序制作了一个响应式网站来宣传上述 JQM 产品，效果非常好 (http://www.sure-sense.com)。

组合我尝试将引导程序与仪表板应用程序上的 JQM 项目结合起来，但这很快就凸显出这两个框架不兼容。 JQM 的 CSS 将组件标记在 bootstrap CSS 之上，结果是一些组件看起来像 JQM，而另一些组件看起来像 bootstrap。

【讨论】：

不错的信息，但 www.sure-sense.com 已关闭。 :-(

【解决方案2】：

我个人认为 jQuery Mobile 的功能比您真正需要的要多，而且它也将您锁定在一种不灵活的构建方式中。当您有许多具有不同动画的面板时，它开始变得混乱和混乱，通常很快就能完成 80% 的工作，但随后需要很长时间才能完成自定义操作。

我会使用 twitter 引导程序，然后添加插件以支持您需要的功能。

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/

【讨论】：

页面转换呢？
您可以为页面内容设置两个 div，一个显示，一个隐藏在屏幕外。您将内容加载到屏幕外页面中，然后将页面转换为视图，然后将上一页隐藏在屏幕外

【解决方案3】：

对于一个人的工作，我认为选择什么单一的解决方案或组合并不重要，因为只有你自己和唯一的“你”才能让他们工作。

但是，对于一个团队工作，在公司甚至企业中，工作包含制作模板+实施应用程序，分别由创意设计团队和IT团队负责。所以最终的解决方案需要这两个团队都可以接受。

对于我们公司来说，CD 团队倾向于使用 BootStrap，因为他们被要求制作许多自定义的、特效的 web 模板，但是 IT 团队已经做了一些 jQM 应用程序，他们喜欢将其用于未来的开发工作，因此产生了冲突.

从长远来看，“用户需求”克服了冲突，我们现在将使用 BootStrap 模板，并尽量避免在我们的主要移动 Web 应用程序开发中使用 jQM。

一个可怜但需要接受的选择。

【讨论】：

【解决方案4】：

在我的一个移动应用项目中，我决定同时使用 Bootstrap 和 JQM。我使用了 JQM 小部件，然后使用专用的 Bootstrap 来处理布局的结构。原因很简单，我想要更好地控制网格，因为 Bootstrap 的网格数量比 JQM 的布局控制非常有限。我还想使用跨网格，这在 Bootstrap 中很有可能，但在 JQM 中却没有。虽然覆盖一些 CSS 代码可能能够实现我在 JQM 中的目标，但这并不是明智之举。

如果您打算做同样的事情，请准备好修复两个不同 UI 框架使用的命名约定中的一些小冲突。

【讨论】：