《Web前端框架应用bootstrap》课件-项目六 Css组件

任务1：下拉菜单项目六Css组件主讲人：课程导入下拉菜单是可切换的、以列表格式显示链接的上下文菜单。通过下拉菜单组件，可以快捷的在页面中创建下拉菜单，并设置菜单样式。课程导入bootstrap.bundle.js文件已经包含了popper，所以可以在页面中直接引用bootstrap.bundle.js文件。基本用法Bootstrap框架中，所有下拉菜单内容必须放在一个容器<div>元素中，并给它添加.dropdown类。若设置为.dropup、.dropstart、.dropend，则可以让菜单向上、向左、向右弹出。基本用法01在该div元素中放入一个button元素作为触发按钮，给button元素添加.dropdown-toggle类以及data-toggle="dropdown"的属性。在按钮button元素的下面添加ul列表创建一个下拉列表，给ul元素添加.dropdown-menu类，给li元素中的超链接a元素添加.dropdown-item类。02在页面中引用引入bootstrap.bundle.js文件。03基本用法代码演示效果可以将class="dropdown"中的dropdown改为dropup、dropend、dropstart，查看菜单效果按钮组按钮组是将多个按钮堆叠在同一行上，如果要把多个按钮对齐，这个组件将非常有用。通过与按钮插件联合使用，可以将按钮组设置为单选按钮或复选框的样式和行为。下拉菜单也经常和按钮组嵌套使用。在下拉菜单中，可以不应用.dropdown类，而通过按钮组.btn-group来实现。设置按钮组时，将多个按钮放在一个div容器里，对该容器设置.btn-group属性。在这一组按钮组中，对需要设置下拉菜单的按钮嵌套使用下拉菜单即可。分裂式按钮下拉菜单分裂式按钮下拉菜单：

左边：按钮的原始内容右边：触发下拉菜单的切换按钮下拉菜单的外层div使用.btn-group样式，对右边按钮使用.dropdown-toggle-split类，即可实现分裂式按钮下列菜单的效果。分裂式按钮下拉菜单代码演示效果菜单内容分割线菜单标题文本信息表单菜单项下拉菜单菜单内容通过给下拉菜单中li元素添加.dropdown-divider类，可以在菜单项中添加分割线，来实现菜单项分组的效果。分割线和分组标题菜单内容通过给下拉菜单中的li元素添加dropdown-header类，可以在菜单项中添加分组标题，标题默认样式比菜单项字号略小、颜色略浅。分割线和分组标题菜单内容文本信息和表单内容在设计下拉菜单时，将ul标签修改为div，文本信息放在.dropdown-menu的div中。如果需要内容为表单形式，在.dropdown-menu中添加form表单进行设置。文本信息表单内容对齐方式默认情况下，展开的下拉菜单自动沿着触发按钮的左侧对齐。为下拉列表ul元素添加.dropdown-menu-end类可以让菜单沿着触发按钮的右侧对齐添加.dropdown-menu-star类可以让菜单沿着触发按钮的左侧对齐（默认样式）。右侧对齐效果禁用菜单项在菜单项中的超链接a元素上添加.disabled类，可将该项设为禁用。课程小结任务2：导航项目六Css组件主讲人：CONTENTS0102导航基础样式选项卡导航和pills导航0304垂直导航导航禁用和导航对齐0506导航二级菜单面包屑导航导航基础样式/01导航基础样式通过给ul元素或nav元素添加一个.nav类，可以创建一个导航组件。在超链接a元素上需添加.nav-link类，在li元素上需添加.nav-item类。选项卡导航和pills导航/02选项卡导航和pills导航.nav是一个基类，在基类的基础上添加一个修饰类.nav-tabs或.nav-pills，可以改变导航的样式，衍生为选项卡导航和Pills导航。垂直导航/03垂直导航通过在ul元素或nav元素上添加.flex-column类，可以让导航垂直显示。选项卡导航若使用了.active类，无法在垂直显示时获得良好的外观，因此一般只将基础导航或Pills导航设为垂直导航。并且会为导航添加栅格系统属性，让其作为侧边栏导航使用。导航禁用和导航对齐/04导航禁用和导航对齐导航禁用和导航对齐导航的默认对齐方式为居左对齐，但在ul元素或nav元素上添加.justify-content-center类或.justify-content-end类，可以实现居中对齐或居右对齐。导航禁用和导航对齐若在ul元素或nav元素上添加.nav-justified，所有的水平宽度都将被导航占用，每个导航元素会均分宽度，并且随着窗口大小的变化，响应式地变化。如果将.nav-justified换为.nav-fill，导航也会占据整个水平宽度，但并不是每个导航项等宽。导航二级菜单/05导航二级菜单向导航元素中嵌套下拉菜单，即可实现导航二级菜单效果。无论是使用列表+超链接，还是nav元素+超链接的方式去制作导航，无论是使用选项卡导航的外观还是Pills导航的外观，均可以实现导航二级菜单的效果。导航二级菜单向导航元素中嵌套下拉菜单，即可实现导航二级菜单效果。无论是使用列表+超链接，还是nav元素+超链接的方式去制作导航，无论是使用选项卡导航的外观还是Pills导航的外观，均可以实现导航二级菜单的效果。面包屑导航/06面包屑导航Bootstrap中的面包屑导航是一个简单的带有

