bootstrap 响应网页和栅格系统

响应式网页具有的特点：

1. 网页宽度自动调整
2. 少用绝对宽度
3. 字体要使用 rem（根节点的相对大小）、em 作为单位
4. 布局要使用浮动或弹性

媒体查询：

@media 媒体类型 逻辑运算符（媒体特性）{
正常的CSS样式
}

媒体类型：

• all:所有设备
• print：打印机设备
• screen：彩色的电脑屏幕
• speech：听觉设备

媒体特性：

• min-width 最小宽度
• width 宽度
• max-width 最大宽度
• height 高度
• min-width 最小高度
• max-width 最大高度
• orientation 方向
• landscape 横屏（宽度大于高度）
• portrait 竖屏（高度大于宽度）
• aspect-ratio 宽度比
• -webkit-device-pixel-ratio 像素比（webkit 内核专属）

逻辑运算符：

• and 合并多个媒体查询（并且）
• ， 匹配某个媒体查询（或者）
• not 对媒体查询结构取反
• only 仅在媒体查询匹配成功后应用样式（防范老旧浏览器）

CSS @规则：

• @chartest 定义编码
• @import 引入 css 文件
• @font-face 自定义字体
• @keyframes animation 里面的关键帧
• @media 媒体查询

栅格系统：

X3.0 使用的是浮动原理，X4.0 使用的是弹性盒。

结构：

<div class="container">
	<div class="row">
		<div class="col- "></div>
	</div>
</div>

设置最外层容器为 container 时（表示宽度会有所限制）：

• xl 为超大屏。屏幕宽度>=1200，容器的宽度固定为 1140px，一行可以设置 12 个列。屏幕尺寸<1200 的时候，一行只能设置 1 列
• lg 为大屏。屏幕宽度>=992px，容器的宽度固定为 960px，一行可以设置 12 个列。屏幕尺寸<992 的时候，一行只能设置 1 列
  md 为中等屏。屏幕宽度>=768px，容器的宽度固定为 720px，一行可以设置 12 个列。屏幕尺寸<768 的时候，一行只能设置 1 列
• sm 为小屏。屏幕宽度>=576px，容器的宽度固定为 540px，一行可以设置 12 个列。屏幕尺寸<576 的时候，一行只能设置 1 列
• col 为超小屏。屏幕宽度<576px，容器的宽度为 auto，一行永远可以设置 12 列

设置最外层容器为 container-fluid 时（表示宽度为 100%）

等宽列：
设置 col 类

<div class="container">
    <div class="row">
        <div class="col"></div>
    </div>
</div>

想换行，在从何处换行的元素后面加上一个元素设置 class 为 w-100

<div class="container">
    <div class="row">
        <div class="col"></div>
        <div class="w-100"></div>
        <div class="col"></div>
    </div>
</div>