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 响应式FlexBox的重要类
除了使用d-flex类实现FlexBox布局外，Bootstrap 4还提供了很多辅助FlexBox布局的类。
【代码3-12】一个带子元素的Flex布局（横向row，详见源代码ch03目录中ch03.flexLayout1.html文件）
<div class="d-flex flex-row bg-light mb-3">
<div class="p-2 bg-light">弹性布局 1</div>
<div class="p-2 bg-light">弹性布局 2</div>
<div class="p-2 bg-light">弹性布局 3</div>
</div>
<div class="d-flex flex-row-reverse bg-light">
<div class="p-2 bg-light">弹性布局 1</div>
<div class="p-2 bg-light">弹性布局 2</div>
<div class="p-2 bg-light">弹性布局 3</div>
</div>
【代码3-12】中，.flex-row类代表行布局，表示这些子元素都在一行，默认从左到右排列。.flex-row-reverse类则代表从右到左排列。.mb类代表margin bottom，如果是.mt，则是margin top。
页面效果如图3.11所示。
图3.11 弹性布局（一）
【代码3-13】一个带子元素的Flex布局（竖向column，详见源代码ch03目录中ch03.flexLayout2.html文件）
<div class="d-flex flex-column bg-light mb-3">
<div class="p-2 bg-light">弹性布局 1</div>
<div class="p-2 bg-light">弹性布局 2</div>
<div class="p-2 bg-light">弹性布局 3</div>
</div>
<div class="d-flex flex-column-reverse bg-light">
<div class="p-2 bg-light">弹性布局 1</div>
<div class="p-2 bg-light">弹性布局 2</div>
<div class="p-2 bg-light">弹性布局 3</div>
</div>
在【代码3-13】中，.flex-column类代表列布局，表示这些子元素都在一列，默认从上到下排列。.flex-column-reverse类代表从下到上排列。页面效果如图3.12所示。
图3.12 弹性布局（二）
.justify-content-*类用于修改弹性布局中子元素的排列方式，*允许的值有star（默认）、end、center、between和around。
【代码3-14】一个Flex布局的元素排列方式（详见源代码ch03目录中ch03.flexLayout2.html文件）
<div class="d-flex flex-row bg-light justify-content-start">
<div class="p-2 bg-light">弹性布局 1</div>
<div class="p-2 bg-light">弹性布局 2</div>
<div class="p-2 bg-light">弹性布局 3</div>
</div>
<div class="d-flex flex-row bg-light justify-content-end">
<div class="p-2 bg-light">弹性布局 1</div>
<div class="p-2 bg-light">弹性布局 2</div>
<div class="p-2 bg-light">弹性布局 3</div>
</div>
<div class="d-flex flex-row bg-light justify-content-center">
<div class="p-2 bg-light">弹性布局 1</div>
<div class="p-2 bg-light">弹性布局 2</div>
<div class="p-2 bg-light">弹性布局 3</div>
</div>
<div class="d-flex flex-row bg-light justify-content-between">
<div class="p-2 bg-light">弹性布局 1</div>
<div class="p-2 bg-light">弹性布局 2</div>
<div class="p-2 bg-light">弹性布局 3</div>
</div>
<div class="d-flex flex-row bg-light justify-content-around">
<div class="p-2 bg-light">弹性布局 1</div>
<div class="p-2 bg-light">弹性布局 2</div>
<div class="p-2 bg-light">弹性布局 3</div>
</div>
在【代码3-14】中，使用.justify-content-*类显示了5种子元素的布局方式，包括左对齐、右对齐等。页面效果如图3.13所示。
图3.13 弹性布局（三）
说明
如果要设置单行的子元素对齐可以使用.align-items-*类来控制，包含的值有.align-items-start、.align-items-end、.align-items-center、.align-items-baseline和.align-items-stretch（默认）。
Flex布局还支持一行放不下时的换行，有3个类，即.flex-nowrap、.flex-wrap和.flex-wrap-reverse，分别是不换行、顺序换行和换行之后的在上方。
【代码3-15】一个带子元素换行的Flex布局（详见源代码ch03目录中ch03.flexLayout4.html文件）
<div class="d-flex flex-nowrap bg-light mb-3">
<div class="p-2 bg-light">弹性布局 1</div>
<div class="p-2 bg-light">弹性布局 2</div>
<div class="p-2 bg-light">弹性布局 3</div>
……
</div>
<div class="d-flex flex-wrap bg-light">
<div class="p-2 bg-light">弹性布局 21</div>
<div class="p-2 bg-light">弹性布局 22</div>
<div class="p-2 bg-light">弹性布局 23</div>
……
</div>
<div class="d-flex flex-wrap bg-light">
<div class="p-2 bg-light">弹性布局 31</div>
<div class="p-2 bg-light">弹性布局 32</div>
<div class="p-2 bg-light">弹性布局 33</div>
……
</div>
页面效果如图3.14所示。
图3.14 弹性布局（四）