响应式布局---------[Bootstrap框架]

响应式开发的原理

通过媒体查询针对不同宽度的设备进行布局和样式额设置，从而适应不同设备的目的

响应式布局容器

响应式需要一个父级作为布局容器，来配合自己元素来实现变化效果（通过修改容器宽度的大小影响子级）

Bootstrap前端开发框架

Bootstrap简介

是目前最受欢迎的前端框架，Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，** 使得Web开发更加快捷 **

中文网：/官网：/

** 优点 **

标准化的html+css编码规范提供了一套简洁、直观、强悍的组键有自己的生态圈，不断地更新迭代让开发更加简单，提高了开发的效率

Bootstrap使用

创建html骨架结构

<!--要求当前网页使用IE浏览器最高半杯的内科来渲染--><meta http-equiv="X-UA-Compatible" content="IE=dege"><!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放--><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"<!--[if lt IE9]><!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题--><script src="/html5shiv/3.7.2/html5shiv.min.js"></script><!--解决ie9以下浏览器对css3Media Query的不识别--><script src="/respond/1.4.2/respond.min.js"></script><![endif]-->

引入相关样式文件

<!--引入bootstrap样式文件--><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

书写内容

布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstrap预先定义好了这个类，叫.container 它提供了两个作此用处的类

container类：响应式布局的容器 固定宽度container-fluid类 流式布局容器百分百宽度占据全部视口的容器适合于单独做移动端开发

Bootstrap栅格系统

栅格选项参数

栅格系统通过一系列的行与列的组合来创建页面布局

行必须放到container布局容器里面我们实现列的平均划分需要给列添加类前缀每一列默认有左右15像素的padding列大于12列时，多余的列所在的元素列会另起一行可以同时为一列自定多个设备的类名，一遍划分不同份数 列如class=“col-md-4 col-sm-6”

列嵌套

简单理解就是一个lie内再分成若干份小列

<div class="container"><div class="row"><div class="col-md-4"><!---我们列嵌套最好加1个行row 这样可以取消父元素的padding值 而且高度自动和父级一样高--><div class="row"><div class="col-md-6">a</div><div class="col-md-6">b</div></div></div><div class="col-md-4">2</div><div class="col-md-4">3</div></div></div>

列偏移

使用.col-md-offset-实现右偏移，相当于添加一个margin值

<div class="container"><div class="row"><div class="col-md-4">左侧</div><!-- 偏移的份数 就是12-两个盒子的份数=offset的值 --><div class="col-md-4 col-offset-4">右侧</div></div><div class="row"><!-- 如果只有一个盒子 那么就偏移=（12-盒子所占份数（8））/2 --><div class="col-md-8 col-md-offset-2">中间盒子</div></div></div>

列排序

通过使用.col-md-push-* 和.col-md-pull-* 类就可以很容易的改变列的顺序

<div class="container"><div class="row"><div class="col-md-4 col-md-push-8">左侧</div><div class="col-md-8 col-md-pull-4">右侧</div></div></div>

响应式工具

目的是为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具列可以方便的这对不同设备展示或隐藏页面内容

预制相反的是visible-xs visible-sm visible-md visible-lg是显示某个页面内容

隐藏

<div class="container"><div class="row"><div class="col-xs-3">1</div><div class="col-xs-3">2</div><div class="col-xs-3 hidden-md hidden-xs">变变变</div><div class="col-xs-3">4</div></div></div>

显示

<div class="col-xs-3"><!-- 在中等屏幕下进行显示 --><span class="visible-md">显示</span></div>