什么是響應(yīng)式 Web 設(shè)計(jì)

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

　　我們已經(jīng)在我們的流動(dòng)布局實(shí)例中應(yīng)用了響應(yīng)性能，并請(qǐng)您在不同的屏幕尺寸下進(jìn)行瀏覽。您可以通過 Chrome 或 FireFox 的窗口大小調(diào)整的擴(kuò)展來調(diào)整瀏覽器。。

　　響應(yīng)式 Web 設(shè)計(jì)工作原理

　　為了應(yīng)用響應(yīng)式 Web 設(shè)計(jì)，您需要?jiǎng)?chuàng)建一個(gè)包含適應(yīng)各種設(shè)備尺寸樣式的 CSS。一旦頁面在特定的設(shè)備上加載，該頁面上使用了各種字體和 Web 開發(fā)技術(shù)，比如媒體查詢（Media Queries），此時(shí)，會(huì)先檢測(cè)設(shè)備的視口大小，然后加載特定于設(shè)備的樣式。

　　現(xiàn)在的上網(wǎng)設(shè)備十分多，每種設(shè)備的分辨率都不一樣，傳統(tǒng)的網(wǎng)站開發(fā)需要花很大功夫才能實(shí)現(xiàn)不同分辨率下兼容布局，而Bootstrap的出現(xiàn)使得網(wǎng)站開發(fā)更加簡(jiǎn)單快捷。Bootstrap是Twitter推出的一個(gè)用于前端開發(fā)的開源工具包，其中的一個(gè)特性就是支持響應(yīng)式布局。

　　看下下面的兩種設(shè)備瀏覽顯示的效果：

　　上面的是當(dāng)設(shè)備寬度大于768px時(shí)，下面則是在小屏幕顯示的效果

　　側(cè)邊欄和導(dǎo)航條都被隱藏，通過按鈕顯示

　　下載Bootstrap3

　　首先我們使用的開發(fā)平臺(tái)是Windows7+Eclipse for J2EE

　　首先要下載Bootstrap3，可以到Bootstrap中文網(wǎng)下載，只需要下載用于生產(chǎn)環(huán)境的 Bootstrap，

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

　　為項(xiàng)目配置Bootstrap3

　　本地配置

　　首先利用Eclipse建立一個(gè)動(dòng)態(tài)Web項(xiàng)目，在WebContent下建立bootstrap文件夾和jquery文件夾，然后把對(duì)應(yīng)的文件復(fù)制進(jìn)去即可。

　　注意：可能你復(fù)制jquery的js文件進(jìn)去后，Eclipse報(bào)錯(cuò)，這個(gè)是因?yàn)镋clipse對(duì)Javascript驗(yàn)證出錯(cuò)，可以把這個(gè)文件排除驗(yàn)證，或者直接無視Eclipse的報(bào)錯(cuò)。如下圖：

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

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

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

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

　　《！-- JQuery文件，務(wù)必在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中文網(wǎng)CDN配置

　　如果覺得上述過程過于復(fù)雜，實(shí)際建站又想節(jié)省點(diǎn)流量，可以利用Bootstrap中文網(wǎng)的CDN配置（個(gè)人建議還是本地配置靠譜）：

　　Bootstrap 中文網(wǎng) 為 Bootstrap 專門構(gòu)建了自己的免費(fèi) CDN 加速服務(wù)?；趪鴥?nèi)云廠商的 CDN 服務(wù)，訪問速度更快、加速效果更明顯、沒有速度和帶寬限制、永久免費(fèi)。Bootstrap 中文網(wǎng)還對(duì)大量的前端開源工具庫提供了 CDN 加速服務(wù)，請(qǐng)進(jìn)入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文件。務(wù)必在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》

　　但要注意，要實(shí)現(xiàn)移動(dòng)設(shè)備響應(yīng)還要附加一個(gè)meta（必須寫在其他meta前面）：

　　《！-- 下面這句用于響應(yīng)移動(dòng)設(shè)備的改變布局，必須寫在前面 --》

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

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

　　柵格系統(tǒng)

　　接下來我們了解如何利用Bootstrap的柵格系統(tǒng)實(shí)現(xiàn)響應(yīng)式布局：

　　Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。它包含了易于使用的預(yù)定義類，還有強(qiáng)大的mixin 用于生成更具語義的布局。

　　學(xué)習(xí)Bootstrap一定理解柵格系統(tǒng)的原理，才能實(shí)現(xiàn)響應(yīng)式布局。

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

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

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

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

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

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

　　不管在哪種屏幕上，柵格系統(tǒng)都會(huì)自動(dòng)的分12列

　　.col-xs-* 和.col-sm-*和.col-md-* 后面跟的參數(shù)表示在當(dāng)前的屏幕中占的列數(shù)。

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

　　了解柵格系統(tǒng)就能初步實(shí)現(xiàn)響應(yīng)式布局了。

　　更快地開發(fā)對(duì)移動(dòng)設(shè)備友好的布局

　　Bootstrap 有幾個(gè)實(shí)用的用于開發(fā)對(duì)移動(dòng)設(shè)備友好的布局的類。這些類可在 ‘responsive.less’ 上看到。

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

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

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

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

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

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