Bootstrap响应式Web开发（第2版）-课件 第8章 项目实战——基于Bootstrap的在线学习平台.pptx

第8章项目实战——基于Bootstrap的在线学习平台;学习目标/Target;学习目标/Target;章节概述/Summary;目录/Contents;目录/Contents;项目介绍;;8.1.1项目展示;;项目首页在特大型及以上设备（视口宽度≥1200px）中的页面效果如下图所示。;项目首页在超小型设备（视口宽度576px）中的页面效果如下图所示。;;8.1.2项目分析;8.1.2项目分析;;在线学习平台的目录结构如下图所示。;8.1.3项目目录结构;导航栏模块;;8.2.1导航栏模块效果展示;8.2.1导航栏模块效果展示;;整个导航栏模块可以分为3部分，包括品牌标识区域、折叠按钮区域和导航菜单区域，该模块结构设计图如下图所示。;;创建D:\Bootstrap\chapter08目录，并使用VSCode编辑器打开该目录。;轮播图模块;;轮播图模块使用轮播组件实现，其在特大型及以上设备（视口宽度≥1200px）中的页面效果如下图所示。;;轮播图模块可以分为上下两部分，其中，上半部分包含指示器区域、轮播项目区域和左右切换按钮区域；下半部分为学习资源区域，该模块结构设计图如下图所示。;;在index.html文件中，编写轮播图模块的结构。;视频教程模块;;视频教程模块使用栅格系统和卡片组件实现，其在特大型及以上设备（视口宽度≥1200px）中的页面效果如下图所示。;视频教程模块在中型以下设备（视口宽度768px）中显示为一行两列的布局，页面效果如下图所示。;;视频教程模块可以分为两部分，包括标题区域和内容区域，该模块结构设计图如下图所示。;;8.4.3视频教程模块代码实现;学习路线模块;;学习路线模块使用导航组件实现，其在特大型及以上设备（视口宽度≥1200px）中的页面效果如下图所示。;学习路线模块在中型设备（768px≤视口宽度992px）中，导航项区域会出现一个水平滚动条，标签页内容呈两列显示，页面效果如下图所示。;学习路线模块在中型以下设备（视口宽度768px）中，导航项区域会出现一个水平滚动条，标签页内容呈一列显示，页面效果如下图所示。;;学习路线模块可以分为3部分，包括标题区域、导航区域和标签页内容区域，该模块结构设计图如下图所示。;;在index.html文件中，编写学习路线模块的结构。;热门学习工具模块;;??门学习工具模块使用栅格系统实现，其在特大型及以上设备（视口宽度≥1200px）中的页面效果如下图所示。;热门学习工具模块在超小型设备（视口宽度576px）中的页面效果如下图所示。;;热门学习工具模块可以分为两部分，包括标题区域和内容区域，该模块结构设计图如下图所示。;;8.6.3热门学习工具模块代码实现;8.6.3热门学习工具模块代码实现;版权模块;;版权模块使用栅格系统组件实现，版权模块在特大型及以上设备（视口宽度≥1200px）中的页面效果如下图所示。;版权模块在中型及以下设备（视口宽度992px）中显示上下两部分，并且让第一列的内容单独呈一行显示，其余3列在同一行显示，页面效果如下图所示。;;版权模块可以分为4部分，包括版权信息区域、关于我们区域、新手指南区域和合作伙伴区域，该模块结构设计图如下图所示。;;在index.html文件中，编写版权模块的结构。;本章小结