Shulou(Shulou.com)06/03 Report--

Build a mobile web page wap choose to use Bootstrap and jQueryMobile example analysis, in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

Bootstrap is a css framework that addresses the following problems:

Responsive layout of web pages across devices. With the emergence of mobile phones, tablets and various resolution screens, how can a front-end adapt freely on all devices?

The standardization of front-end layout and style of multi-person cooperation

Common front-end css components, such as buttons, connections, forms, tables, paging components, drop-down menus, navigation bar, ICON, etc.

Common JS front-end components (need to extend js support), such as form validation, Tips, Popup, etc.

JQuery Mobile is a mobile front-end framework, including js, html and css. It provides a complete set of mobile front-end development components, which can be compared to the Android development framework. It provides all the functions of mobile APP as much as possible. The problems solved are as follows:

Mobile web page APP commonly used components, such as: mobile phone navigation bar, tabs, bottom menu, list, forms and other components, but these are very different from the components provided by Bootstrap, jQuery Mobile provides components similar to mobile APP, only for mobile web pages, while Bootstrap provides components for all devices, and does not specifically consider mobile devices, which is different from the component experience of mobile APP.

Conversion effect between web pages

Asynchronous data loading

Function

The core of Bootstrap is a css style framework, and the Media Query function based on css realizes responsive layout, which can help front-end developers to lay out quickly, develop quickly and develop cooperatively. It must rely on the js framework similar to jQuery to achieve Ajax data interaction.

The core of jQuery Mobile is a complete WebAPP framework, which adds a lightweight jQuery to realize Dom operation, provides a series of Widget (view components) similar to mobile APP on the basis of jQuery, provides a set of good page transition effect, and can interact with back-end data through Ajax.

Applicable scenario

Bootstrap is usually used to show the responsive layout development of the website, so that the website can be easily browsed on different devices, and the front-end CSS framework of the website background management system.

JQuery Mobile is usually used for WebAPP that expects to be close to the mobile APP experience. The project only runs on the mobile side and is not used for computer device display (although it can be displayed, but the effect is not good).

Summary

If you are doing a cross-device responsive front end, select Boostrap; if only the mobile end, expect to get a WebAPP similar to APP, and use jQuery Mobile.

If you do a production-level WebAPP, the current capabilities of jQuery Mobile can not satisfy you, and it is inevitable to develop your own responsive layout framework and WebApp components.

This is the answer to the sample analysis question of building a mobile web page wap using Bootstrap and jQueryMobile. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.