接下來建立一個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 的平板上可見，在桌面上隱藏不可見，這是默認的。