使用媒体查询对不同宽度的设备进行对应布局和样式的设置，从而适配不同设备的目的。
| 设备划分 | （宽度）尺寸区间 |
|---|---|
| 超小屏幕（手机） | <768px |
| 小屏设备（平板） | 768~992px |
| 中等屏幕（桌面显示器） | 992~1200px |
| 宽屏设备（大桌面显示器） | >1200px |
需要一个父级作为布局容器，配合子级元素实现变化。
常见的响应式尺寸划分
| 设备划分 | 常见尺寸设置 |
|---|---|
| 超小屏幕（手机） | 宽度100% |
| 小屏设备（平板） | 宽度750px |
| 中等屏幕（桌面显示器） | 宽度970px |
| 宽屏设备（大桌面显示器） | 宽度1170px |
原理介绍
1.3 响应式案例：响应式导航栏
响应式导航栏
- 导航栏
- 导航栏
- 导航栏
- 导航栏
- 导航栏
- 导航栏
- 导航栏
- 导航栏
2.Bootstrap前端开发框架
2.1 Bootstrap简介
Bootstrap来自Twitter，是目前最受欢迎的前端框架，是基于html、css和js的，简单灵活，是的Web开发更加快捷。
中文官网：http://www.bootcss.com/
官网：http://getbootstrap.com/
2.2 Bootstrap使用按照框架规范使用，使用四步曲如下：
-
创建文件夹结构（ps:没写后缀标示文件夹）
-bootstrap
-css
-fonts
-js
-css
-img
-index.html
-
创建html骨架机构
-
引入相关样式文件
-
书写内容
Bootstrap 101 Template 你好，世界！
Bootstrap为页面内容和栅格系统报过来一个.container容器，Bootstrap预先定义好了这个类，叫.container，它提供了两个作此用处的类
-
container类
响应式布局容器，宽度固定，如下：
设备划分 宽度设置 超小屏(<768px) 100% 小屏(>=768px) 750px 中屏(>=992px) 970px 大屏(>=1200px) 1170px -
container-fluid类
- 流式布局容器 百分百宽度
- 占据全部视口（viewport）的容器
- 适合于单独做移动端开发
-
栅格系统（grid systems），是指将网页布局划分为等宽的列，然后通过列数的定义来模块化页面布局。
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着时评或视口尺寸的增加，系统会自动分为最多12列。
Bootstrap里面宽度是固定的，但是在不同屏幕下，container的宽度不同，再把container划分为12等份。
3.2 栅格系统参数栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，我们再将自己的内容放入已经创建好的布局中。
| 超小屏 | 小屏 | 中屏 | 大屏 | |
|---|---|---|---|---|
| .container最大宽度 | 自动（100%） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列数 | 12 | 12 | 12 | 12 |
值得注意的是，每一列都有一个15px的padding。
如果要覆盖原有类的样式，直接重新写样式再添加上去即可（直接覆盖）。
参考代码如下：
Bootstrap Exercise
1
2
3
4
1
2
3
4
1
2
3
4
3.3 列嵌套
栅格系统内置的栅格系统将内容再次嵌套，简单来讲就是将一个列再分成若干份小列。我们可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。
例如，将大屏下col-lg-2再划分12份。
注意，12份与份之间不能有margin，否则会被挤到下一行。
如果想实现元素之间有空白，则可以让大盒子划分12份，大盒子设置空白padding，里面小盒子放内容。
参考代码如下：
Bootstrap Exercise
a
b
a
b
3
4
3.4 列偏移
使用.col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用*选择器为当前元素增加了左侧的边距margin。
使用场景：希望左右分布（或居中对齐），中间空着，比如左边四份，右边四份，中间四份空着，可以给右边四份加个右偏移。（也可以通过加空盒子实现）
参考代码如下：
Bootstrap Exercise
1
2
3.5 列排序
通过使用.col-md-push-*（往右推）和.col-md-pull-*（往左拉）可以很容易的改变列（column）的顺序。(例如：A8 B4 -> B4 A8)
参考代码如下：
Bootstrap Exercise
左侧
右侧
3.6 响应式工具
为了加快对移动设备友好的页面开发工作，利用媒体查询功能时，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。
使用场景举例：淘宝有四列内容，但第三列不重要，缩小之后直接隐藏第三列。
| 类名 | 超小屏 | 小屏 | 中屏 | 大屏 |
|---|---|---|---|---|
| .hidden-xs | 隐藏 | 可见 | 可见 | 可见 |
| .hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
| .hidden-md | 可见 | 可见 | 隐藏 | 可见 |
| .hidden-lg | 可见 | 可见 | 可见 | 隐藏 |
代码示例如下：
Bootstrap Exercise
1我只在大屏中显示
2
4
附表：Bootstrap组件 https://v3.bootcss.com/componengts/
