接下來建立一個(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)還對大量的前端開源工具庫提供了 CDN 加速服務(wù)，請進(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)移動設(shè)備響應(yīng)還要附加一個(gè)meta（必須寫在其他meta前面）：

　　《！-- 下面這句用于響應(yī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)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒ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)都會自動的分12列

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

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

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

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

　　Bootstrap 有幾個(gè)實(shí)用的用于開發(fā)對移動設(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)的。