CDN配置与栅格系统 - bootstrap响应式布局

　　接下来建立一个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 的平板上可见，在桌面上隐藏不可见，这是默认的。