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

第8章项目实战——基于Bootstrap的在线学习平台《Bootstrap响应式Web开发（第2版）》学习目标/Target

熟悉项目目录结构，能够归纳各个目录和文件的作用

掌握导航栏模块的开发，能够独立完成导航栏模块的代码编写

掌握轮播图模块的开发，能够独立完成轮播图模块的代码编写

掌握视频教程模块的开发，能够独立完成视频教程模块的代码编写学习目标/Target

掌握学习路线模块的开发，能够独立完成学习路线模块的代码编写

掌握热门学习工具模块的开发，能够独立完成热门学习工具模块的代码编写

掌握版权模块的开发，能够独立完成版权模块的代码编写章节概述/Summary通过对前面章节的学习，相信读者已经掌握了移动Web开发和Bootstrap的核心知识。本章将以项目实战的方式引领读者应用所学内容，完成基于Bootstrap的在线学习平台首页的响应式页面制作。本书在配套资源中提供了项目的源代码，读者可以配合源代码进行学习。目录/Contents8.18.28.3项目介绍导航栏模块轮播图模块8.4视频教程模块目录/Contents8.58.68.7学习路线模块热门学习工具模块版权模块项目介绍8.1

先定一个小目标！熟悉项目展示，能够总结各个模块在不同设备的显示效果8.1.1项目展示8.1.1项目展示随着互联网的高速发展和智能设备的普及，在线教育成为一种受欢迎的学习方式。在线教育不受时间和地点的限制，使人们可以在空闲时间和合适的地点进行学习，无论是学生还是在职员工，都可以获得教育资源，并自主选择学习的速度和方式。此外，教育机构和教育者也可以通过在线教育平台广泛地传播知识和技能，惠及更多的学习者。在这样的背景下，在线学习平台同时作为在线教育平台，致力于为用户提供高质量的学习资源和教程，以满足不同用户的学习需求和兴趣。通过提供方便的浏览、搜索和访问方式，在线学习平台能够帮助用户拓宽知识储备、提升技能水平，并在不断发展的“数字化时代”保持竞争优势。本项目的页面支持不同类型设备的自适应，读者可以选择任意一种类型的设备查看项目的页面效果。在开发过程中，可以使用Chrome浏览器中的开发者工具，测试页面在不同设备的显示效果。8.1.1项目展示项目首页在特大型及以上设备（视口宽度≥1200px）中的页面效果如下图所示。8.1.1项目展示项目首页在超小型设备（视口宽度<576px）中的页面效果如下图所示。8.1.1项目展示

先定一个小目标！熟悉项目分析，能够归纳6个模块的功能和作用8.1.2项目分析8.1.2项目分析项目首页主要由6个模块组成，从上到下依次为导航栏模块、轮播图模块、视频教程模块、学习路线模块、热门学习工具模块和版权模块，如下图所示。8.1.2项目分析学习路线模块主要用于展示不同学科的学习路线，并提供标签页切换功能。在较小的视口宽度下，会出现一个水平滚动条，以便用户可以查看所有标签。版权模块主要用于展示网站的版权信息、关于我们、新手指南和合作伙伴等内容。在较大视口宽度下，版权模块通常显示为4列；在较小视口宽度下，版权信息列会单独占据一行显示，而其他列在另一行显示。热门学习工具模块主要用于展示学习工具的简介、下载链接和下载人数等信息。导航栏模块主要用于实现网站页面的导航和跳转。在响应式设计中，导航栏会根据设备类型显示不同的布局。视频教程模块主要用于展示视频课程的信息，其可以根据设备类型展示不同列数的视频课程列表。轮播图模块主要用于展示在线学习平台的活动信息，通常是一组轮播的图像。在移动设备上，用户可以通过触摸滑动手势切换轮播图。首页的6个模块的简要介绍如下。

先定一个小目标！熟悉项目目录结构，能够归纳各个目录和文件的作用8.1.3项目目录结构在线学习平台的目录结构如下图所示。8.1.3项目目录结构project：项目根目录，项目中所有的文件都存放在此目录下。css：CSS目录，在该目录下有3个文件，分别为bootstrap.min.css、index.css和media.css，这3个文件的说明如下。bootstrap.min.css是Bootstrap的核心样式文件。index.css是自定义的样式文件。media.css是自定义的媒体查询文件。8.1.3项目目录结构fonts：字体图标文件目录，用于存放项目引用的字体图标文件。images：图像文件目录，用于存放项目引用的图像文件。js：JavaScript文件目录，在该目录下有两个文件，分别为bootstrap.min.js、bootstrap.bundle.min.js，这两个文件的说明如下。bootstrap.min.js是Bootstrap的核心JavaScript文件，包含Bootstrap框架所需的所有JavaScript功能，包括一些常用的组件和插件。bootstrap.bundle.min.js用于实现Bootstrap的弹出式组件，例如下拉菜单、弹出框和模态框等。index.html：项目的首页文件。导航栏模块8.2

