手機網頁用Bootstrap仍是jQuery Mobile

不少新手糾結這個問題？兩個框架都可以支持作手機網頁，那麼它們的區別是什麼呢，適用場景是什麼呢？下面咱們從這幾個方面比較這兩個框架：解決問題、功能、適用場景。

解決問題

Bootstrap是一個css框架，針對解決的問題有：

跨設備的網頁響應式佈局問題。隨着手機、平板、各分辨率屏幕的出現，如何可以一套前端在全部設備上自由適應？

多人合做的前端佈局和樣式的規範問題

經常使用前端css組件，如按鈕、鏈接、表單、表格、分頁組件、下拉菜單、導航欄、ICON等等

經常使用JS前端組件（須要擴展js支持），如表單驗證、Tips、Popup等等

jQuery Mobile是移動前端框架，包含js、html、css，提供一套完整的移動前端開發組件，能夠比喻成Android開發框架，儘量提供移動APP所具備的全部功能，針對解決的問題有：

移動網頁APP所經常使用的組件，例如：手機導航欄、選項卡、底部菜單、列表、表單等各類組件，而這些與Bootstrap提供的組件有很大區別，jQuery Mobile提供的是相似手機APP的組件，只用於移動網頁，而Bootstrap提供的是面向全部設備的組件，並無對移動設備專門考慮，與移動APP的組件體驗不同。

網頁頁面之間轉換效果

異步數據加載

功能

Bootstrap其核心主要是一個css樣式框架，基於css 的Media Query功能實現了響應式佈局，可以幫助前端開發人員快速佈局、快速開發、合做開發。它必須藉助jQuery相似的js框架來實現Ajax數據交互。

jQuery Mobile其核心是一個完整的WebAPP框架，加入了一個輕量級的jQuery能夠實現Dom操做，在jQuery的基礎上提供了一系列相似移動APP的Widget（視圖組件），提供了一套不錯的頁面轉場效果，可經過Ajax實現與後端數據交互。

適用場景

Bootstrap一般用於：展現網站的響應式佈局開發，使得網站能夠在不一樣設備上方便瀏覽；以及網站後臺管理系統的前端CSS框架。

jQuery Mobile一般用於：指望接近移動APP體驗的WebAPP，項目只運行在手機端，不用於電腦設備展現（雖然是能夠展現的，可是效果很差）。

總結

若是作跨設備響應式前端，選擇Boostrap；若是僅做移動端，指望獲得近似APP的WebAPP，使用jQuery Mobile。

若是作一個產品級的WebAPP，當前jQuery Mobile的能力並不能讓你滿意，本身開發響應式佈局框架和WebApp組件是必然要走的路。