响应式
书写顺序
能够根据设备宽度的变化，设置差异化样式
min-width（从小到大）
max-width（从大到小）
默认值
768以下是XS 768-992是SM 992-1200是MD 1200以上是LG
媒体类型 能够根据设备宽度的变化，设置差异化样式
媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备
媒体特征 能够根据设备宽度的变化，设置差异化样式
媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。
BootStrap简介
使用 BootStrap框架可以快速开发响应式网页
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。
中文官网: www.bootcss.com/
首页 → BootStrap3中文文档 → 下载BootStrap
引入： BootStrap提供的CSS代码
<link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.css">
调用类：使用BootStrap提供的样式
container：响应式布局版心类
BootStrap栅格系统
栅格化是指将整个网页的宽度分成若干等份
BootStrap3默认将网页分成12等份
container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。
container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。
分别使用.row类名和 .col类名定义栅格布局的行和列。
注意:
- container类自带间距15px;
- row类自带间距-15px
布局类：表格
table : 基本类名, 初始化表格默认样式
table-bordered : 边框线
table-striped : 隔行变色
table-hover : 鼠标悬停效果
table-responsive : 表格宽溢出滚动
美化内容类：按钮
btn : 基准样式
btn-info; btn-success : 设置按钮背景色
btn-block : 设置按钮为块元素
btn-lg; btn-sm; btn-xs : 设置按钮大小
布局类：表单
form-control : 设置表单元素input, select, textarea的样式
checkbox 和 radio : 设置复选框和单选框的样式
form-inline : 设置表单元素水平排列
disabled : 设置表单禁用状态样式
input-lg; input-sm, input-sm : 设置表单元素的大小
美化内容类：图片
img-responsive: 图片自适应
img-rounded : 图片设置圆角
img-circle : 图片设置正圆
img-thumbnail : 图片添加边框线
布局类：辅助类
pull-right : 强制元素右浮动
pull-left : 强制元素左浮动
clearfix : 清除浮动元素的影响
text-left文 : 本左对齐
text-right : 文本右对齐
text-center : 文本居中对齐
center-block : 块元素居中
布局类：响应式工具（不同屏幕尺寸隐藏或显示页面内容）
使用BootStrap插件实现常见的交互效果
插件的使用步骤
引入BootStrap样式
引入js文件：jQuery.js + BootStrap.min.js
复制HTML结构, 并适当调整结构或内容
