《响应式Web开发》PPT课件 刘爱民 郴州职业技术学院

 
课件内容： 
课程指导文件 
1.1课程整体设计方案 
1.2课程单元设计方案 
模块一初识Bootstrap 
2.1什么是Bootstrap 
2.2Bootstrap的特点 
2.3Bootstrap的组成 
2.4浏览器 
2.5移动Web开发的主流方案 
2.6下载和环境安装 
模块二视口 
3.1什么是视口 
3.2利用标签设置视口 
模块三移动端页面布局 
4.1移动端页面常用布局 
4.2流式布局 
4.3什么是弹性盒布局 
4.4弹性盒布局常用属性（display) 
4.5弹性盒布局常用属性（flex-flow) 
4.6弹性盒布局常用属性（justify-content) 
4.7弹性盒布局常用属性（align-items) 
4.8弹性盒布局常用属性（order) 
4.9弹性盒布局常用属性（flex与align-self) 
4.10什么是媒体查询 
4.11响应式布局容器 
4.12REM单位 
4.13通过媒体查询和rem单位实现元素大小动态变化 
模块四Bootstrap栅格系统 
5.1栅格系统概述 
5.2动手实现简单版栅格系统 
5.3Bootstrap布局容器 
5.4.container-fluid类 
5.5.container类 
5.6栅格系统的行和列 
5.7学生信息表格案例 
5.8栅格系统的类前缀 
5.9使用类前缀设置列的宽度 
5.10利用栅格系统实现导航栏效果 
5.11栅格系统中的列嵌套 
5.12栅格系统中的列偏移 
模块五Bootstrap框架常用组件 
6.1什么是组件 
6.2组件的优势 
6.3引入Bootstrap的核心文件 
6.4引入jQuery文件 
6.5Bootstrap常用组件-引入依赖文件 
6.6Bootstrap常用组件-按钮 
6.7Bootstrap常用组件-导航 
6.8Bootstrap常用组件-面包屑导航 
6.9Bootstrap常用组件-分页 
6.10Bootstrap常用组件-列表 
6.11Bootstrap常用组件-表单 
6.12Bootstrap常用组件-按钮组 
6.13Bootstrap常用组件-输入框组 
6.14折叠菜单 
6.15下拉菜单 
6.16什么是轮播图 
6.17轮播图的功能分析 
6.18轮播图活动信息 
6.19轮播图左侧右侧箭头 
6.20轮播图指示器 
模块六Bootstrap常用布局样式 
7.1标题类-设置标题 
7.2标题类-设置副标题 
7.3文本类-强化文本 
7.4文本类-文本颜色 
7.5文本类-文本格式 
7.6列表类-列表初始化 
7.7列表类-内联列表 
7.8列表类-定义列表水平显示 
7.9代码样式 
7.10图文样式-使用.img-fluid样式 
7.11图文样式-使用HTML5提供的标签 
7.12图文样式-使用图片布局模式 
7.13图文样式-图文组合 
7.14表格布局 
7.15边框样式-添加或移除边框 
7.16背景颜色 
模块七综合案例－潮流穿搭网站 
8.1项目展示 
8.2创建项目目录结构 
8.3设置元素内外边距值 
8.4设置元素某侧的边距值 
8.5设置字体图标 
8.6页面初始化 
8.7页面结构 
8.8导航栏模块 
8.9轮播图模块 
8.10潮流穿搭技巧模块 
8.11媒体对象 
8.12潮流穿搭风格模块 
8.13潮流穿搭新闻模块 
8.14合作伙伴和著作权声明模块 
项目十一Bootstrap常用样式 
9.1版式 
9.2表格 
9.3表单 
9.4按钮 
9.5图片 
9.6工具 
模块三组件和插件 
10.1正确使用CSS组件 
10.2下拉菜单 
10.3按钮组 
10.4按钮式下拉菜单 
10.5导航 
10.6导航条 
10.7面包屑和分页 
10.8标签、徽章和缩略图 
10.9警告框和进度条 
10.10媒体和版式 
10.11输入框和字体图标 
10.12轮播 
10.13弹出框 
10.14折叠 
模块四Bootstrap综合应用 
11.1餐饮类网站首页 
项目十四环保网站首页 
12.1环保网站首页 
模块五个人摄影相册 
13.1页面效果和操作要求 
13.2设计思路 
13.3准备工作 
13.4设计单视图导航条 
13.5设计主体内容 
模块六酒店预定微信wap网站 
14.1设计思路 
14.2设计首页 
14.3设计登录页 
14.4选择城市 
14.5选择酒店 
14.6预定酒店 
快速入门 
15.1Bootstrap简介 
15.2Bootstrap安装和测试 
15.3布局容器 
15.4栅格系统 
布局 
16.1布局容器 
16.2栅格系统 
页面内容 
17.1排版 
17.2代码 
17.3图片 
17.4表格 
17.5颜色 
组件 
18.1面包屑导航 
18.2按钮 
18.3轮播 
18.4折叠 
18.5下拉菜单 
18.6表单 
18.7模态框 
18.8导航 
18.9导航条 
18.10进度条 
18.11分页 
18.12滚动监听 
18.13标签页 
18.14警告框 
18.15弹出框 
18.16工具提示 
18.17Affix 
工具类 
19.1边框（Borders） 
19.2清除浮动（Clearfix） 
19.3关闭图标 
19.4颜色（Colors） 
19.5Display属性 
19.6内嵌 
19.7Flex布局 
19.8浮动（Float） 
19.9图片替换 
19.10溢出（Overflow 
19.11定位（Position） 
19.12屏幕识读器 
19.13阴影（Shadows） 
19.14尺寸（Sizing） 
19.15间隔（Spacing） 
19.16文本（Text） 
19.17垂直对齐 
19.18可见性 
扩展内容 
20.1图标 
20.2相关素材及案例下载 
20.3赏析