响应式布局
-
全天目标
-
了解响应式网页特点，知道响应式布局的核心技术：媒体查询的用法
-
了解BootStrap框架使用方法和手册用法，能够使用BootStrap框架开发响应式网页
-
-
什么是响应式布局？
-
含义
-
响应式布局：用来在网页中实现摆放盒子的一种新方式（流式布局+弹性布局）； rem+vw+vh：用来实现页面中像素适配；
-
-
特点
-
根据设备视口的宽度大小不一样，进行布局的差异化
-
一套代码能够兼容（适配）不同的屏幕设备
-
-
-
如何实现响应式布局？
媒体查询
-
目标
-
能够使用媒体查询写法，检测不同的响应断点，设置差异化CSS样式
-
根据设备宽度的变化，设置差异化样式（CSS）
-
在某一个区间
-
基本用法
-
语法
@ media only screen and （width:320px）{
CSS代码
} -
注意
-
1、语法单词之间必须使用空格隔开
-
2、only，screen，and这些是可以省略的
-
媒体查询的代码不会立即执行，只有当前视口满足对应的宽度值时，才会执行媒体查询中的代码
-
-
案例
设备划分
max-width / min-width
-
min-width
-
max-width
-
示例
书写顺序
注意规避层叠性
-
min-width：从小到大
-
max-width：从大到小
其他写法
-
完整写法（了解）
-
关键词
-
and
-
only
-
not
-
-
媒体类型（一般不写）
-
screen（屏幕设备）
-
print（打印预览模式
-
speech（阅读器）
-
all（不区分类型）
-
-
媒体特征
-
width、heigh（视口宽高）
-
max-width、max-height（视口最大宽高）
-
min-width、min-height（视口最小宽高）
-
orientation（屏幕方向）
-
landscape横屏
-
portrait竖屏
-
-
-
link写法
-
案例：隐藏效果
第三方框架系统
-
含义
人封装好的代码（响应式功能效果），直接调用代码
-
目标
-
掌握BootStrap框架基本用法
-
掌握BootStrap框架手册用法
-
BootStrap介绍
-
UI框架
-
封装了大量的HTML、CSS、JavaScript，只需要按照框架要求书写代码，即可快速完成对应的效果
-
下载
-
生产环境
-
压缩的代码
-
开发可以直接使用
-
-
less源码
-
基于less的源码包
-
可学习使用
-
使用步骤
-
1、引入框架文件（CSS文件）
-
2、按照文件夹中提供的类进行样式的设置…
框架中可以使用哪些？
栅格系统（不难）
-
总结
-
1、栅格系统是框架中的一部分，如果要使用栅格系统，必须先引入框架对应的css文件
-
2、栅格系统将盒子最多分为12列
-
使用步骤
-
1、引入框架对应的CSS文件
-
2、盒子需要添加类名：container（有固定宽度），或者container-fluid（100%宽度）类名
-
3、使用栅格系统，必须记住预定义类
-
类前缀
-
.col-xs-值
-
表示超小屏幕（手机）
-
-
.col-sm-值
-
表示平板设备
-
-
.col-md-值
-
表示普通桌面显示器
-
-
.col-lg-值
-
表示大桌面显示器
-
-
-
注意
-
1、值的取值范围为：1~12
-
2、凡是设置了预定义类，当前元素都设置了浮动。
-
-
案例
-
-
4、响应式工具类
-
类前缀
-
.hidden-xs
-
表示手机端影藏
-
-
.hidden-sm
-
表示在ipad端影藏
-
-
.hidden-md
-
表示在普通桌面隐藏
-
-
.hidden-lg
-
表示大桌面显示器隐藏
-
-
-
案例
-
-
排版
-
表格
-
表单
-
辅助类
-
组件（字体图标）
使用
全局CSS样式
栅格系统第三方系统bootstrap
-
介绍：作用：响应式布局
-
原理：网页等分成12等分，每个元素占对应的份数
-
使用
-
大屏
-
响应断点 >= 1200px
-
类前缀 ol-lg-*
-
版心 1170px
-
-
中屏
-
响应断点 >= 992px
-
类前缀 col-md-*
-
版心 970px
-
-
小屏
-
响应断点 >= 768
-
类前缀 col-sm-*
-
版心 750px
-
-
超小屏
-
响应断点 < 768px
-
类前缀 col-xs-*
-
版心 100%
-
-
标签样式
-
表格
-
按钮
-
.....
组件
-
作用：封装常见功能的HTML+CSS
-
分类
-
布局组件
-
引入样式表
-
-
复制粘贴结构，修改内容
-
-
字体图标
-
引入样式表
-
-
空标签粘贴类名
-
-
-
插件
-
介绍
-
封装了常见功能的交互效果，包含HTML、CSS、JavaScript
-
-
使用步骤
-
引入样式表
-
-
-
引入js
-
2.1 jQuery.js
-
2.2 bootstrap.js
-
-
复制结构，修改内容
-
-
-
定制
-
作用：针对项目定义bootstrap框架
-
步骤
-
导航菜单：定制
-
-
输入对应的Less变量值
-
-
编译并下载，使用新框架
-
-
-