1.1 响应式开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
设备划分：
- 超小屏幕（手机）<768px
- 小屏设备（平板）>=768px~992px
- 中等屏幕（桌面显示器）>=992px~1200px
- 宽屏设备（大桌面显示器）>=1200px
1.2 响应式布局容器
响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
2.1 Bootstrap简介
2.版本
- 2.xx：停止维护，兼容性好，代码不够简洁，功能不够完善
- 3.xx：目前使用最多，稳定，但是放弃了IE6-IE7。对IE8支持但是界面效果不好，偏向用于开发响应式布局、移动设备优先的WEB项目
- 4.xx：最新版，目前不是很流行
2.2 Bootstrap使用
在现阶段我们还没有接触JS相关的课程，所以只考虑使用它的样式库
控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。
Bootstrap使用四部曲：1.创建文件夹结构2. 创建html骨架结构3.引入相关样式文本4.书写内容
这里重点说明一下骨架部分
视口标签
<meta http-equiv="X-UA-Compatible" content="IE=edge">让浏览器以ie最高版本来显示网页。
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
让ie9以下版本的浏览器兼容HTML5和媒体查询。
4. 书写内容
- 直接拿Bootstrap预先定义好的样式来使用
- 修改Bootstrap原来的样式，注意权重问题
- 学好Bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果。
2.3 布局容器
Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstrap预先定义好了这个类，叫.container它提供了两个作此用处的类。
1.container类
- 响应式布局的容器 固定宽度
- 大屏（>=1200px)宽度固定为1170px
- 中屏（>=992px)宽度定为970px
- 小屏（>=768px)宽度定为750px
- 超小屏（100%）
2.container-fliod类
- 流式布局容器 百分百宽度
- 占据全部视口（viewport）的容器
- 适合于单独做移动端开发
3.2 栅格选项参数
栅格系统用于通过一系列的行（row)与列(column)的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
- 行（row）必须放到container布局容器里面
- 我们实现列的平均划分 需要给列添加类前缀
- xs-extra small：超小；sm-small：小；md-mediu：中等；lg-large：大；
- 列（colum)大于12，多余的列（column)所在的元素将被作为一个整体另起一行排列
- 每一列默认有左右15像素的padding
- 可以同时为一列指定多个设备的类名，以便划分不同份数 例如class="col-md-4-col-sm-6"
3.3 列嵌套
栅格系统中内置栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的.row元素和一系列.col-sm-元素到已经存在的.col-sm-元素内。
我们列嵌套最好加一个行row，这样可以消除父元素的padding值而且高度自动和父元素一样高。
<div class="col-md-4">
<div class="row">
<div class="col-md-6">a</div>
<div class="col-md-6">b</div>
</div>
</div>
3.4 列偏移
使用.col-md-offset-类可以将列向右侧偏移。这些类实际是通过使用选择器为当前元素增加了左侧的边距（margin）。
3.5 列排序
通过使用.col-md-push-和.col-md-pull-类就可以很容易的改变列（column）的顺序。
3.6 响应式工具
为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。
与之相反的是visible-xs visible-sm visible-md visible-lg是显示某个页面内容。
bootstrap当中还有按钮表单表格，可以参考bootstrap文档。
