响应式布局
-
全天目标
-
了解响应式网页特点,知道响应式布局的核心技术:媒体查询的用法
-
了解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变量值
-
-
编译并下载,使用新框架
-
-
-