53

I have read many "bootstrap vs. jQuery mobile" articles. It is quite clear that they both have different aims. So what about combining them?

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.

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

Community
  • 1
  • 1
Tillito
  • 7,718
  • 7
  • 34
  • 31
  • 1
    I would personally not combine them, since they're taking two totally different approaches, making it very hard to integrate the two. Their aim is in one way not that different, they're both frameworks providing you with useful components for building a user interface. – reinder Sep 05 '13 at 13:36
  • 1
    Are you just trying to make a jQm site responsive? You don't need another framework for that. – Evan Davis Sep 05 '13 at 14:20
  • 2
    As I wrote in the question: has anybody done this or has anybody tried to do this in vain? I know the pros and cons but that is NOT my question. Please don't vote it down if you can't help! – Tillito Sep 05 '13 at 15:42
  • 4
    To answer your question, mathletics: I have several projects in which I am going to use either jqm or bootstrap OR both. And I think the question does make sense: I can imagine that it will work out in the beginning but that when the project is becoming more complex it becomes too much hassel to handle. – Tillito Sep 05 '13 at 15:44
  • 1
    This is a good question, because the jQuery Mobile CSS framework is missing lots of useful stuff that exists in bootstrap. The responsive tables in bootstrap3 are great. Wells, panels (not what jqm calls panels), large range of glyphicons, utility classes. Most I just hand pick out and add into my jqm project.. – asgeo1 Oct 21 '13 at 02:38
  • 5
    I've actually gone the other way -- used Bootstrap for the time it saves me with simple UI elements, and rolled my own AJAX navigation system / incorporated other libraries like hammer.js for things like swipe events. I found that it was sometimes burdensome to have to do things jQM's way, but seldom burdensome to do them Bootstrap's way. – Ben Y Oct 21 '13 at 18:58

4 Answers4

44

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.

glimmer
  • 577
  • 4
  • 7
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.

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/

Kim T
  • 5,770
  • 1
  • 52
  • 79
  • What about page transitions? – A F Feb 12 '14 at 19:48
  • You could have two divs for page content one shown, one hidden off screen. You load the content into the page off screen, then transition the page into view, and hide the previous page off screen afterwards – Kim T Feb 13 '14 at 23:14
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.

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.

Scott Chu
  • 972
  • 14
  • 26
0

In one of my mobile app projects, I decided to use Bootstrap & JQM together. I used JQM widgets then dedicated Bootstrap for handling the structure of the layout. The simple reason is, I wanted better control of the grids since Bootstrap have a higher number of grids than JQM which has a very limited layout control. I also want to use spanning across grids which is very much possible in Bootstrap but not in JQM. Although, overriding some CSS codes is possible to be able to achieve my goal in JQM, it's not a smart thing to do.

Just be ready to fix some minor conflicts in the naming conventions used by the two different UI frameworks if you're planning to do the same thing.

sylenix
  • 161
  • 2
  • 8