响应式Web开发项目教程（HTML5+CSS3+Bootstrap）（第3版）课件 第9章 Bootstrap组件应用.pptx

第9章Bootstrap组件应用《响应式Web开发项目教程（HTML5+CSS3+Bootstrap）（第3版）》

学习目标/Target了解组件的概念，能够说出Bootstrap组件的优势掌握Bootstrap组件的基本使用方法，能够通过查阅官方文档的方式学习Bootstrap组件掌握轮播组件的使用方法，能够创建轮播图掌握定位样式类的使用方法，能够灵活设置元素的位置

学习目标/Target掌握浮动样式类的使用方法，能够灵活设置元素的浮动状态掌握图像样式类的使用方法，能够设置图像的展示方式掌握阴影样式类的使用方法，能够添加或去除阴影效果掌握BootstrapIcons图标库的使用方法，能够添加图标到页面

学习目标/Target掌握列表样式类的使用方法，能够去除列表的默认样式，以及创建水平排列的列表掌握卡片组件的使用方法，能够创建基础卡片、图文卡片和背景图卡片掌握按钮组件的使用方法，能够创建基础样式按钮、轮廓样式按钮、尺寸样式按钮和状态样式按钮等掌握导航栏组件的使用方法，能够创建基础导航栏和折叠式导航栏

学习目标/Target掌握下拉菜单组件的使用方法，能够创建下拉菜单按钮和下拉菜单导航栏掌握轮播图页面的制作方法，能够完成轮播图页面的开发掌握课程介绍页面的制作方法，能够完成课程介绍页面的开发掌握下拉菜单导航栏页面的制作方法，能够完成下拉菜单导航栏页面的开发

章节概述/Summary在前端开发中，开发者经常会遇到编写相似或重复代码的情况，同时需要确保网页整体外观和样式的一致性。随着移动设备的使用越来越广泛，响应式设计变得越来越重要。然而，构建适应不同屏幕尺寸和设备的页面可能会很复杂且耗时。为了解决这些问题，我们可以使用Bootstrap组件。开发者可以借助Bootstrap组件快速构建具有统一样式和响应式设计的项目，从而减少开发时间和工作量，为用户提供更好的体验。本章将对Bootstrap常用组件的使用方法进行讲解。

目录/Contents9-19-2轮播图页面课程介绍页面9-3下拉菜单导航栏页面

轮播图页面项目9-1

项目需求小夏是一家科技公司的前端开发人员。为了增加网站的吸引力，他计划在网站首页中添加轮播图，以吸引用户的注意力，从而激发用户的兴趣。小夏打算使用轮播组件制作网站轮播图，实现图像切换效果。

项目需求本项目的具体要求如下。①参与切换的图像有3张，且第3张图像中包含自定义的文本内容，该内容在中型及以上设备（视口宽度≥768px）中显示，而在中型以下设备（视口宽度768px）中隐藏。②当鼠标指针移入图像时，图像停止自动切换。③当单击图像上的左切换按钮时，可以切换到上一张图像。④当单击图像上的右切换按钮时，可以切换到下一张图像。⑤当单击图像上的指示器时，可以切换到对应的图像。⑥当鼠标指针移出图像时，图像开始自动切换。

项目需求轮播图效果如下图所示。

知识储备先定一个小目标！了解组件的概念，能够说出Bootstrap组件的优势1.什么是组件

知识储备1.什么是组件项目开发过程中经常会用到组件。组件是独立的代码块，具有特定的功能和样式，并且可以在页面中独立使用和重复使用。组件类似我们生活中的汽车发动机，不同型号的汽车可以使用同一款发动机，这样就不需要为每一辆汽车设计一款发动机。

知识储备1.什么是组件Bootstrap为开发人员提供了许多可重用的组件，包括按钮组件、导航栏组件、下拉菜单组件、卡片组件和轮播组件等。我们可以通过简单地添加相应的HTML标签和Bootstrap的CSS类来使用它们，而无须自己编写复杂的样式和脚本。使用组件可以大大加快开发速度，并且通过组合和定制组件，可以快速构建网站和应用程序。

知识储备1.什么是组件Bootstrap组件的优势如下。①易于使用。开发人员只需要在HTML代码中添加相应的标签和CSS类，即可快速插入并使用组件。同时，Bootstrap还提供了详细的文档和示例，以帮助开发人员理解和使用组件。②响应式设计。Bootstrap的组件都支持响应式设计，可以自动适应各种屏幕尺寸和设备，这使用户在PC和移动设备中访问网页时，能够获得良好的用户体验。③可定制化。Bootstrap的组件提供了多种样式和组合方式，开发者可以根据需求进行调整和自定义。

知识储备先定一个小目标！掌握Bootstrap组件的基本使用方法，能够通过查阅官方文档的方式学习Bootstrap组件2.Bootstrap组件