Bootstrap响应式网站开发任务式教程课件 任务7 使用组件

任务7使用组件Bootstrap响应式网站开发Bootstrap作为完整的前端工具集，内建了大量的强大、优雅的可重用组件。使用Bootstrap布局组件字体图标（Icons）导航（Navigation）标签（Label）徽章（Badge）排版（Typography）缩略图（thumbnail）提醒（Alert）进度条（progressbar）杂项（Miscellaneous）按钮（Button）普通组件1使用普通组件--字体图标字体图标简介字体图标库是一种实现单色图标和符号的实用方法，重点就在于它的简洁易用。Bootstrap5中拥有自己的开源SVG图标库，旨在与Bootstrap的组件和文档一起使用。Bootstrap图标库旨在与Bootstrap组件配合使用，但也可以用在任何项目中。这些图标是SVG格式的，可以快速、轻松地自由缩放，还可以以多种方式使用，并可以利用CSS设置样式。图标库如图所示。使用普通组件--字体图标安装字体图标库字体图标库的安装有通过软件包管理工具来安装、下载安装包和通过公共CDN加载三种方式。在此，选择下载安装包的方式，登录Bootstrap5官网，点击“图标库”超级链接，点击“安装”超级链接，在“安装”页面（如图所示）部分点击“下载最新版本的ZIP压缩包”超级链接下载字体图标库。使用普通组件--字体图标使用字体图标库以使用“wifi”图标为例，在此介绍两种使用字体图标库的方法。方式一：作为外部图片文件引用。 <imgsrc="bootstrap-icons-1.11.3/wifi.svg"alt="wifi"width="32"height="32">方式二：字体图标库使用。 <iclass="bibi-wifi"></i>演示使用普通组件--徽章徽章演示徽章的主要功能在于提示，也可以理解为提示标志，例如用于突出显示新的或未读的项，可呈现为“新”或者“未读”。如需使用徽章，只需要把

<spanclass="badge">

添加到链接、导航等这些元素上即可。使用背景颜色类可以实现颜色类型的徽章。使用.rounded-pill类可以设置药丸形状徽章使用普通组件-面包屑导航面包屑导航演示面包屑是作为辅助和补充的导航方式，它能让用户知道在网站或应用中所处的位置并能方便地回到原先的地点。最常见的面包屑的样式是：横向的文字链接，由大于号“>”分开，这个符号也暗示了它们的层级关系。使用普通组件--按钮组按钮组演示按钮组就是将多个按钮集合成一个页面组件。只需要使用btn-group类和一系列的<a>或者<button>标签，就可以轻易地生成一个按钮组或按钮工具条。类名描述.btn-group该类用于形成基本的按钮组。在

.btn-group

中放置一系列带有

.btn

类的按钮。.btn-toolbar该类有助于把几组<divclass="btn-group">结合到一个<divclass="btn-toolbar">中，一般获得更复杂的组件。.btn-group-lg,.btn-group,.btn-group-sm这些类可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。.btn-group-vertical该类让一组按钮垂直堆叠显示，而不是水平堆叠显示。使用普通组件--按钮组设计按钮导航条要将多个按钮组包含在一个btn-toolbar中，可以设计一个按钮工具条，以此设计一个更复杂的按钮组件。按钮式下拉菜单演示Bootstrap支持把按钮和下拉菜单捆绑在一起，形成按钮式下拉菜单。此时，可以将按钮包含在btn-group框中，并为其添加适当的菜单标签，即可让此按钮触发下拉菜单。演示使用普通组件--警告框警告框演示警告框向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。通过创建一个<div>，并向其添加一个

.alert类和上下文的

.alert-primary、.alert-success、alert-secondary、.alert-info、.alert-warning、.alert-danger、.alert-info、.alert-light、.alert-dark类之一，来添加一个基本的警告框。如果在警告框中创建链接，则

.alert-link

实体类来快速提供带有匹配颜色的链接。警告还可以包含其他HTML元素，如标题、段落和分隔符。使用普通组件--进度条进度条进度组件由两个HTML元素、一些用于设置宽度的CSS和一些属性构建。进度条实现的基本的使用方法为。第一步：给外层DIV标签加入.progress类，来指示进度条的最大值。第二步：给内层DIV标签加入.progress-bar类，来表示目前的进度。第三步：内层.progress-bar

添加一个带有百分比表示的宽度style属性，例如style="width:75%";

