什么是響應式 Web 設計

　　響應式 Web 設計是一個讓用戶通過各種尺寸的設備瀏覽網站獲得良好的視覺效果的方法。例如，您先在計算機顯示器上瀏覽一個網站，然后在智能手機上瀏覽，智能手機的屏幕尺寸遠小于計算機顯示器，但是你卻沒有感覺到任何差別，兩者的用戶體驗幾乎一樣，這說明這個網站在響應式設計方面做得很好。

　　我們已經在我們的流動布局實例中應用了響應性能，并請您在不同的屏幕尺寸下進行瀏覽。您可以通過 Chrome 或 FireFox 的窗口大小調整的擴展來調整瀏覽器。。

　　響應式 Web 設計工作原理

　　為了應用響應式 Web 設計，您需要創建一個包含適應各種設備尺寸樣式的 CSS。一旦頁面在特定的設備上加載，該頁面上使用了各種字體和 Web 開發技術，比如媒體查詢（Media Queries），此時，會先檢測設備的視口大小，然后加載特定于設備的樣式。

　　現在的上網設備十分多，每種設備的分辨率都不一樣，傳統的網站開發需要花很大功夫才能實現不同分辨率下兼容布局，而Bootstrap的出現使得網站開發更加簡單快捷。Bootstrap是Twitter推出的一個用于前端開發的開源工具包，其中的一個特性就是支持響應式布局。

　　看下下面的兩種設備瀏覽顯示的效果：

　　上面的是當設備寬度大于768px時，下面則是在小屏幕顯示的效果

　　側邊欄和導航條都被隱藏，通過按鈕顯示

　　下載Bootstrap3

　　首先我們使用的開發平臺是Windows7+Eclipse for J2EE

　　首先要下載Bootstrap3，可以到Bootstrap中文網下載，只需要下載用于生產環境的 Bootstrap，

　　另外要注意，要使用Bootstrap必須要有JQuery，可以從Bootstrap中文網的CDN里面保存jquery的壓縮版即可，地址是：http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js準備后就開始配置項目

　　為項目配置Bootstrap3

　　本地配置

　　首先利用Eclipse建立一個動態Web項目，在WebContent下建立bootstrap文件夾和jquery文件夾，然后把對應的文件復制進去即可。

　　注意：可能你復制jquery的js文件進去后，Eclipse報錯，這個是因為Eclipse對Javascript驗證出錯，可以把這個文件排除驗證，或者直接無視Eclipse的報錯。如下圖：

　　接下來建立一個index.jsp文件，引入Bootstrap3：

　　《！-- Bootstrap3 核心 CSS 文件 --》

　　《link rel=“stylesheet” href=“${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css”》

　　把JS文件放在《BODY》的最后，加快頁面顯示：

　　《！-- JQuery文件，務必在bootstrap.min.js 之前引入 --》

　　《script src=“${pageContext.request.contextPath}/jquery/jquery.min.1.11.2.js”》《/script》

　　《！-- Bootstrap3的 JavaScript文件 --》

　　《script src=“${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js”》《/script》

　　利用Bootstrap中文網CDN配置

　　如果覺得上述過程過于復雜，實際建站又想節省點流量，可以利用Bootstrap中文網的CDN配置（個人建議還是本地配置靠譜）：

　　Bootstrap 中文網 為 Bootstrap 專門構建了自己的免費 CDN 加速服務。基于國內云廠商的 CDN 服務，訪問速度更快、加速效果更明顯、沒有速度和帶寬限制、永久免費。Bootstrap 中文網還對大量的前端開源工具庫提供了 CDN 加速服務，請進入BootCDN 主頁查看更多可用的工具庫。

　　《！-- 新 Bootstrap 核心 CSS 文件 --》

　　《link rel=“stylesheet” href=“http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css”》

　　《！-- 可選的Bootstrap主題文件（一般不用引入） --》

　　《link rel=“stylesheet” href=“http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css”》

　　《！-- jQuery文件。務必在bootstrap.min.js 之前引入 --》

　　《script src=“http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js”》《/script》

　　《！-- 最新的 Bootstrap 核心 JavaScript 文件 --》

　　《script src=“http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js”》《/script》

　　但要注意，要實現移動設備響應還要附加一個meta（必須寫在其他meta前面）：

　　《！-- 下面這句用于響應移動設備的改變布局，必須寫在前面 --》

　　《meta name=“viewport” content=“width=device-width， initial-scale=1， maximum-scale=1” /》

　　配置好后就可以開始使用Bootstrap3的全局CSS樣式、Javascript插件和Bootstrap組件。

　　柵格系統

　　接下來我們了解如何利用Bootstrap的柵格系統實現響應式布局：

　　Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易于使用的預定義類，還有強大的mixin 用于生成更具語義的布局。

　　學習Bootstrap一定理解柵格系統的原理，才能實現響應式布局。

　　首先柵格系統用于通過一系列的行（row）與列（column）的組合來創建頁面布局，我們這里只使用行（row）。

　　“行（row）”必須包含在 .container （容器：固定寬度）或 .container-fluid （流式容器：固定寬度轉換為100% 寬度）中。

　　而在Bootstrap3中主要吧屏幕分成了三種（這里以行（row）來說明）：

　　.col-xs-* 超小屏幕，手機 （寬度《768px）

　　.col-sm-* 小屏幕，平板 （寬度≥768px）

　　.col-md-* 中等屏幕，桌面顯示器 （寬度≥992px）

　　不管在哪種屏幕上，柵格系統都會自動的分12列

　　.col-xs-* 和.col-sm-*和.col-md-* 后面跟的參數表示在當前的屏幕中占的列數。

　　同一段代碼在不同屏幕下的顯示，看我的圖解：

　　了解柵格系統就能初步實現響應式布局了。

　　更快地開發對移動設備友好的布局

　　Bootstrap 有幾個實用的用于開發對移動設備友好的布局的類。這些類可在 ‘responsive.less’ 上看到。

　　.visible-phone，在寬度為 767px 及以下的手機上可見，在 979px 到 768px 的平板上隱藏不可見，在桌面上隱藏不可見，這是默認的。

　　.visible-tablet，在寬度為 767px 及以下的手機上隱藏不可見，在 979px 到 768px 的平板上可見，在桌面上隱藏不可見，這是默認的。

　　.visible-desktop，在寬度為 767px 及以下的手機上隱藏不可見，在 979px 到 768px 的平板上隱藏不可見，在桌面上可見，這是默認的。

　　.hidden-phone，在寬度為 767px 及以下的手機上隱藏不可見，在 979px 到 768px 的平板上可見，在桌面上可見，這是默認的。

　　.hidden-tablet，在寬度為 767px 及以下的手機上可見，在 979px 到 768px 的平板上隱藏不可見，在桌面上可見，這是默認的。

　　.hidden-desktop，在寬度為 767px 及以下的手機上可見，在 979px 到 768px 的平板上可見，在桌面上隱藏不可見，這是默認的。