.breadcrumb类的无序列表。默认样式的导航链接之间用“>”分隔。课程小结导航基础样式1选项卡导航和pills导航2垂直导航3导航禁用和导航对齐4导航二级菜单5面包屑导航6任务3：导航条项目六Css组件主讲人：课程导入导航条的基本用法

在宽屏幕时，导航栏水平铺开；小屏幕时，导航栏垂直展开。通过添加折叠插件，让其折叠显示。而.navbar-expand类则表示任何宽度都是水平展开。品牌图标在nav元素中添加一个带有.navbar-brand类的元素作为导航条的头部。这个元素可以是超链接a元素、div元素或者其他大多数元素，但是用超链接a元素的效果最好。

在导航条的头部中可以使用文本，也可以使用图像，作为品牌图标。如果将图像添加到导航条的头部中，可能还需要自定义样式或使用一些工具类来正确调整图像大小。品牌图标导航条上的链接导航条中的链接或者说导航条中的导航元素，是在前一节导航的基础上添加导航条的专属class而成，用法与“导航”几乎一致。在导航条中，将“导航”中的“.nav类”修改为“.navbar-nav”类，可设置导航条中的链接内容。导航条上的链接导航条中的链接或者说导航条中的导航元素，是在前一节导航的基础上添加导航条的专属class而成，用法与“导航”几乎一致。在导航条中，将“导航”中的“.nav类”修改为“.navbar-nav”类，可设置导航条中的链接内容。导航条上的表单如果要将各种表单控件或输入框组放在导航条中，需要在表单form元素上添加.d-flex类。表单控件或输入框组的样式设置，与前面已经学的表单内容一致。导航条上的文本将文本内容装在使用了.navbar-text类的span元素中，便能在导航条中添加非链接的纯文本了。根据需要，可以与其他导航条的元素混合使用。固定导航条给导航条元素nav添加.fixed-top类或.fixed-bottom类，将导航条固定在顶部或底部。

当导航条固定在顶部或底部时，导航条的宽度不再与父元素同宽，而是与浏览器窗口同宽。如果添加.sticky-top，可以让导航条粘贴在顶部。再给导航条添加.fixed-top，导航条会脱离原来的文档流，并固定在浏览器顶部，后面的内容会被导航条遮挡，因此需要设置body元素的顶部内边距。固定导航条改为fixed-bottom导航条配色方案为导航条nav元素添加.bg-颜色词的类以及.navbar-颜色词的类，即可设置导航条的背景颜色与文本颜色。.bg-颜色词导航栏的背景颜色。颜色有很多选择，例如.bg-info、.bg-dark，详细内容参考前面章节颜色部分。.navbar-颜色词导航栏的文字颜色，只有.navbar-dark和.navbar-light两种选择。V5.2.0开始，没有.navbar-light类，默认为ligth主题。v5.3.0中，可以使用data-bs-theme="dark”设置导航条文字颜色。.navbar-dark为了搭配深色背景而显示的浅色字。.navbar-light为了搭配浅色背景而显示的深色字。导航条配色方案响应式导航条导航条结合JS插件中的折叠插件，可以制作响应式导航条。在前面的实例中，导航条都使用了.navbar-expand-md类，表示在md、lg、xl设备上水平展开。在小于md设备宽度（<768px）时，导航条的导航会垂直展开。响应式导航条在小于md设备宽度（<768px）时，将导航条上的元素隐藏在一个折叠菜单中。通过触发按钮来控制菜单项的显示与隐藏。响应式导航条01将导航条中导航和表单放在一个<div>中，对这个<div>元素应用.collapse、.navbar-collapse类，并给这个<div>添加一个ID名。02在导航条内.navbar-brand的后面添加一个<button>元素，用于触发折叠菜单的显示与隐藏。给这个<button>应用.navbar-toggler类，添加属性

