响应式布局原理：
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。
响应式尺寸划分：
超小屏幕(手机,小于768px) : 设置宽度为100%
小屏幕(平板，大于等于768px) :设置宽度为750px
中等屏幕(桌面显示器,大于等于992px) : 宽度设置为970px
大屏幕(大桌面显示器，大于等于1200px) : 宽度设置为1170px
Bootstrap简介：
1.优点
●标准化的html+ css编码规范 ●提供了一套简洁、直观、强悍的组件 ●有自己的生态圈,不断的更新迭代让开发更简单,提高了开发的效率
Bootstrap使用
1.创建文件夹结构
2.创建html骨架
3.引入相关样式文件
4.书写内容
Bootstrap栅格系统
它是指将页面布局划分为等宽的列 ,然后通过列数的定义来模块化页面布局。
Bootstrap提供了一套响应式、 移动设备优先的流式栅格系统,随着屏幕或视口( viewport)尺寸的增加， 系统会自动分为最多12列。 Bootstrap里面container宽度是固定的,但是不同屏幕下, container的宽度不同,我们再把container划分为12等份
栅格选项参数
按照不同屏幕划分为1~12等份
行( row )可以去除父容器作用15px的边距 xs-extra small :超小; sm-small :小; md-medium:中等 ; lg-large :大; 列( column)大于12 ,多余的“列( column)"所在的元素将被作为一个整体另起- 行排列 每- -列默认有左右15像素的padding 可以同时为-列指定多个设备的类名,以便划分不同份数例如class="col-md-4 col-sm-6"
Bootstrap列嵌套：
Bootstrap列偏移：
使用.col-md-offset-类可以将列向右侧偏移。这些类实际是通过使用选择器为当前元素增加了左侧的边距( margin )。
注：如果只有一个盒子那么，偏移(12-盒子所占的分数）/2
bootstrap列排序：
通过使用.col-md-push-和.col-md- pul-类就可以很容易的改变列( column )的顺序。
响应式工具：
为了加快对移动设备友好的页面开发工作,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备 展示或隐藏页面内容。
