I have read many "bootstrap vs. jQuery mobile" articles. It is quite clear that they both have different aims. So what about combining them?
我读过很多关于“bootstrap vs. jQuery mobile”的文章。很明显，他们都有不同的目标。那么把它们结合起来呢?
Besides other, I like the responsive layout features of bootstrap. On the other hand I also like the "page" approach and the possibilities of jQuery mobile (including swipe events etc.) and transitions.
除此之外，我还喜欢bootstrap的响应式布局特性。另一方面，我也喜欢“页面”方法以及jQuery mobile(包括滑动事件等)和转换的可能性。
Are there professional projects combining both? Or anybody tried to do so and failed?
是否有专业项目两者结合?还是有人试图这么做却失败了?
I know Using Bootstrap with jQuery Mobile looks like a similar question but it is outdated (refering to bootstrap 2).
我知道用jQuery Mobile使用Bootstrap看起来像一个类似的问题，但它已经过时了(参考Bootstrap 2)。
3 个解决方案
#1
43
Conclusion I would not recommend combining JQuery Mobile and Bootstrap for complex projects.
结论:对于复杂的项目，我不建议将JQuery Mobile和Bootstrap结合使用。
JQM Knowledge We are building a series of sophisticated web application all using the JQuery Mobile (JQM) Framework. We have spent over a year producing this and now have pretty reasonable knowledge of JQM.
JQM知识我们正在使用JQuery Mobile (JQM)框架构建一系列复杂的web应用程序。我们花了一年多的时间来编写这个程序，现在对JQM有了相当合理的了解。
Positives: Some of the features are useful such as persistent footers and the mobile friendly components which give the HTML5 app a pretty native feel. Negatives: We have had to disable quite a lot of features of JQM such as preloading pages to create the complex functionality we required.
优点:一些特性是有用的，比如持久页脚和移动友好的组件，这给HTML5应用带来了一种非常本土的感觉。缺点:我们必须禁用JQM的许多特性，比如预加载页面，以创建我们需要的复杂功能。
The end result is good as we have fooled iOS developers into thinking it was native.
最终的结果是好的，因为我们已经愚弄了iOS开发人员，认为它是原生的。
Bootstrap Knowledge I have also recently produced a responsive website using bootstrap to advertise the above JQM product and that has worked out very well (http://www.sure-sense.com).
Bootstrap Knowledge我最近还制作了一个响应性的网站，使用Bootstrap宣传上述JQM产品，效果非常好(http://www.sure-sense.com)。
The Combo I tried to combine the bootstrap with the JQM project on a dashboard application but that has quickly highlighted that the 2 frameworks are not compatible. The CSS of JQM marks up the components on top of the bootstrap CSS and the results are some components looking like JQM and others like bootstrap.
我尝试将bootstrap与仪表板应用程序上的JQM项目结合在一起，但很快就强调了这两个框架不兼容。JQM的CSS标记了引导CSS上的组件，结果是一些类似JQM的组件和其他类似bootstrap的组件。
#2
26
Personally I think jQuery Mobile has more features than you really need, also it locks you into a way of building which isn't flexible. It starts to get buggy and messy when you have many panels with different animations and usually gets you 80% of the way very quickly, but then takes a long time to do custom things.
我个人认为jQuery手机拥有比你真正需要的更多的功能，而且它将你锁在一种不灵活的构建方式中。当你有很多带有不同动画的面板时，它开始变得混乱和混乱，通常会让你快速完成80%的工作，但是之后要花很长时间来做定制的事情。
I would use twitter bootstrap and then add plugins to support features you need.
我将使用twitter引导，然后添加插件来支持您需要的特性。
Bootstrap has lots of unofficial plugins you can add to imitate the functionality of jQuery Mobile: http://bootsnipp.com/resources
Bootstrap有很多非官方插件，您可以添加它们来模仿jQuery Mobile的功能:http://bootsnipp.com/resources
there is a guide here to use the swipe events from jQuery Mobile only: http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/
这里有一个使用jQuery Mobile滑动事件的指南:http://lazcreative.com/blog/adding-swipe- supporttobootstrap -carousel-3-0/
Or you can use your own plugin to manually add the swipe events: http://stephband.info/jquery.event.swipe/
或者您可以使用自己的插件手动添加滑动事件:http://stephband.info/jquery.event.swipe/。
If you want an expandable sidebar menu you can easily add it yourself:
如果你想要一个可扩展的侧边栏菜单，你可以自己添加:
-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/
http://jsfiddle.net/Osis/Mns8q/ http://codepen。io / krichnafsky /钢笔/ cuhkL http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/
#3
2
For one-person work, I don't think it really matters what single solution or combo to be chosen since it's all you and the very only "you" to make them work.
对于一个人的工作，我认为选择哪一个解决方案或组合并不重要，因为让它们工作的只有你自己和“你”。
However, for a team work piece, in a company or even an enterprise, the work contains Making template + Implementing applcation and the responsiblilities go to creative design team and IT team, respectively. So the final solution need to be OK with both these 2 teams.
然而，对于团队工作，在公司甚至是企业中，工作中包含了模板+实现applcation和响应能力，分别是创意设计团队和IT团队。所以这两个队的最终解决方案都要没问题。
For our company, CD team tends to use BootStrap cause they are requested to make many custom, special-effect web templates, however IT team already did some jQM applcation and they like to use it for future development work, thus a conflict.
对于我们公司，CD团队倾向于使用BootStrap，因为他们被要求制作许多定制的、特殊效果的web模板，但是IT团队已经做了一些jQM应用，他们喜欢将其用于未来的开发工作，因此产生了冲突。
In the long run, "User requirement" overcomes the conflict and we are now going to use BootStrap template and trying to avoid using jQM in our main mobile web applicaton development, at best.
从长远来看，“用户需求”克服了冲突，我们现在将使用引导模板，尽量避免在主要的移动web应用程序开发中使用jQM。
A pitty but need-to-accept choice.
这是一个微不足道但必须接受的选择。
#1
43
Conclusion I would not recommend combining JQuery Mobile and Bootstrap for complex projects.
结论:对于复杂的项目，我不建议将JQuery Mobile和Bootstrap结合使用。
JQM Knowledge We are building a series of sophisticated web application all using the JQuery Mobile (JQM) Framework. We have spent over a year producing this and now have pretty reasonable knowledge of JQM.
JQM知识我们正在使用JQuery Mobile (JQM)框架构建一系列复杂的web应用程序。我们花了一年多的时间来编写这个程序，现在对JQM有了相当合理的了解。
Positives: Some of the features are useful such as persistent footers and the mobile friendly components which give the HTML5 app a pretty native feel. Negatives: We have had to disable quite a lot of features of JQM such as preloading pages to create the complex functionality we required.
优点:一些特性是有用的，比如持久页脚和移动友好的组件，这给HTML5应用带来了一种非常本土的感觉。缺点:我们必须禁用JQM的许多特性，比如预加载页面，以创建我们需要的复杂功能。
The end result is good as we have fooled iOS developers into thinking it was native.
最终的结果是好的，因为我们已经愚弄了iOS开发人员，认为它是原生的。
Bootstrap Knowledge I have also recently produced a responsive website using bootstrap to advertise the above JQM product and that has worked out very well (http://www.sure-sense.com).
Bootstrap Knowledge我最近还制作了一个响应性的网站，使用Bootstrap宣传上述JQM产品，效果非常好(http://www.sure-sense.com)。
The Combo I tried to combine the bootstrap with the JQM project on a dashboard application but that has quickly highlighted that the 2 frameworks are not compatible. The CSS of JQM marks up the components on top of the bootstrap CSS and the results are some components looking like JQM and others like bootstrap.
我尝试将bootstrap与仪表板应用程序上的JQM项目结合在一起，但很快就强调了这两个框架不兼容。JQM的CSS标记了引导CSS上的组件，结果是一些类似JQM的组件和其他类似bootstrap的组件。
#2
26
Personally I think jQuery Mobile has more features than you really need, also it locks you into a way of building which isn't flexible. It starts to get buggy and messy when you have many panels with different animations and usually gets you 80% of the way very quickly, but then takes a long time to do custom things.
我个人认为jQuery手机拥有比你真正需要的更多的功能，而且它将你锁在一种不灵活的构建方式中。当你有很多带有不同动画的面板时，它开始变得混乱和混乱，通常会让你快速完成80%的工作，但是之后要花很长时间来做定制的事情。
I would use twitter bootstrap and then add plugins to support features you need.
我将使用twitter引导，然后添加插件来支持您需要的特性。
Bootstrap has lots of unofficial plugins you can add to imitate the functionality of jQuery Mobile: http://bootsnipp.com/resources
Bootstrap有很多非官方插件，您可以添加它们来模仿jQuery Mobile的功能:http://bootsnipp.com/resources
there is a guide here to use the swipe events from jQuery Mobile only: http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/
这里有一个使用jQuery Mobile滑动事件的指南:http://lazcreative.com/blog/adding-swipe- supporttobootstrap -carousel-3-0/
Or you can use your own plugin to manually add the swipe events: http://stephband.info/jquery.event.swipe/
或者您可以使用自己的插件手动添加滑动事件:http://stephband.info/jquery.event.swipe/。
If you want an expandable sidebar menu you can easily add it yourself:
如果你想要一个可扩展的侧边栏菜单，你可以自己添加:
-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/
http://jsfiddle.net/Osis/Mns8q/ http://codepen。io / krichnafsky /钢笔/ cuhkL http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/
#3
2
For one-person work, I don't think it really matters what single solution or combo to be chosen since it's all you and the very only "you" to make them work.
对于一个人的工作，我认为选择哪一个解决方案或组合并不重要，因为让它们工作的只有你自己和“你”。
However, for a team work piece, in a company or even an enterprise, the work contains Making template + Implementing applcation and the responsiblilities go to creative design team and IT team, respectively. So the final solution need to be OK with both these 2 teams.
然而，对于团队工作，在公司甚至是企业中，工作中包含了模板+实现applcation和响应能力，分别是创意设计团队和IT团队。所以这两个队的最终解决方案都要没问题。
For our company, CD team tends to use BootStrap cause they are requested to make many custom, special-effect web templates, however IT team already did some jQM applcation and they like to use it for future development work, thus a conflict.
对于我们公司，CD团队倾向于使用BootStrap，因为他们被要求制作许多定制的、特殊效果的web模板，但是IT团队已经做了一些jQM应用，他们喜欢将其用于未来的开发工作，因此产生了冲突。
In the long run, "User requirement" overcomes the conflict and we are now going to use BootStrap template and trying to avoid using jQM in our main mobile web applicaton development, at best.
从长远来看，“用户需求”克服了冲突，我们现在将使用引导模板，尽量避免在主要的移动web应用程序开发中使用jQM。
A pitty but need-to-accept choice.
这是一个微不足道但必须接受的选择。