data-bs-toggle="collapse"，data-target="..."，data-target属性值对应的是前面折叠<div>的class或ID值。<button>文本内容应用类.navbar-toggler-icon，这样会让折叠按钮呈现一个面包按钮的样式。03注意：响应式导航条使用的是折叠插件，需在页面中导入bootstrap.bundle.js文件。响应式导航条课程小结任务4：徽章、分页项目六Css组件主讲人：CONTENTS0102徽章分页导航徽章/01徽章徽章徽章分页导航/02分页导航分页导航分页是使用列表ul元素构建的，如在ul元素上添加.pagination类，或在li元素上添加.item类、在超链接a元素上添加.link类，然后将列表ul放入nav元素中，生成一个分页组件。由于页面中可能有多个nav元素，例如各种导航，因此建议在nav元素上添加描述性的内容aria-label="page"。分页导航如果要使用图标或符号代替某些分页链接中的文本，需要使用适当的屏幕阅读器支持aria属性和.visually-hidden工具。分页导航分页导航也可以通过添加.active类设置成激活状态，通过添加.disabled类设置成禁用状态。通过添加.pageination-lg或者.pageination-sm，可以设置大一点或小一点的分页导航。

使用flexbox工具类.justify-content-*，将其中*取值{start|center|end|between|around}，也可用来设置分页导航的排列位置。课程小结徽章分页任务5：

