我可以。Bootstrap 3和jQuery Mobile可以一起使用吗？

Question

我已经阅读了许多“Bootstrap vs. jQuery Mobile”的文章。很明显，它们都有不同的目标。那么将它们结合起来怎么样呢？

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

是否有专业项目将两者结合在一起？或者有人尝试过但失败了吗？

我知道使用Bootstrap与jQuery Mobile看起来像一个类似的问题，但它已经过时了（指Bootstrap 2）。

- Tillito

---

我个人不会将它们结合在一起，因为它们采用了两种完全不同的方法，使得将两者集成在一起非常困难。它们的目标在某种程度上并没有太大的区别，它们都是框架，为您提供构建用户界面所需的有用组件。 - reinder

你只是想让一个jQm网站具有响应性吗？你不需要另一个框架来实现这个功能。 - Evan Davis

正如我在问题中所写的：有人做过这个吗？或者有人试图做这个但失败了吗？我知道利弊，但这不是我的问题。如果您无法帮助，请不要投反对票！ - Tillito

回答你的问题：mathletics，我有几个项目要使用jqm或bootstrap或两者都用。我认为这个问题是有意义的：在项目开始阶段，我可以想象这样做是可行的，但当项目变得更加复杂时，处理起来可能会变得很麻烦。 - Tillito

这是一个很好的问题，因为jQuery Mobile CSS框架缺少在bootstrap中存在的许多有用的东西。Bootstrap3中的响应式表格非常棒。Wells、面板（不是jqm称之为面板的那种）、大量的字形图标和实用类。我手动挑选出大部分内容并添加到我的jqm项目中。 - asgeo1

实际上，我走了另一条路——使用Bootstrap来为我节省制作简单UI元素的时间，并编写了自己的AJAX导航系统/整合其他库（例如hammer.js）来处理诸如滑动事件之类的东西。我发现按照jQM的方式有时很繁琐，但按照Bootstrap的方式做事很少感到繁琐。 - Ben Y

Answer 1

结论 我不建议在复杂项目中将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。

- glimmer

---

好的信息，但是 www.sure-sense.com 挂了。 :-( - woolfie

Answer 2

个人认为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/

- Kim T

---

页面转换怎么样？ - A F

你可以在页面内容中使用两个 div，一个显示，一个隐藏在屏幕之外。你把内容加载到屏幕之外的页面中，然后将页面转换为可见状态，并在此之后将以前的页面隐藏在屏幕之外。 - Kim T

Answer 3

对于单人工作而言，我认为选择什么解决方案或组合并不重要，因为这是你自己和唯一的“你”来使它们发挥作用。

然而，对于团队工作而言，在公司甚至企业中，工作包括制作模板+实施应用程序，责任分别属于创意设计团队和IT团队。因此，最终的解决方案需要得到这两个团队的认可。

对于我们公司而言，创意设计团队倾向于使用BootStrap，因为他们被要求制作许多定制的特效网页模板，然而IT团队已经做了一些jQM应用程序，并且喜欢将其用于未来的开发工作，从而产生了冲突。

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

这是一个可惜但必须接受的选择。

- Scott Chu

Answer 4

在我的一个移动应用项目中，我决定同时使用Bootstrap和JQM。我使用了JQM小部件，然后专门使用Bootstrap来处理布局的结构。简单的原因是，我想要更好地控制网格，因为Bootstrap比JQM具有更多的网格，而JQM的布局控制非常有限。我还想使用跨越网格的功能，在Bootstrap中这是完全可能的，但在JQM中却不行。虽然可以通过覆盖一些CSS代码来实现我的目标，但这并不是明智的做法。

如果你计划做同样的事情，就准备好解决两个不同UI框架使用的命名约定之间的一些小冲突吧。

- sylenix