bootstrap响应式布局 - 全文

　　什么是响应式 Web 设计

　　响应式 Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法。例如，您先在计算机显示器上浏览一个网站，然后在智能手机上浏览，智能手机的屏幕尺寸远小于计算机显示器，但是你却没有感觉到任何差别，两者的用户体验几乎一样，这说明这个网站在响应式设计方面做得很好。

　　我们已经在我们的流动布局实例中应用了响应性能，并请您在不同的屏幕尺寸下进行浏览。您可以通过 Chrome 或 FireFox 的窗口大小调整的扩展来调整浏览器。。

　　响应式 Web 设计工作原理

　　为了应用响应式 Web 设计，您需要创建一个包含适应各种设备尺寸样式的 CSS。一旦页面在特定的设备上加载，该页面上使用了各种字体和 Web 开发技术，比如媒体查询（Media Queries），此时，会先检测设备的视口大小，然后加载特定于设备的样式。

　　现在的上网设备十分多，每种设备的分辨率都不一样，传统的网站开发需要花很大功夫才能实现不同分辨率下兼容布局，而Bootstrap的出现使得网站开发更加简单快捷。Bootstrap是Twitter推出的一个用于前端开发的开源工具包，其中的一个特性就是支持响应式布局。

　　看下下面的两种设备浏览显示的效果：

　　

　　上面的是当设备宽度大于768px时，下面则是在小屏幕显示的效果

　　

　　侧边栏和导航条都被隐藏，通过按钮显示

　　

　　下载Bootstrap3

　　首先我们使用的开发平台是Windows7+Eclipse for J2EE

　　首先要下载Bootstrap3，可以到Bootstrap中文网下载，只需要下载用于生产环境的 Bootstrap，

　　另外要注意，要使用Bootstrap必须要有JQuery，可以从Bootstrap中文网的CDN里面保存jquery的压缩版即可，地址是：http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js准备后就开始配置项目

　　为项目配置Bootstrap3

　　本地配置

　　首先利用Eclipse建立一个动态Web项目，在WebContent下建立bootstrap文件夹和jquery文件夹，然后把对应的文件复制进去即可。

　　注意：可能你复制jquery的js文件进去后，Eclipse报错，这个是因为Eclipse对Javascript验证出错，可以把这个文件排除验证，或者直接无视Eclipse的报错。如下图：

　　

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