列表组、进度条项目六Css组件主讲人：CONTENTS0102列表组进度条课程导入列表组进度条列表组/01列表组基础列表组最简单的列表组仅仅是一个带有多个列表条目的无序列表。通过给元素ul和li分别应用类.list-group和.list-group-item即可生成一个列表组。列表组带徽章的列表组向列表组的任意列表项li元素添加徽章组件，即可在该列表项右侧显示徽章。列表组链接列表组div元素和超链接a元素可替代列表ul元素和列表项li元素。在div元素上添加.list-group类，在a元素上添加.list-group-item类和.list-group-item-action类，则可创建一个具有鼠标悬停效果的链接列表组。<buttontype="button"class="list-group-itemlist-group-item-action">秋季新品</button>列表组状态设置给列表项目.list-group-item添加.active类，可以让单个列表项目背景颜色突出，进入激活状态；给列表项目.list-group-item添加.disabled类，可以让单个列表项目文字显示为灰色，进入被禁用状态。列表组列表组主题在列表项目.list-group-item-*添加情境类，可以使其显示不同的情景样式。列表组水平列表组默认情况下，列表组是垂直方向的，通过.list-group-horizontal或.list-group-horizontal-{sm|md|lg|xl|xxl}类，让列表组水平方向显示。如果需要每个项的宽度相等，可以对列表项应用.flex-fill。列表组其他元素的支持列表组中每个列表项目可以添加任意的HTML内容。进度条/02进度条基础进度条基础进度条由嵌套的两个div构建，外层div上添加.progress类，用作进度条的“槽”；内层div上添加.progress-bar类，用来表示当前进度。进度的长短由行内样式的width属性来设置。进度条如果希望改变进度条的默认蓝色效果，可以在每个内层div容器中添加.bg-*的方式来设置。基础进度条进度条条纹进度条和进度条堆叠将.progress-bar-striped类添加到进度条内层gress-bar上，即可通过CSS渐变对进度条的背景颜色加上条纹。若再添加.progress-bar-animated类，则条纹会呈现动态流动的效果。进度条条纹进度条和进度条堆叠把多个进度条放入同一个.progress中可以使它们呈现出堆叠的效果。课程小结进度条列表组任务6：卡片项目六Css组件主讲人：CONTENTS0102卡片基本格式卡片的页眉和脚注0304水平卡片卡片组和卡片布局课程导入在卡片中，可随意组合填装图片、标题、段落、超链接、按钮、列表组等多种元素；在样式上，可以为卡片添加页眉和脚注，来设置背景颜色、边框、宽度等，对于图文混排设计非常方便。卡片基本格式/01卡片基本格式卡片支持各种内容，如图像、文本、超链接、列表组等。基本的卡片结构包括卡片主体和图片。卡片基本格式（1）卡片主体卡片主体是一个添加了.card-body类的div，里面可以装入标题、段落、超链接、按钮、列表组、引用等。Bootstrap中定义了对应的类标题类.card-title副标题类.card-subtitle文本类.card-text类链接.card-link卡片基本格式（2）图片和卡片主体的组合01若是图片放在卡片主体上方，给img元素添加.card-img-top类，则图片左上角与右上角会添加圆角效果；卡片基本格式（2）图片和卡片主体的组合02若是图片放在卡片主体下方，添加.card-img-bottom类，则图片左下角与右下角会添加圆角效果。卡片基本格式（2）图片和卡片主体的组合03如果卡片没有文字，直接使用.card-img，此时，图片的4个角都添加了圆角效果。卡片基本格式（2）图片和卡片主体的组合卡片基本格式（3）卡片的大小卡片默认为100%宽度。我们可以通过栅格系统、CSS样式、宽度工具来设定。卡片基本格式（4）文本的排列卡片中文本的排列样式，可利用文本排列工具类.text-{start|end|center}来实现。卡片的页眉和脚注/02卡片的页眉和脚注在设计卡片时，还可以选择性地添加页眉（.card-header）或脚注（.card-footer）。卡片的页眉和脚注如需修改卡片外观样式，可以结合前面已经学习过的文本格式.text-*、背景格式.bg-*、边框工具.border-*等类来实现。水平卡片/03水平卡片借助栅格系统，可以将图片和文字部分水平显示。在.row元素上使用.g-0，可去掉行的左/右外边距和列的内边距。卡片组和卡片布局/04卡片组和卡片布局在每个card上添加.h-100的样式以外，也可以使用卡片组将卡片呈现为具有相等宽度和高度列的单个附加元素。卡片组类包括.card-group。其中，.card-group卡片组的卡片之间无间隙，并等高等宽。问题解决办法通过栅格系统布局可将多个卡片并列放置，但是当这些卡片的内容长度不一致时，并排的卡片会不等高。卡片组和卡片布局卡片组和卡片布局如果使用栅格系统布局卡片，可以使用.row-cols-*来控制每行显示的列数，其中*的取值为1～6的数字。比如，.row-cols-2表示一行只显示2列。任务7：图标项目六Css组件主讲人：CONTENTS0102安装图标SVG图标使用课程导入安装图标/01安装图标1使用npm安装。该方法会安装包括SVG、图标sprite和图标字体的内容。2下载Bootstrap图标文件。在GitHub官网下载源码ZIP文件，解压后即可查看。3通过link或@import的方式引入Bootstrap提供的CSS文件。npmibootstrap-icons<linkrel="stylesheet"href="/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">@importurl("/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css");SVG图标使用/02SVG图标使用基于XML（extensiblemarkuplanguage，可扩展标记语言），由W3C联盟进行开发。是一种开放标准的矢量图形语言，可帮助用户设计激动人心的、高分辨率的Web图形页面。SVG图标使用

用户可以直接用代码来描绘图像，也可用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并随时插入HTML中，通过浏览器来查看设计效果。SVG图标使用方法1：嵌入式可直接将图标直接嵌入页面的HTML中，而不是作为外部图像文件引入。打开对应的SVG文件，将代码复制到页面中。<svgxmlns="/2000/svg"fill="currentColor"class="bibi-chevron-right"viewBox="001616"><pathfill-rule="evenodd"d="M4.6461.646a.5.5001.7080l66a.5.50010.708l-66a.5.5001-.708-.708L10.29384.6462.354a.5.50010-.708z"/></svg>SVG图标使用方法2：SVGSprite使用SVGSprite在use元素中插入任何想用的图标，并以图标的文件名作为片段标识符（例如shop就用#shop）。然后，将下载的文件夹中的bootstrap-icons.svg文件复制到项目目录下。再输入下列代码。<svgclass="bi"fill="currentColor"><usexlink:href="bootstrap-icons.svg#shop"/></svg>SVG图标使用方法3：作为外部图像插入下载Bootstrap图标文件后，将其放入项目指定路径，像引用普通img元素一样，引入它们。代码如下，以img标记插入。<imgsrc="./img/cart-plus.svg">SVG图标使用方法4：通过