一、今日学习内容
响应式开发原理
就是媒体查询针对不同的宽度的设备进行布局和样式的设置，粗而适配不同的设备
设备的划分情况：
小于768px的为超小屏幕（手机）
768px~992px之间的为小屏幕设备（平板）
992px~1200px之间为中等屏幕（桌面显示器）
大于1200px以上就是超大屏幕（大桌面显示器）
版心尺寸划分
小于768px的为超小屏幕（手机）版心为100%
768px~992px之间的为小屏幕设备（平板）版心为750px
992px~1200px之间为中等屏幕（桌面显示器）版心为970px
大于1200px以上就是超大屏幕（大桌面显示器）版心为1170px
BootStrap前端框架
bootstrap网站地址：
v3.bootcss
bootstrap简介
标准化的html+css编码规范
提供了一套简介、直观、强大的组件
有自己生态圈，会不断更新迭代
让开发会更简单，提升我们的开发效率
版本简介
2.X.X：停止维护，兼容性好，但是代码不够简洁，功能不完善
3.x.x：目前使用最多的，稳定，但是他放弃了ie6、IE7.对IE8支持，但界面效果不太好，盘香开发响应式布局、一定设备优先的web项目
4.x.x：最新版本，目前使用的用户较少
bootstrap的基本使用
现阶段我们还没有接触js的相关内容，所以只考虑使用它的样式库
引入bootstrap的步骤：
创建文件结构，将bootstrap的代码放入相对应的文件夹中
创建html骨架结构
引入相关文件
书写内容
bootstrap的栅格系统
bootstrap的布局容器
他为页面内容和栅格系统包裹了一个.container容器或者.container-fluid容器
.container
响应式布局的容器，固定宽度
大屏（屏幕宽度>=1200px）宽度设定1170px
中屏（屏幕宽度>=992px）宽度设定970px
小屏（屏幕宽度>=768px）宽度设定750px
超小屏宽度设定是100%
.container-fluid
流式布局容器，百分之百宽度
占据全部是扣的容器
注意点：bootstrap给两个容器，都增加了15px的做右内边距（padding值）
bootstrap的栅格系统的使用
随着屏幕或者视口的尺寸增加，系统会自动分配最多12列的栅格
栅格系统通过一系列的行（row）和列（column）的组合穿件页面布局，我们内容就可以写在这些创建好的布局中
按照不同的屏幕划分为1~12等份，如果想去掉padding，可以给他们父容器夹row即可
xs-extra-small：超小；sm-small：小；md-media：中等；lg-large：大；
根据栅格份数的不同会有不同的显示方式
份数为12份会占满盒子
如果份数不平均的话，会按照么个盒子的份数进行分配
份数不够会在最后一个盒子之后留白
总分数超过12份，超过部分的盒子会换行显示
通过多类名的方法来控制盒子在不同屏幕下的占比
栅格系统的列嵌套每个盒子都可以作为一个新的处理器，进行列嵌套操作（套娃）
栅格系统的列偏移col-lg-offset-n，代表在大屏幕下盒子将向右向右移动N列，在其他盒子在进行偏移，只需要更改col-lg-offset-n 中的lg即可（xs、sm、md、lg）
栅格系统的排列：通过使用.col-lg-push-n（将盒子向右推n列）和.col-lg-pull-n（将盒子向右拉n列）
bootstrap在不同屏幕下控制元素的显示与隐藏
不同屏幕宽度下对元素进行隐藏
.hidden-xs：超小屏下隐藏
.hidden-sm：小屏幕下隐藏
.hidden-md：中等屏幕下隐藏
.hidden-lg：大屏幕下隐藏
在不同的屏幕宽度下进行显示
.visible-xs：超小屏下显示
.visible-sm：小屏幕下显示
.visible-md：中等屏幕下显示
.visible-lg：大屏幕下显示
|
