響應式 Web 設計是一個讓用戶通過各種尺寸的設備瀏覽網站獲得良好的視覺效果的方法。例如，您先在計算機顯示器上瀏覽一個網站，然後在智慧型手機上瀏覽，智慧型手機的屏幕尺寸遠小於計算機顯示器，但是你卻沒有感覺到任何差別，兩者的用戶體驗幾乎一樣，這說明這個網站在響應式設計方面做得很好。
我們已經在我們的流動布局實例中應用了響應性能，並請您在不同的屏幕尺寸下進行瀏覽。您可以通過 Chrome 或 FireFox 的窗口大小調整的擴展來調整瀏覽器。。
為了應用響應式 Web 設計，您需要創建一個包含適應各種設備尺寸樣式的 CSS。一旦頁面在特定的設備上加載，該頁面上使用了各種字體和 Web 開發技術，比如媒體查詢（Media Queries），此時，會先檢測設備的視口大小，然後加載特定於設備的樣式。
現在的上網設備十分多，每種設備的解析度都不一樣，傳統的網站開發需要花很大功夫才能實現不同解析度下兼容布局，而Bootstrap的出現使得網站開發更加簡單快捷。Bootstrap是Twitter推出的一個用於前端開發的開源工具包，其中的一個特性就是支持響應式布局。
看下下面的兩種設備瀏覽顯示的效果：
上面的是當設備寬度大於768px時，下面則是在小屏幕顯示的效果
側邊欄和導航條都被隱藏，通過按鈕顯示
首先我們使用的開發平臺是Windows7+Eclipse for J2EE
首先要下載Bootstrap3，可以到Bootstrap中文網下載，只需要下載用於生產環境的 Bootstrap，
另外要注意，要使用Bootstrap必須要有JQuery，可以從Bootstrap中文網的CDN裡面保存jquery的壓縮版即可，地址是：http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js準備後就開始配置項目
本地配置
首先利用Eclipse建立一個動態Web項目，在WebContent下建立bootstrap文件夾和jquery文件夾，然後把對應的文件複製進去即可。
注意：可能你複製jquery的js文件進去後，Eclipse報錯，這個是因為Eclipse對Javascript驗證出錯，可以把這個文件排除驗證，或者直接無視Eclipse的報錯。如下圖：
《！-- 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 中文網 為 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 的平板上可見，在桌面上隱藏不可見，這是默認的。
打開APP閱讀更多精彩內容聲明：本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人，不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用，如有內容圖片侵權或者其他問題，請聯繫本站作侵刪。 侵權投訴