笔记8：响应式布局

1、响应式开发原理

	   1）就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
	   2）超小屏幕（手机）：小于768px
	   3)  小屏幕设置（平板）：768px~992px
	   4) 中等屏幕（桌面显示器）：992~1200px
	   5) 大屏幕（pc大屏）：大于1200px

	   1) 响应式是在不同的屏幕下来实现结构的不同
	   2)关键的是在不同的屏幕下改变版心的大小
	   3)然后在盒子在呈现在不同大小的版心里面
	   4) 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，
	      从而实现不同屏幕下，看到不同的页面布局和样式变化。

2、Bootstrap

1、简介

	     1）最流行的前端框架，用于在Web上开发响应式，移动优先项目
	     2) 优点
	        1.标准的html+css编码规范
	        2.提供一套简介、直观、强悍的组件
	        3.有自己的生态圈，不断的更新迭代
	        4.让开发更简单，提高开发效率

2、使用

     1）第一步创建基本文件夹，注意：多一个bootstrap文件夹用来放 bootstrat资源
     2）第二步下载bootstrap文件放入项目
     3）第三步将基本模板复制在html里
     4）第四步引入资源文件

3、布局容器

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

  1.container类
	         1）响应式布局的容器，固定宽度
		     2）大屏（>=1200px)宽度定为1170px
		     3)中屏（>=992px）宽度定为970px
	         4)小屏（>=768px)宽度定为750px
	         5）超小屏(100%)

 2. container-fluid类
	       1)流式布局容器 百分百宽度
	       2)占据全部视口（viewport)的容器
	       3)适合于单独做移动端开发

4、栅格系统

1、定义
   指将页面布局划分为等宽度的列，然后通过列数的定义来模块化页面布局
   Bootstrap提供一套响应式、移动设备优先的流式栅格系统，随屏幕或视口尺寸的增加，系统自动分为最多12列
   container宽度固定，不同屏幕下，container宽度不同，再把container划分12等份
  
   1）栅格系统是分为行和列的 
   2）所以要先写行，创建一div添加类名为row即可 
   3） Row下面的div为列 
   4）如何设置每列占多宽？
   5）可以通过类名 col-xs-栅格的数量(设置超小屏幕)、 col-sm-栅格的 数量(设置小屏幕)、 col-md-栅格的数量(设置中等屏幕)、 col-lg- 栅格的数量(设置大屏幕) 
   6）如果列的栅格得数量加一起没有超过12咋可能出现空白并在一行显示
   7）如果列的栅格数量加一起超过12，则在开始超过12的那个换行显示

2、使用
   1）列的类名可以写多个 
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
   2）也就是可以同时设置col-xs-、 col-sm-、 col-md-、 col-lg- 
   3） 这样的话，在不同屏幕下就会有不同的结构样式

3、列嵌套
   为了使用内置的栅格将内容嵌套，通过添加一个新的.row和一系列.col-md-*列到已经存在的.col-md-*列内即可实现。嵌套row所包含的列加起来应该等于12。
     <div class="row">
        <div class="col-sm-9">
           <div class="row">
              <div class="col-xs-8 col-sm-6">
              </div>
              <div class="col-xs-4 col-sm-6">
              </div>
           </div>
        </div>
     </div>
4、列偏移
  使用.col-md-offset-*可以将列偏移到右侧。这些class通过使用*选择器将所有列增加了列的左侧margin。
  例如，.col-md-offset-4将.col-md-4向右移动了4个列的宽度。
              <div class="row">
                    <div class="col-md-4">.col-md-4</div>
                    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
              </div>

   5、列排序
     通过使用.col-md-push-* 和 .col-md-pull-*就可以很容易的改变列的顺序。
     <div class="row">
            <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
            <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
     </div>


   6、响应式工具
      利用hidden-xs等类名进行不同屏幕的显示或者隐藏