Bootstrap完全支持响应式设计，在默认情况下Bootstrap是没有引入响应式特性的，因为不是任何情况都需要使用到，建议在需要使用的时候才启用它。
1.响应式Bootstrap概述
响应式Bootstrap通过Media Query技术实现，相关的响应式CSS样式存放在bootstrap-responsive.css文件中，Media Query允许在一些条件基础上自定义CSS，不过主要是通过min-width和max-width进行设计。主要包含的定义项目：
修改栅格系统中列的宽度。
根据需要，用堆叠元素代替浮动。
调整标题和文本的大小以适合各种设备。
当然，Media Query技术不是万能的，对于大型商业项目，建议选用JavaScript技术来解决响应式设计，可以考虑使用专门的代码库，而不是构筑在Media Query技术之上。
Bootstrap支持的几个Media Query都放在bootstrap-responsive.css文件中，调用该文件可以使页面能够灵活适应不同设备和屏幕分辨率，简单说明如表3-1所示。
表3-1 Bootstrap支持的Media Query分类
类 型 布 局 宽 度 列 宽 间 隙 宽 度
大屏幕 大于或等于1200px 70px 30px
默认 大于或等于980px 60px 20px
平板电脑 大于或等于768px 42px 20px
手机到平板电脑 小于或等于767px 流式列，无固定宽度
手机 小于或等于480px 流式列，无固定宽度
具体样式结构如下：
/* 大屏幕 */
@media (min-width: 1200px) {
}
/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) {
}
/* 横向放置的手机和竖向放置的平板电脑之间的分辨率 */
@media (max-width: 767px) {
}
/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) {
}
2.使用响应式Bootstrap
使用响应式Bootstrap的具体方法和步骤如下。
第1步：在需要使用响应式设计的页面中启用响应式特性，具体方法如下。
在文档头部区域内添加合适的meta标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
引入Bootstrap响应式样式表，即可启用响应式CSS。
<link href="bootstrap/css/bootstrap-responsive.css"rel="stylesheet" "type="text/css">
提示 如果已经在定制页面编译好一个Bootstrap, 那么只需添加一个meta标签。
第2步：添加响应式布局辅助类样式。具体说明如表3-2所示。
表3-2 响应式布局辅助类样式
类（Class） 手机（767px 及以下） 平板电脑 （979px 到 768px） 台式机 （默认）
.visible-phone 显示 隐藏 隐藏
.visible-tablet 隐藏 显示 隐藏
.visible-desktop 隐藏 隐藏 显示
.hidden-phone 隐藏 显示 显示
.hidden-tablet 显示 隐藏 显示
.hidden-desktop 显示 显示 隐藏
提示 这些类样式不支持table元素，在有限的情况下使用Bootstrap响应式设计类样式，避免创建同一个站点的不同版本。当这些类样式能对每种设备的展示做有益的补充时才使用。
第3步：复制3.5.4节的案例，在样式表中删除Media Query部分的全部样式声明，同时清理掉结构部分的#content、#sidebar和#footer样式。同时在内部样式表上面引入Bootstrap响应式设计样式表。
<link href="bootstrap/css/bootstrap-responsive.css"rel="stylesheet" "type="
text/css">
第4步：在HTML结构中，为<div id="content">和<div id="sidebar">栏目包裹一层流式布局框，定义该标签的类样式为class="row-fluid"。同时为<div id="content">添加class="span8"类样式，为<div id="sidebar">添加class="span4"类样式，并添加.hidden-phone类样式，设计在移动设备的小屏幕中隐藏侧栏显示。
<div class="row-fluid">
<div id="content" class="span8">
<h2>Content</h2>
<p>text</p>
</div>
<div id="sidebar" class="span4 hidden-phone">
<h3>Sidebar</h3>
<p>text</p>
</div>
</div>
第5步：在浏览器中预览，逐步调整浏览器窗口，会发现Bootstrap能够自动调整页面的版式布局，如图3-28所示。
