今日所学内容
响应式布局
响应式布局的开发原理
就是使用媒体查询针对不同的宽度设备进行布局和样式的设置，从而适配不同设备的目的
设备划分情况
小于768px是超小屏设备（手机）
768px-992px之间的是小屏设备（平板）
992px-1200px之间的是中屏设备（桌面显示器）
大于1200px的是宽屏设备（大桌面显示器）
响应式布局容器
响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。
父级容器版心尺寸划分
超小屏幕版心宽度：100%
小屏幕版心宽度：750px
中等屏幕版心宽度：970px
大屏幕版心宽度：1170px
也可以根据实际情况划分
bootstrap前端框架
bootstrap前端框架简介
标准化的html+css编码规范书写的框架
提供了一套简介、直观、强大的组件
有自己的生态圈，更新迭代的速度比较快
提高开发效率，让开发更简单
版本介绍
2.x.x:停止维护，兼容性比较好，代码不够简洁，功能也不是很强大。
3.x.x:目前使用最多的、最稳定的版本，但是他放弃了IE6和IE7，对IE8支持，但是界面效果不好，偏向于用于开发响应式布局、移动设备优先的web项目
4.x.x:目前的最新版本，使用的范围不是特别广，目前不是很流行。
bootstrap的基本使用
在网站下载bootstrap的源码
将压缩包解压到需要使用bootstrap框架的目录中
创建使用bootstrap的HTML骨架结构
直接使用bootstrap里预先设定好的样式即可
bootstrap的栅格系统
概念
bootstrap需要为页面内容和栅格系统包裹一个.container或者.container-fluid容器
.container类
响应式的布局容器
大屏容器宽度1170px
中屏容器宽度970px
小屏容器宽度750px
超小屏容器宽度100%
.container-fluid类
流式布局的容器，宽度为100%
占据全部视口宽度的容器
栅格系统介绍
bootstrap提供了一套响应式、移动设备优先的栅格系统，随着屏幕或者视口尺寸的增加，系统会自动将屏幕分为最多12列的栅格。
栅格系统用于通过一系列的行（row）和列（column）的组合来创建页面布局，我们写的页面内容就可以放到这些建好的布局中
使用栅格系统的注意点
按照不同屏幕划分1-12等分（row）去除父容器左右12px
每一列默认有15px的左右内边距
栅格系统的参数
xs:extra small
sm:small
md:medium
lg:large
bootstrap栅格嵌套
栅格系统内置的栅格可以进行再次嵌套的操作，简单理解就是分好的栅格内可以再次进行栅格划分，但嵌套时，必须要先定义一个行（row）。
bootstrap栅格列偏移
可以使用.col-lg-offset- 的类可以将列向右侧进行偏移。其实偏移的原理是给当前元素增加了额左外边距
bootstrap栅格列排序
我们可以通过.col-lg-push- （将盒子向右推几份）和.col-lg-pull-（将盒子向左拉几份） 改变列的顺序
bootstrap栅格系统响应工具
在不同的屏幕下元素的显示:.visible-
在不同屏幕下控制元素的隐藏：hidden-
前端页面布局的总结
pc端
先写结构再写样式
结构永远比样式重要
H5C3在使用的时候会有部分浏览器出现兼容性问题，但在移动端使用时基本不会出现问题
移动端
移动端的主流方案：单独制作移动端页面
移动端的备选方案：响应式布局页面兼容移动端
移动端的技术选型：流式布局、flex弹性布局、rem布局、响应式布局
|