属性表示进度条在75%的位置。通过在.progress-bar中放置文本，将标签添加到进度条中。演示使用普通组件--分页分页分页组件可以展示页码。其使用非常方便，易单击、易缩放，在页面中经常被使用到。分页组件主要使用无序列表来建立的一种顺序效果。分页效果的实现非常简单，只需要在<ul>标签中加入.pagination类即可。分页类.pagination还可以搭配其他的辅助项目，分页辅助类如表所示。辅助类主要应用在<li>标签中。类名描述.disabled可以自定义不可点击的链接。.active指示当前的页面。.pagination-lg,..pagination-sm使用这些类来获取不同大小的项。.justify-content-start，..justify-content-center.justify-content-end使用flexbox实用程序更改分页组件的沿主轴方向的对齐方式：左对齐，居中对齐和右对齐演示使用普通组件--导航常规导航的使用演示通过给无序列表<ul>元素添加一个.nav类，可以创建一个导航组件。.nav是一个基类，在此基类的基础上添加.nav-item，或在每个链接上添加.nav-link类，可以改变导航的样式。.disabled类是该导航项失效。导航中.justify-content-center类设置导航居中显示，.justify-content-end类设置导航右对齐，默认为.justify-content-start类。使用普通组件--标签式下拉菜单导航条标签式下拉菜单导航演示Bootstrap支持在导航中增加下拉菜单。只需要为导航选项增加下拉菜单，通过data-bs-toggle="dropdown"触发下拉菜单交互显现。使用普通组件--标签式下拉菜单导航动态可切换菜单导航演示Bootstrap支持在导航中增加动态切换。可以在每个链接上添加data-bs-toggle="tab"属性。然后在每个选项对应的内容的上添加.tab-pane类，对应选项卡的内容的<div>标签使用.tab-content类。如果希望有淡入效果可以在.tab-pane后添加.fade类。使用普通组件--标签式下拉菜单导航动态可切换垂直菜单导航在水平“动态可切换菜单”的基础上，借助Bootstrap网格布局，将“导航选项卡”和“选项卡窗格”分别放置在两列中，设置响应式布局效果。演示使用普通组件--列表组列表组演示列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组方法就是向元素<ul>添加

.list-group类，再向元素<li>添加

.list-group-item类。如果需要展示激活项，可以将.active添加到.list-group-item以指示当前活动的选择。同时，针对列表项list-group-item，还提供了danger、success、info、heading、text、warning等类表示不同的列表项。使用普通组件--列表组列表组演示使用普通组件--卡片卡片演示Bootstrap5中通过.card类与.card-body类来创建一个简单的卡片，卡片可以包含头部、内容、底部以及各种颜色设置。高级组件1如果在一个页面上有许多的链接，页面可能会变得庞大而拥挤。为了避免出现这样的情况，可以采用的一种高效方法就是使用下拉菜单，这样只需要利用小部分屏幕区域，就可以把尽可能多的链接包含在页面中。也可以为按钮、标签页、胶囊式标签页和导航条等添加下拉菜单。下拉菜单的实现效果如图所示。使用Bootstrap高级组件--下拉菜单认识下拉菜单下拉菜单可使用的类与描述如表所示。使用Bootstrap布局组件--下拉菜单下拉菜单的使用类名描述.dropdown指定下拉菜单，下拉菜单都包裹在.dropdown里.dropdown-menu创建下拉菜单.dropdown-menu-end下拉菜单右对齐.dropdown-header下拉菜单中添加标题.dropstart左对齐.dropend右对齐.dropup上拉菜单向上弹出.dropdown-divider分割线.disabled下拉菜单中的禁用项.active激活项下拉菜单主要就是在外层加入dropdown类，而在内层可以通过button标签设置data-bs-toggle属性与dropdown类对应。使用Bootstrap布局组件--下拉菜单下拉菜单的使用演示使用Bootstrap高级组件--导航栏导航栏

导航栏网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在Bootstrap导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。

基础导航栏的实现，是向<nav>或<div>元素添加.navbar类，在通过.navbar-expand{-sm|-md|-lg|-xl|-xxl}类以便响应折叠。在<nav>或<div>标签元素内部添加带有.navbar-nav

类的无序列表，为ul内每个li元素添加.nav-item类，li元素内添加超级链接a即可。

通过添加.justify-content-center类来创建居中对齐的导航栏，可以使用背景色类来创建不同颜色导航栏，对于暗色背景.navbar-dark类需要设置文本颜色为浅色的，对于浅色背景.navbar-light需要设置文本颜色为深色的。通过添加.justify-content-center类来创建居中对齐的导航栏。使用Bootstrap高级组件--导航栏导航栏演示使用Bootstrap高级组件--导航栏响应式导航栏

响应式导航条在不同屏幕大小显示的效果不同。通常，小屏幕上页面导航都会折叠导航栏，通过点击来显示导航选项。

导航栏内置了对一些子组件的支持。根据需要从以下选项中选择。.navbar-brand类用于公司或项目名称；.navbar-nav用于全高和轻型导航（包括支持下拉菜单）；.navbar-toggler，用于折叠插件和其他导航切换行为；.navbar-text，用于添加垂直居中的文本字符串；.collapse.navbar-collapse，以按父断点分组和隐藏导航栏内容。

