上QQ阅读APP看书，第一时间看更新
3.4 响应式设计
Bootstrap框架设计的初衷就是为了更好地满足响应式设计原理，本小节就主要介绍针对Bootstrap如何应用响应式设计的内容。
3.4.1 启用响应式特性
通过在文档中的<head>标签里添加合适的meta标签并引入一个额外的样式表即可启用响应式CSS。如果已经在定制页面编译好一个Bootstrap，那么只需添加一个meta标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
提示
Bootstrap在默认情况下是没有引入响应式特性的，因为不是任何情况都需要使用到。我们并不是鼓励开发者移除此功能，而是在需要使用的时候才启用它。
3.4.2 响应式Bootstrap特点
媒体查询允许在一些条件基础上自定义CSS，例如：ratios、widths、display type等，但通常都是围绕着min-width和max-width这两个属性进行。应用响应式Bootstrap特点可以概括如下：
● 修改栅格系统中列的宽度。
● 需要的时候，用堆叠元素代替浮动。
● 调整标题和文本的大小以便适合各种设备。
提示
谨慎地使用媒体查询，先从手机屏幕开始吧。对于大型的项目，应该考虑使用专门的代码库，而不是构筑在媒体查询之上。
3.4.3 Bootstrap支持的设备
Bootstrap所支持的几个媒体查询都放在了一个文件中，可以让项目更灵活地适应不同设备和屏幕分辨率，具体如表3.1所示。
表3.1 媒体设备
【代码3-11】是媒体查询的代码示例：
/* 大屏幕 */
@media (min-width: 1200px) { ... }
/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) { ... }
/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) { ... }
3.4.4 响应式布局辅助类
为了更快地开发移动设备，下面列出的辅助类用于针对不同设备显示和隐藏内容。表3.2是可用的类列表，以及它们在媒体查询布局下的效果。
表3.2 辅助类
3.4.5 如何应用响应式布局
Bootstrap响应式布局需要在适当的情况下进行使用，使用时避免创建同一个站点的不同版本，当上述介绍的类能对每种设备的展示做有益补充的时候才使用。
注意：响应式工具不能用于table元素中，而且本就不支持。