3.3 页面布局
Bootstrap框架设计了固定布局、流式布局、弹性布局等页面布局方式，默认是弹性布局。下面分别针对这些布局进行介绍。
3.3.1 固定布局和流式布局
固定布局使用.container类，流式布局使用.container-fluid类。我们直接通过一个例子来说明。
【代码3-9】一个Bootstrap布局的设计（详见源代码ch03目录中ch03.fixedLayout.html文件）
在手机屏幕小于768px时，上述代码的效果如图3.8所示；在屏幕大于768px时，效果如图3.9所示。也就是说，两者都是响应式的，只有采用流式布局时，div的宽度与屏幕才相等。
图3.8 布局（小于768px）
图3.9 布局（大于768px）
3.3.2 Bootstrap 4弹性布局（FlexBox）
弹性布局实际是CSS 3的一个特性，是一种当页面需要适应不同的屏幕大小以及设备类型时，确保元素拥有恰当行为的布局方式。Bootstrap也采用了这种布局方式，也有人称为弹性盒子。Bootstrap 4使用一整套响应式FlexBox快速管理网格列、导航等组件的布局、对齐和大小。对于更复杂的实现，还可以根据需要自定义CSS。
注意
IE 9及以下版本不支持弹性布局，如果需要兼容这些浏览器，需要使用Bootstrap 3版本。
【代码3-10】一个Flex布局的设计（详见源代码ch03目录中ch03.flexLayout.html文件）
<div class="d-flex p-2 bg-ight">我是一个弹性盒子</div>
<div class="d-inline-flex p-2 bg-light">我是一个嵌入式的弹性盒子</div>
在【代码3-10】中，.d-flex类代表这是一个弹性盒子，.p代表padding，.bg-light代表背景色。弹性盒子有两种类型：.d-*-flex和.d-*-inline-flex，其中*可以省略，也可以是任意的屏幕大小，如lg、md等，例如.d-md-inline-flex。
页面效果如图3.10所示。
图3.10 弹性布局
FlexBox布局还有很多重要的类，这里我们先简单介绍一下，下一节再详细举例。