How to Use Bootstrap 3 Together with Jquery Mobile

Bootstrap 3 Dropdown Menu Parent Clickable on Mobile?

When the viewport is greater than 992px and I resize the browser
<992px the hover effect retains even though I would like the dropdown
to appear when active at less than 992px. Is there a way to detect the
resizing of the viewport to fix this?

Ans - Use $(window).resize event to capture browser resize

Ex:

$(window).on('resize',function(){
     if($(this).width()>992){
          //do relative stuffs here
     }
     else{
          //do relative stuffs here
     }
});

When the viewport is less than 992px the parent items no longer work.
Is there a way to possibly make the parent item clickable on a double
click? I'd like it this way because people on mobile/tablet can tap
once for dropdown and twice for the parent item.

Ans - Capture doubleclick using dblclick event handler of jquery

Ex:

$('yourelementidorclass').dblclick(function(){
    //Do necessary stuffs here
});

twitter-bootstrap vs jquery-mobile

I don't know if "better" is something you can answer since they serve different purposes. Bootstrap is great all-purpose CSS library whereas jQueryMobile is closer to a framework. Meaning jQueryMobile doesn't just make your pages look nice- it gives a lot of mobile oriented features such as- swipe-events, page transitions, allows for single page applications (since it will only show a single div with data-role='page' at a time), AJAX preload and history API, and lots of touch friendly components/widgets. Whereas bootstrap is foremost a CSS library mostly for desktop but works on mobile as well especially since 2.0 comes with media queries built in. Bootstrap will not help you with touch friendly lists, checkboxes, select menu's, etc.

One more thing to point out, jQueryMobile takes your markup and dresses it with all sorts of pretty stuff using JavaScript. Bootstrap has some javascript, but only for optional components, the rest is CSS.

So to answer IMHO- if you're a making a web application that you explicitly plan on using primarily on mobile devices go with jQueryMobile; Anything else go with Bootstrap- it's really quite awesome.

JQuery Mobile, Bootstrap and CSS3 Media Queries, what combination to choose

Sure you could probably get boostrap and JQM css to play nicely together. And the way you have it should work for the most part with the exception of maybe a class or two being overwritten. If you do chose this route be sure to make a custom build of bootstrap that only includes that part of bootstrap you intent to use. Eliminate as much overhead as possible.

It is however not that hard to use css3 media query. Taking a quick crash course for media queries will save your users bandwidth and also ensure that your site loads as fast as possible.

Here are some great examples and tutorials on using css3 media queries:

http://css-tricks.com/css-media-queries/

http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design

http://webdesignerwall.com/tutorials/css3-media-queries

http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/

---

Related Topics