Web移动端响应式开发
响应式开发原理
就是使用媒体查询针对不同的宽度的设备进行布局和样式设置，从而适配不同设备
设备的划分
小于768px的为超小屏幕（手机）
768px-992px之间为小屏幕设备（平板）
992px-1200px之间的为中等屏幕（桌面显示器）
大于1200px以上就是超大屏幕（大桌面显示器）
版心尺寸划分
小于768px，版心为100%
768px-992px，版心为750px
992px-1200px，版心为970px
大于1200px，版心为1170px
BootStrap前端框架
BootStrap网址地址
h我t不t信p把s://v3.bootcss.c你o发m不/出来
BootStrap简介
1、标准化的html+css编码规范
2、提供了一套简洁、只管、强大的组件
3、有自己生态圈，会不断的更新迭代
4、让开发更简单、提升我们的开发效率
版本介绍
1、2.x.x：停止维护，兼容性好，但是代码不够简介，功能不完善
2、3.x.x：目前使用最多的，稳定，但是它放弃了IE6、IE7。对IE8支持，但是界面效果不太好，偏向开发响应式布局、移动设备优先的Web项目
4.x.x：最新版，目前使用的用户较少
BootStrap的基本使用
在现阶段我们还没接触JS的相关内容，所以只考虑使用他的样式库
引入BootStrap的步骤
1、创建文件结构，将bootstrap的代码放入相应的文件夹中
2、创建html骨架结构
3、head中link引入相关文件（bootstrap.min.css）
BootStrap栅格系统
BootStrap布局容器
为页面内容和栅格系统包裹了一个.container 容器和 .container-fluid容器
.container
响应式布局的容器，固定宽度
大屏（屏幕宽度>=1200px）宽度设定为1170px
中屏（屏幕宽度>=992px）宽度设定为970px
小屏（屏幕宽度>=768px）宽度设定为750px
超小屏 宽度设定为100%
.container-fluid
流式布局容器，百分之百宽度
占据全部视口的容器
注意点：
1、bootstrap给两个容器，都增加了15px的左右内边距
bootstrap栅格系统的使用
随屏幕或视口尺寸的增加，系统会自动分配堆到12列的栅格系统
栅格系统通过一些列的行（row）和列（column）的组合来创建页面布局，我们内容就可以写在这些创建好的布局中
1、按照不同的屏幕划分1-12等份，如果想去掉padding，可以给父容器加row即可
2、屏幕划分：xs-extra-small超小；sm-small小；md-media中等；lg-large大
BootStrap的栅格系统参数
超小屏幕（<768px）小屏幕（>=768px）中等屏幕（>=992px）大屏幕（>=1200px）
.container 100% 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列数 12 12 12 12
根据栅格份数的不同会有不同的显示方式
1、份数为12份会占满整个屏幕
2、如果份数不平均，会按照每个盒子的份数进行分配
3、份数不够12份会在最后一个盒子之后留空白
4、总份数超过12份，超过12份的盒子会换行显示
5、通过多类名的方式来控制盒子在不同屏幕下的占比
栅格系统的列嵌套 每一个盒子都可以作为一个新的行进行处理，进行列嵌套操作（套娃）
栅格系统的列偏移 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在不同屏幕下控制元素的显示和隐藏
在不同屏幕宽度下对元素进行隐藏
1、.hidden-xs:超小屏幕（<768px）隐藏
2、.hidden-sm:小屏幕（>=768px）隐藏
3、.hidden-md:中等屏幕（>=992px）隐藏
4、.hidden-md:大屏幕（>=1200px）隐藏
注意，所以隐藏只在达到该选项时隐藏，其他均显示
在不同屏幕宽度下对元素进行显示
1、.visible-xs:超小屏幕（<768px）显示
2、.visible-sm:小屏幕（>=768px）显示
3、.visible-md:中等屏幕（>=992px）显示
4、.visible-md:大屏幕（>=1200px）显示
注意，所以显示只在达到该选项时显示，其他均显示
|