先定一个小目标！了解导航栏模块的效果展示，能够模拟导航栏模块在不同设备中的效果呈现8.2.1导航栏模块效果展示8.2.1导航栏模块效果展示导航栏模块使用导航栏组件实现，导航栏模块在特大型及以上设备（视口宽度≥1200px）中的页面效果如下图所示。导航栏模块在中型以下设备（视口宽度<768px）中会自动折叠，并出现一个“”按钮，页面效果如下图所示。8.2.1导航栏模块效果展示单击“”按钮可以展开导航菜单，再次单击可以收起导航菜单，导航菜单展开的页面效果如下图所示。

先定一个小目标！了解导航栏模块的结构分析，能够完成导航栏模块结构的设计8.2.2导航栏模块结构分析整个导航栏模块可以分为3部分，包括品牌标识区域、折叠按钮区域和导航菜单区域，该模块结构设计图如下图所示。8.2.2导航栏模块结构分析导航栏模块的实现细节说明如下。①品牌标识区域：包含一个品牌标识的图像。②折叠按钮区域：包含一个折叠按钮，用于控制折叠内容的展开或折叠行为。③导航菜单区域：包含导航菜单列表、搜索表单、“登录”按钮和“注册”按钮。

先定一个小目标！掌握导航栏模块的开发，能够独立完成导航栏模块的代码编写8.2.3导航栏模块代码实现创建D:\Bootstrap\chapter08目录，并使用VSCode编辑器打开该目录。复制本章配套源代码中的css、fonts、images和js文件夹，以及index.html文件并放入chapter08目录下。在index.html文件中，编写导航栏模块的结构。编写品牌标识区域的结构。实现导航栏模块编写折叠按钮区域的结构。编写导航菜单区域的结构。在style.css文件中，编写导航栏模块的样式。8.2.3导航栏模块代码实现在media.css文件中，编写导航栏模块的媒体查询的样式。步骤1步骤2步骤3步骤4步骤5步骤6步骤7步骤8轮播图模块8.3

先定一个小目标！了解轮播图模块的效果展示，能够模拟轮播图模块在不同设备中的效果呈现8.3.1轮播图模块效果展示轮播图模块使用轮播组件实现，其在特大型及以上设备（视口宽度≥1200px）中的页面效果如下图所示。轮播图模块在超小型设备（视口宽度<576px）中的页面效果如下图所示。8.3.1轮播图模块效果展示

先定一个小目标！了解轮播图模块的结构分析，能够完成轮播图模块结构的设计8.3.2轮播图模块结构分析轮播图模块可以分为上下两部分，其中，上半部分包含指示器区域、轮播项目区域和左右切换按钮区域；下半部分为学习资源区域，该模块结构设计图如下图所示。8.3.2轮播图模块结构分析轮播图模块的实现细节说明如下。指示器区域：包含多个指示器项目，用于控制轮播图播放顺序。轮播项目区域：包含多个轮播项目，用于展示轮播的图像。左切换按钮区域、右切换按钮区域：包含左切换按钮和右切换按钮，用于切换到上一张或下一张图像。学习资源区域：包含多个学习列表项，每个列表项带有一个图标。

先定一个小目标！掌握轮播图模块的开发，能够独立完成轮播图模块的代码编写8.3.3轮播图模块代码实现在index.html文件中，编写轮播图模块的结构。编写指示器区域的结构。编写轮播项目区域的结构。编写左切换按钮区域的结构。步骤1步骤2步骤3步骤4实现轮播图模块编写右切换按钮区域的结构。步骤5编写学习资源区域的结构。步骤6在style.css文件中，编写轮播图模块的样式。步骤78.3.3轮播图模块代码实现在media.css文件中，编写轮播图模块的媒体查询的样式。步骤8视频教程模块8.4

先定一个小目标！了解视频教程模块的效果展示，能够模拟视频教程模块在不同设备中的效果呈现8.4.1视频教程模块效果展示视频教程模块使用栅格系统和卡片组件实现，其在特大型及以上设备（视口宽度≥1200px）中的页面效果如下图所示。8.4.1视频教程模块效果展示视频教程模块在中型以下设备（视口宽度<768px）中显示为一行两列的布局，页面效果如下图所示。8.4.1视频教程模块效果展示

