Can I use bootstrap 3 together with jQuery Mobile?

Solution 1:

Conclusion I would not recommend combining JQuery Mobile and Bootstrap for complex projects.

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.

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.

The end result is good as we have fooled iOS developers into thinking it was native.

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).

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.

Solution 2:

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.

I would use twitter bootstrap and then add plugins to support features you need.

Bootstrap has lots of unofficial plugins you can add to imitate the functionality of 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/

Or you can use your own plugin to manually add the swipe events: 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/

Solution 3:

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.

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.

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.

A pitty but need-to-accept choice.