响应式开发

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.书写内容
这里重点说明一下骨架部分

视口标签

让浏览器以ie最高版本来显示网页。

让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值而且高度自动和父元素一样高。

              

                
a
                
b
              
          

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文档。