先定一个小目标！了解视频教程模块的结构分析，能够完成视频教程模块结构的设计8.4.2视频教程模块结构分析视频教程模块可以分为两部分，包括标题区域和内容区域，该模块结构设计图如下图所示。8.4.2视频教程模块结构分析视频教程模块的实现细节说明如下。标题区域：包含视频教程模块的标题和说明文字。内容区域：包含多个视频教程列表项，每个列表项包含封面图像、简介、级别和使用人数。

先定一个小目标！掌握视频教程模块的开发，能够独立完成视频教程模块的代码编写8.4.3视频教程模块代码实现8.4.3视频教程模块代码实现在index.html文件中，编写视频教程模块的内容。在style.css文件中，编写视频教程模块的样式。步骤1步骤2实现视频教程模块学习路线模块8.5

先定一个小目标！了解学习路线模块的效果展示，能够模拟学习路线模块在不同设备中的效果呈现8.5.1学习路线模块效果展示学习路线模块使用导航组件实现，其在特大型及以上设备（视口宽度≥1200px）中的页面效果如下图所示。8.5.1学习路线模块效果展示学习路线模块在中型设备（768px≤视口宽度<992px）中，导航项区域会出现一个水平滚动条，标签页内容呈两列显示，页面效果如下图所示。8.5.1学习路线模块效果展示学习路线模块在中型以下设备（视口宽度<768px）中，导航项区域会出现一个水平滚动条，标签页内容呈一列显示，页面效果如下图所示。8.5.1学习路线模块效果展示

先定一个小目标！了解学习路线模块的结构分析，能够完成学习路线模块结构的设计8.5.2学习路线模块结构分析学习路线模块可以分为3部分，包括标题区域、导航区域和标签页内容区域，该模块结构设计图如下图所示。学习路线模块的实现细节说明如下。标题区域：包含学习线路模块的标题和说明文字。导航区域：包含多个导航项，每个导航项带有一个图标。标签页内容区域：包含多个标签页内容项。8.5.2学习路线模块结构分析

先定一个小目标！掌握学习路线模块的开发，能够独立完成学习路线模块的代码编写8.5.3学习路线模块代码实现在index.html文件中，编写学习路线模块的结构。编写导航区域的结构。实现学习路线模块8.5.3学习路线模块代码实现步骤1步骤2步骤3步骤4步骤5在style.css文件中，编写导航区域的样式。在style.css文件中，编写标签页内容区域的样式。编写标签页内容区域的结构。热门学习工具模块8.6

先定一个小目标！了解学习路线模块的效果展示，能够模拟学习路线模块在不同设备中的效果呈现8.6.1热门学习工具模块效果展示热门学习工具模块使用栅格系统实现，其在特大型及以上设备（视口宽度≥1200px）中的页面效果如下图所示。8.6.1热门学习工具模块效果展示热门学习工具模块在超小型设备（视口宽度<576px）中的页面效果如下图所示。8.6.1热门学习工具模块效果展示

先定一个小目标！了解热门学习工具模块的结构分析，能够完成热门学习工具模块结构的设计8.6.2热门学习工具模块结构分析热门学习工具模块可以分为两部分，包括标题区域和内容区域，该模块结构设计图如下图所示。热门学习工具模块的实现细节说明如下。标题区域：包含热门学习工具模块的标题和说明文字。内容区域：包含多个学习工具列表项，每个列表项的左侧放置学习工具的图像，右侧放置学习工具的介绍信息。8.6.2热门学习工具模块结构分析

先定一个小目标！掌握热门学习工具模块的开发，能够独立完成热门学习工具模块的代码编写8.6.3热门学习工具模块代码实现8.6.3热门学习工具模块代码实现在index.html文件中，编写热门学习工具模块的结构。<divclass="course-toolsbg-bodypy-4py-lg-5mt-3"><divclass="container"><h2class="title">热门学习工具</h2><pclass="title-textmb-2pt-2">引领学习新时代的热门学习工具！</p><divclass="rowpt-2pt-lg-2"><divclass="col-2col-sm-2col-md-2col-lg-1"><imgsrc="images/tools1.jpg"alt=""class="img-fulid"></div><divclass="col-10col-sm-10col-md-10col-lg-11"><h5>JDK</h5><pclass="text-mutedtext-truncate">JDK是针对Java开发员的软件开发工具包。…</p>8.6.3热门学习工具模块代码实现>>接上页代码<buttonclass="btnbtn-warningbtn-sm">立即下载</button><buttonclass="btnbtn-lightbtn-smtext-secondarymx-4">JavaEE</button><buttonclass="btnbtn-lightbtn-smtext-secondary">3000人已下载</button></div></div>……（此处省略多个div.row）

</div></div>版权模块8.7

先定一个小目标！了解版权模块的效果展示，能够模拟版权模块在不同设备