1.媒体查询
目的：能够根据设备宽度的变化，设置差异化样式
开发常用写法
@media (媒体特性) ｛
选择器 ｛
样式
｝
｝
完整写法（几乎不用）
@media 关键词 媒体类型 and (媒体特性) ｛
选择器 ｛
样式
｝
｝
其中媒体特性最常用的是min-width（从小到大）和 max-width（从大到小）
关键词有and、only和not
除了在css里写媒体查询，还可通过外链式CSS引入
<link rel="stylesheet" media="关键词 媒体类型 and (媒体特性) " href="xx.css">
2.BootStrap
BootStrap是一套快速开发响应式网页的UI框架
中文官网: https://www.bootcss.com/
- 下载： https://www.bootcss.com/
首页 → BootStrap3中文文档 → 下载BootStrap
image.png - 使用
2.1. 引入： BootStrap提供的CSS代码
<link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.css">
2.22. 调用类：使用BootStrap提供的样式
container：响应式布局版心类
BootStrap栅格系统
栅格化是指将整个网页的宽度分成若干等份，BootStrap3默认将网页分成12等份
Ø.container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。
Ø.container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。
Ø分别使用.row类名和 .col类名定义栅格布局的行和列。
注意:
- container类自带间距15px;
- row类自带间距-15px
row的使用场景：例如
父盒子有左右15的padding，在里面放子盒子的时候，在给子盒子设置class，用bootstrap的一些类比如col-md-6的时候，子盒子也会有左右15的padding，此时可以在子盒子外在再加一个div，class使用row，可抵消父盒子的左右15的padding。
<div class="container">
<div class="row">//通过row抵消父盒子的左右15的padding
<div class="col-md-4">1 </div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
其他（了解）
1.全局css样式
掌握BootStrap手册用法，使用全局CSS样式美化标签
网站首页 → BootStrap3中文文档 → 全局CSS样式 → 按分类导航查找目标类
布局类：表格
Ø table : 基本类名, 初始化表格默认样式
Ø table-bordered : 边框线
Ø table-striped : 隔行变色
Ø table-hover : 鼠标悬停效果
Ø table-responsive : 表格宽溢出滚动
布局类：表单
Ø form-control : 设置表单元素input, select, textarea的样式
Ø checkbox 和 radio : 设置复选框和单选框的样式
Ø form-inline : 设置表单元素水平排列
Ø disabled : 设置表单禁用状态样式
Ø input-lg; input-sm, input-sm : 设置表单元素的大小
布局类：辅助类
Ø pull-right : 强制元素右浮动
Ø pull-left : 强制元素左浮动
Ø clearfix : 清除浮动元素的影响
Ø text-left文 : 本左对齐
Ø text-right : 文本右对齐
Ø text-center : 文本居中对齐
Ø center-block : 块元素居中
布局类：响应式工具（不同屏幕尺寸隐藏或显示页面内容）
美化内容类：按钮
Ø btn : 基准样式
Ø btn-info; btn-success : 设置按钮背景色
Ø btn-block : 设置按钮为块元素
Ø btn-lg; btn-sm; btn-xs : 设置按钮大小
美化内容类：图片
Ø img-responsive: 图片自适应
Ø img-rounded : 图片设置圆角
Ø img-circle : 图片设置正圆
Ø img-thumbnail : 图片添加边框线
2.插件、组件、定制
可在官网查找使用，使用方式
其中插件使用需额外引入：jQuery.js + BootStrap.min.js