要创建折叠导航栏，可以在按钮上添加class="navbar-toggler"，data-bs-toggle="collapse"与data-bs-target="#thetarget"类。然后在设置了class="collapsenavbar-collapse"类的div上包裹导航内容（链接），div元素上的id匹配按钮data-target的上指定的id。使用Bootstrap高级组件--导航栏响应式导航栏演示使用Bootstrap高级组件--轮播轮播Bootstrap轮播（Carousel）插件是通过元素的循环组成幻灯片的组件。轮播类似一个幻灯片，用于循环显示一系列内容，这些内容使用CSS3D转换和一些JavaScript构建。它适用于一系列图像，文本或自定义标记。它还包括对上一个/下一个控件和指示器的支持。轮播效果是由两种内容所组成的：一是轮播指示符，二是轮播内容。为了控制方便，可再加入轮播导航按钮，就是指的左、右按钮，也可加入标题来图片进行说明。使用Bootstrap高级组件--轮播轮播类名描述.carousel创建一个轮播.carousel-indicators为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图。.carousel-inner添加要切换的图片.carousel-item指定每个图片的内容.carousel-control-prev添加左侧的按钮，点击会返回上一张。.carousel-control-next添加右侧按钮，点击会切换到下一张。.carousel-control-prev-icon与.carousel-control-prev一起使用，设置左侧的按钮.carousel-control-next-icon与.carousel-control-next一起使用，设置右侧的按钮.slide切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类。演示使用Bootstrap高级组件--轮播轮播使用Bootstrap高级组件--折叠折叠折叠有点像手风琴的效果，既让页面区域进行折叠。此效果可运用于建立折叠式的内容上，借助折叠的效果让一些内容暂时收和，待用户用鼠标单击时再展开。单击触发的按钮可通过类更改显示和隐藏另一个元素：.collapse类表示隐藏内容，.collapsing类表示在转换期间应用，.collapse.show类表示显示内容。使用带有href属性的链接，也可以使用带有data-bs-targett属性的按钮。在这两种情况下，都需要data-bs-toggle="collapse"。data-bs-toggle

和

data-bs-target

是用于定义组件行为和目标元素的自定义数据属性。data-bs-toggle属性用于定义组件的行为，指示组件在何时触发。可以设置的值取决于具体的组件类型，如

"collapse"（折叠菜单）、"modal"（模态框）、"tab"（标签页）等。data-bs-toggle="collapse"

用于触发折叠菜单的展开与折叠。data-bs-toggle="modal"

用于触发模态框的显示与隐藏。data-bs-toggle="tab"

用于触发标签页的切换。data-bs-target属性用于指定组件的目标元素或目标选择器。目标元素可以是一个CSS选择器，用于标识要操作的具体元素。也可以是一个指定的元素ID，以

#

开头，如

data-bs-target="#myid"。data-bs-target

属性与

data-bs-toggle

属性一起使用，用于将组件行为与目标元素关联起来。演示使用Bootstrap高级组件--折叠折叠使用Bootstrap高级组件--模态框模态框在Bootstrap框架中把模态框统一称为Modal。这种弹出框效果在大多数Web网站的交互中都可见。比如点击一个按钮弹出一个框，弹出的框可能是一段文件描述，也可能带有按钮操作，也有可能弹出的是一张图片。模态框（Modal）也可理解为覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。Bootstrap框架中的模态弹出框，分别运用了“modal”“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，modal-content是样式的关键。主要设置了弹窗的边框、边距、背景色和阴影等样式，其主要又包括三个部分：弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮。弹出框主体，一般使用“modal-body”表示，弹出框的主要内容。弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮。使用Bootstrap高级组件--模态框模态框演示使用Bootstrap高级组件--提示框提示框在网页中，想要描述或说明一个连接点的作用时，可通过提示工具Tooltip来实现。提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。通过向元素添加data-bs-toggle="tooltip"来来创建提示框。title属性的内容为提示框显示的内容。默认情况下提示框显示在元素上方。可以使用data-bs-placement属性来设定提示框显示的方向：top、bottom、left或right。演示使用Bootstrap高级组件--弹出框弹出框演示弹出提示与提示工具的显示模式是雷同的，只是提供了一个扩展的视图。差别在于提示工具是当鼠标移入时触发操作；而弹出提示是当鼠标单击时触发的。与提示框不同的是它可以显示更多的内容。通过向元素添加data-bs-toggle="popover"来来创建弹出框。title属性的内容为弹出框的标题，data-bs-content属性显示了弹出框的文本内容。使用Bootstrap高级组件--消息弹窗消息弹窗演示消息弹窗是一种轻量级的通知组件，用于在页面的角落或底部显示临时性的信息、通知或警告。弹窗通常用于向用户显示短期消息，比如成功消息、错误消息、警告或其他通知。创建弹窗可以使用.toast类，并在该类里添加.toast-header和.toast-body类来表示标题和内容。注意：弹窗默认是关闭的，可以使用.show来设置显示，关闭弹窗可以在<button>