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

响应式开发的原理

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

设备划分	尺寸区间
超小屏幕（手机）	<768px
小屏设备（平板）	>=768px <992px
中等屏幕（桌面显示器）	>=992px <1200px
宽屏设备（大桌面显示器）	>=1200px

响应式布局容器

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

Bootstrap前端开发框架

Bootstrap简介

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

• 中文网：http://www.bootcss.com/
• 官网：http://getbootstrap.com/

** 优点 **

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

Bootstrap使用

1. 创建文件夹结构
   
2. 创建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="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<!--解决ie9以下浏览器对css3Media Query的不识别-->
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

3. 引入相关样式文件

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

4. 书写内容

布局容器

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

1. container类：响应式布局的容器 固定宽度
2. container-fluid类

• 流式布局容器百分百宽度
• 占据全部视口的容器
• 适合于单独做移动端开发

Bootstrap栅格系统

栅格选项参数

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

	超小屏幕（手机）	小屏设备 （平板）	中等屏幕（桌面显示器）	宽屏设备（大桌面显示器）
.container最大宽度	自动100%	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列数	12

• 行必须放到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>

响应式工具

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

类名	超小屏	小屏	中屏	大屏
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-ig	可见	可见	可见	隐藏

预制相反的是 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>