移动布局基础之 响应式布局

1. 响应式开发
   1.1 响应式开发原理
   使用媒体查询针对不同宽度设备进行布局和样式的设置，从而适配不同设备
   1.2 响应式布局容器
   响应式需要一个父级作为布局容器，来配合自己元素来实现变化效果
   通过媒体查询改变布局容器的大小，再改变里面子元素的排列方式和大小
   2. bootstrap前端开发框架
   2.1 bootstrap是基于html,css,javascript的最受欢迎的前端框架
   下载网址：http://bootstrap.css88.com/
   标准化的html+css编码规范
   提供了一套简洁，直观，强悍的组件
   有自己的生态圈，不断更新
   提高开发效率
   2.2 使用步骤
   1.创建文件夹结构 2.创建HTML骨架结构 3.引入相关样式文件 4.书写内容
   2.3 布局容器
   bootstrap预先定义好了这个类，叫做.container,它提供了两个作此用处的类
   1.container类：响应式布局的容器，固定宽度
   2.container-fluid: 流式布局容器百分百宽度，占据全部视口，适合单独做移动端开发
   3. bootstrap栅格系统
   3.1 栅格系统简介
   是将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局
   随着屏幕或视口尺寸的增加，系统会自动分为最多12列
   bootstrap里面的container的宽度是固定的，但是不同屏幕下，container的宽度不同
   3.2 栅格选项参数
   栅格系统通过一系列行与列的组合来创建页面布局
   行(row)必须放到container布局容器里面
   我们实现列的平均划分，需要给列添加类前缀
   xs-extra-small:超小 sm-small:小 mid-medium:中等 lg-large:大
   列(coulmn)大于12，多余的列所在的元素将被作为一个整体另起一行排列
   每一列默认有左右15像素的padding
   可以同时为一列指定多个设备的类名，以便划分不同份数
   3.3 列嵌套
   栅格系统内置的栅格系统将内容再次嵌套，就是将一个列内再分成若干份小列
   通过添加一个新的.row元素和一系列.col-元素到已经存在的col-元素内
   3.4 列偏移
   使用.col-md-offset-类可以将列向右偏移，实际上是通过使用选择器为当前元素增加了左侧边距
   3.5 列排序
   通过使用.col-md-push-(推)和.col-md-pull-(拉)类就可以改变列排序
   3.6 响应式工具
   利用媒体查询功能，使用一些工具类可以针对不同设备展示或隐藏页面内容
   .hidden-xs:超小屏隐藏 .hidden-sm:小屏隐藏 .hidden-md:中屏隐藏 .hidden-lg:大屏隐藏
   .visible-xs:超小屏显示 .visible-sm:小屏显示 .visible-md:中屏显示 .visible-lg:大屏显示