Bootstrap响应式Web开发（第2版）-课件 第7章 Bootstrap常用组件.pptx

第7章Bootstrap常用组件;学习目标/Target;学习目标/Target;章节概述/Summary;目录/Contents;目录/Contents;初识组件;;;Bootstrap为开发人员提供了许多可重用的组件，包括按钮组件、导航组件、导航栏组件、下拉菜单组件、卡片组件、轮播组件、提示组件和模态框组件等。;Bootstrap中组件的优势如下。;;;通过查阅官方文档的方式学习Bootstrap组件的基本流程如下。;;创建D:\Bootstrap\chapter07目录，并使用VSCode编辑器打开该目录。;在浏览器中打开example.html文件，按钮效果如下图所示。;按钮组件;;7.1.1基础样式按钮;;实现基础样式按钮;在浏览器中打开button.html文件，基础样式按钮效果如下图所示。;;;;;在浏览器中打开buttonOutline.html文件，轮廓样式按钮效果如下图所示。;;7.1.3尺寸样式按钮;;实现不同大小的按钮;在浏览器中打开buttonSize.html文件，尺寸样式按钮效果如下图所示。;;Bootstrap提供了一系列能够快速设置按钮状态的类，这些类可以改变按钮在不同状态下的样式，例如禁用状态和激活状态等。;;实现不同状态下的按钮;在浏览器中打开buttonState.html文件，状态样式按钮效果如下图所示。;;Bootstrap中可以使用组合样式类将一组具有相同功能或类别的按钮进行组合，形成按钮组。通过将按钮组合在一起，可以方便地管理和展示不同种类的按钮。按钮组可以以水平或垂直的方式显示一组按钮。;;实现不同的按钮组;在浏览器中打开buttonGroup.html文件，按钮组效果如下图所示。;导航组件;;基础导航是最简单的导航菜单形式，使用导航组件实现基础导航的基本方法如下。;默认情况下，导航项在导航中水平左对齐。

若想要设置导航项的其他对齐方式，可以在列表样式标签上应用以下类。;;创建nav.html文件，在该文件中创建基础HTML5文档结构并引入bootstrap.min.css文件。;在浏览器中打开nav.html文件，基础导航效果和垂直导航效果如下图所示。;;;使用导航组件实现标签式导航的基本方法如下。;在导航项中，添加导航链接并设置其具有标签页切换的功能，基本步骤如下。;（4）创建标签页内容容器;;7.3.2标签式导航;在浏览器中打开navTab.html文件，标签式导航效果如下图所示。;;;实现胶囊式导航的基本方法与实现标签??导航的基本方法类似，但需要注意以下两点。;基础导航、标签式导航和胶囊式导航的宽度通常是固定的，不会根据不同设备自动调整宽度。如果想使导航实现响应式效果，则可以在.nav类后添加.nav-fill类或.nav-justified类，两者的区别如下。;;;在浏览器中打开navPill.html文件，胶囊式导航效果如下图所示。;;;使用导航组件实现面包屑导航的基本方法如下。;（3）设置导航项分隔符;;;在浏览器中打开navBreadcrumb.html文件，面包屑导航效果如下图所示。;导航栏组件;;;使用导航栏组件实现基础导航栏的基本方法如下。;创建导航菜单列表的基本实现步骤如下。;;;在浏览器中打开navbar.html文件，基础导航栏在中型及以上设备（视口宽度≥768px）中的效果如下图所示。;基础导航栏在中型以下设备（视口宽度768px）中会垂直堆叠，如下图所示。;;为什么给导航栏添加折叠按钮？;;在导航栏容器中添加一个折叠按钮，基本实现步骤如下。;当单击折叠按钮时，相关的导航菜单容器会展开或折叠，基本实现步骤如下。;;;在浏览器中打开navbarResponsive.html文件，带有折叠按钮的导航栏在中型以下设备（视口宽度768px）中的效果如下图所示。;上图中，导航菜单被折叠了，并且网页右上角出现了折叠按钮“”，单击折叠按钮即可展开导航菜单，如下图所示。;下拉菜单组件;;下拉菜单组件常见的应用场景有哪些？;;7.5.1下拉菜单按钮;7.5.1下拉菜单按钮;7.5.1下拉菜单按钮;7.5.1下拉菜单按钮;;;在浏览器中打开dropdown.html文件，基础下拉菜单效果如下图所示。;;确定要为哪个导航菜单项添加下拉菜单，然后在该导航菜单项的.nav-item类后添加.dropdown类，以便应用下拉菜单的样式。;;;在浏览器中打开navbarDropdown.html文件，下拉菜单导航栏效果如下图所示。;卡片组件;;通常使用div标签定义卡片容器，并添加.card类，以便应用卡片容器的样式。;通常使用p标签设置段落，并添加.card-text类，以便应用卡片中段落的样式。

通常使用a标签设置