1 自适应的页面（响应式页面）
在不同的屏幕上（电脑、平板、手机），可以自动根据屏幕的大小来调整页面，不用再专门为不同屏幕设计。
2 使用 @media 查询，你可以针对不同的屏幕大小定义不同的样式。
//1 兼容移动设备
//device-width：当前设备的宽度
//initial-scale：初始的缩放比例（默认设置为1.0，即代表不缩放）
//user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
//2 加载兼容文件js（IE8既不支持HTML5也不支持CSS3 @media ）
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
//3 设置IE渲染方式默认为最高(可选)
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
//4 @media
@media mediaType and|not|only (media feature) {
/*CSS-Code;*/
}
//媒体类型（mediaType ）
all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等。（最常用）
speech 应用于屏幕阅读器等发声设备
媒体功能（media feature)
max-width:定义输出设备中的页面最大可见区域宽度
min-width:定义输出设备中的页面最小可见区域宽度
3 布局容器
//Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。
//container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
//.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
...
</div>
4 栅格系统
//栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局
