手机网站开发入门,电商网站建设论文,wordpress 图文插件,1元做网站方案1. 轮播
1.1 轮播样式
在Bootstrap 5中, 创建轮播(Carousel)的相关类名及其介绍:
* 1. carousel: 轮播容器的类名, 用于标识一个轮播组件.
* 2. slide: 切换图片的过渡和动画效果.
* 3. carousel-inner: 轮播项容器的类名, 用于包含轮播项(轮播图底下椭圆点, 轮播的过程可以显…
1. 轮播
1.1 轮播样式
在Bootstrap 5中, 创建轮播(Carousel)的相关类名及其介绍:
* 1. carousel: 轮播容器的类名, 用于标识一个轮播组件.
* 2. slide: 切换图片的过渡和动画效果.
* 3. carousel-inner: 轮播项容器的类名, 用于包含轮播项(轮播图底下椭圆点, 轮播的过程可以显示目前是第几张图).
* 4. carousel-item: 轮播项的类名, 表示一个轮播项.
* 5. carousel-indicators: 指示符容器的类名, 用于包含轮播项的指示符.
* 6. active: 用于标识当前激活的轮播项或指示符.
* 7. carousel-control-prev: 左切换按钮的类名, 用于触发向前切换轮播项的事件.
* 8. carousel-control-next: 右切换按钮的类名, 用于触发向后切换轮播项的事件.
* 9. carousel-control-prev-icon: 左切换按钮图标的类名, 用于显示向前切换的图标.
* 10. carousel-control-next-icon: 右切换按钮图标的类名, 用于显示向后切换的图标.创建录播步骤:
* 1. 创建了一个轮播容器的div元素, 其中id属性设置为demo, 类名设置为carousel slide, 并且添加了data-bs-ridecarousel属性以启用轮播功能.* 2. 添加了一个指示符容器的div元素, 用于显示轮播项的指示符.* 3. 在指示符容器中添加了多个指示符按钮, 每个按钮通过data-bs-target属性指定了轮播容器的id,data-bs-slide-to属性指定了轮播项的索引, 其中第一个按钮添加了active类名以表示默认激活的指示符.* 4. 创建了一个轮播内容容器的div元素, 用于包含轮播图片项.* 5. 在轮播内容容器中添加了多个轮播项的div元素, 每个轮播项包含一个img元素, 用于显示图片内容,第一个轮播项添加了active类名以表示默认激活的轮播项.* 6. 创建了一个左切换按钮和一个右切换按钮的button元素,通过添加carousel-control-prev和carousel-control-next类名以表示左右切换按钮.* 7. 在切换按钮中添加了span元素, 并分别为其添加了carousel-control-prev-icon和carousel-control-next-icon类名,以显示左右切换的图标.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title轮播/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
!-- 轮播 --
div iddemo classcarousel slide data-bs-ridecarousel!-- 指示符 --div classcarousel-indicatorsbutton typebutton data-bs-target#demo data-bs-slide-to0 classactive/buttonbutton typebutton data-bs-target#demo data-bs-slide-to1/buttonbutton typebutton data-bs-target#demo data-bs-slide-to2/buttonbutton typebutton data-bs-target#demo data-bs-slide-to3/button/div!-- 轮播图片 --div classcarousel-innerdiv classcarousel-item activeimg srcimg/1.png classd-block stylewidth:100%/divdiv classcarousel-itemimg srcimg/2.png classd-block stylewidth:100%/divdiv classcarousel-itemimg srcimg/3.png classd-block stylewidth:100%/divdiv classcarousel-itemimg srcimg/4.png classd-block stylewidth:100%/div/div!-- 左右切换按钮 --button classcarousel-control-prev typebutton data-bs-target#demo data-bs-slideprevspan classcarousel-control-prev-icon/span/buttonbutton classcarousel-control-next typebutton data-bs-target#demo data-bs-slidenextspan classcarousel-control-next-icon/span/button
/div
/body
/html在上述代码中, 指示符(指示器)的每个按钮通过data-bs-slide-to属性设置与轮播项的索引对应.
具体来说, 代码中的指示符按钮对应的图片索引如下:
- 第一个指示符按钮: data-bs-slide-to0, 对应第一个图片项(索引为 0).
- 第二个指示符按钮: data-bs-slide-to1, 对应第二个图片项(索引为 1).
- 第三个指示符按钮: data-bs-slide-to2, 对应第三个图片项(索引为 2).
- 第四个指示符按钮: data-bs-slide-to3, 对应第四个图片项(索引为 3).通过将指示符按钮的data-bs-slide-to属性与相应的图片项索引对应起来, 可以在用户点击指示符时切换到对应的图片项.
例如, 当用户点击第二个指示符按钮时, 轮播容器将切换到第二个图片项(索引为 1)显示在轮播框中.请注意, 这里的图片索引是从0开始的, 与JavaScript的数组索引一致.
所以在指示符按钮的data-bs-slide-to属性中, 索引值也是从0开始的.1.2 轮播标题
在Bootstrap 5中, .carousel-caption类用于设置轮播图片的描述文本(轮播标题).
将轮播图片的描述文本放在每个图片项内, 例: div classcarousel-caption 嵌套早 div classcarousel-item 元素内.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title轮播标题/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
!-- 轮播 --
div iddemo classcarousel slide data-bs-ridecarousel!-- 指示符 --div classcarousel-indicatorsbutton typebutton data-bs-target#demo data-bs-slide-to0 classactive/buttonbutton typebutton data-bs-target#demo data-bs-slide-to1/buttonbutton typebutton data-bs-target#demo data-bs-slide-to2/buttonbutton typebutton data-bs-target#demo data-bs-slide-to3/button/div!-- 轮播图片 --div classcarousel-innerdiv classcarousel-item activeimg srcimg/1.png classd-block stylewidth:100%div classcarousel-captionh3第一张图片描述标题/h3p第一张图片描述内容显示在这里!!!/p/div/divdiv classcarousel-itemimg srcimg/2.png classd-block stylewidth:100%div classcarousel-captionh3第二张图片描述标题/h3p第二张图片描述内容显示在这里!!!/p/div/divdiv classcarousel-itemimg srcimg/3.png classd-block stylewidth:100%div classcarousel-captionh3第三张图片描述标题/h3p第三张图片描述内容显示在这里!!!/p/div/divdiv classcarousel-itemimg srcimg/4.png classd-block stylewidth:100%div classcarousel-captionh3第四张图片描述标题/h3p第四张图片描述内容显示在这里!!!/p/div/div/div!-- 左右切换按钮 --button classcarousel-control-prev typebutton data-bs-target#demo data-bs-slideprevspan classcarousel-control-prev-icon/span/buttonbutton classcarousel-control-next typebutton data-bs-target#demo data-bs-slidenextspan classcarousel-control-next-icon/span/button
/div
/body
/html2. 模态框
模态框是一种覆盖在父窗体上的子窗体, 通常用于在不离开父窗体的情况下展示额外的内容或进行互动.模态框常用于以下场景:
- 弹出对话框: 通过模态框可以显示一些提示, 确认或警告信息, 用户需要对其进行操作后才能继续操作父窗体.
- 表单输入: 模态框可以用于显示一个表单, 用户可以在其中输入信息, 提交后将数据传回给父窗体进行处理.
- 图片/媒体展示: 模态框可用于显示大图, 视频, 音频等媒体内容, 以便用户在不离开当前页面的情况下查看细节.
- 信息交互: 通过模态框, 用户可以与内容进行交互, 例如点击按钮, 滑块或其他交互元素.2.1 模态框样式
在Bootstrap 5中, 设置模态框的相关类名及其介绍:
* 1. modal: 表示一个模态框容器, 通过添加该类名来创建模态框.
* 2. modal-dialog: 表示模态框的对话框容器, 用于包裹模态框的内容.
* 3. modal-content: 表示模态框的内容容器, 包含了模态框的头部、主体和底部部分.
* 4. modal-header: 表示模态框的头部部分, 通常用于显示标题和关闭按钮.
* 5. modal-title: 表示模态框的标题, 通常在modal-header中使用.
* 6. modal-body: 表示模态框的主体部分, 通常用于放置模态框的主要内容.
* 7. modal-footer: 表示模态框的底部部分, 通常用于放置模态框的按钮或其他操作元素.
* 8. btn-close: 用于创建关闭按钮的样式; 这个类可用于在模态框的头部或其他区域添加一个标准的关闭按钮.用于控制模态框的行为和交互的常用的属性介绍:
* 1. data-bs-togglemodal: 通过给触发元素添加该属性, 可以在点击时打开或关闭模态框.例如, 可以将其添加到按钮的data-bs-target属性中来触发模态框的显示.* 2. data-bs-target#modalId: 通过设置触发元素的data-bs-target属性来指定模态框的选择器.可以是模态框的id属性或者对应选择器的类名. 点击触发元素时, 将会对目标模态框进行开启或关闭操作.* 3. data-bs-dismissmodal: 将该属性添加到按钮等元素上, 点击时将关闭模态框. 通常用于关闭按钮或取消操作按钮.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title模态框/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
div classcontainer mt-3button typebutton classbtn btn-primary data-bs-togglemodal data-bs-target#myModal打开模态框/button!-- 模态框 --div classmodal idmyModaldiv classmodal-dialogdiv classmodal-content!-- 模态框头部 --div classmodal-headerh4 classmodal-title模态框标题/h4button typebutton classbtn-close data-bs-dismissmodal/button/div!-- 模态框内容 --div classmodal-body模态框内容../div!-- 模态框底部 --div classmodal-footerbutton typebutton classbtn btn-danger data-bs-dismissmodal关闭/button/div/div/div/div
/div
/body
/html2.2 模态框动画效果
在Bootstrap 5中, .fade类可以设置模态框弹出或关闭的效果.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title动画效果/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
div classcontainer mt-3button typebutton classbtn btn-primary data-bs-togglemodal data-bs-target#myModal打开模态框/button
/div!-- 模态框 --
div classmodal fade idmyModaldiv classmodal-dialogdiv classmodal-content!-- 模态框头部 --div classmodal-headerh4 classmodal-title模态框标题/h4button typebutton classbtn-close data-bs-dismissmodal/button/div!-- 模态框内容 --div classmodal-body模态框内容../div!-- 模态框底部 --div classmodal-footerbutton typebutton classbtn btn-danger data-bs-dismissmodal关闭/button/div/div/div
/div
/body
/html2.3 模态框尺寸
在Bootstrap 5中, 模态框有多种预定义的尺寸大小可供选择: 小(small), 默认(default), 大(large), 额外大(extra large)...
可以通过在模态框的modal-dialog元素上添加相应的类名来设置模态框的尺寸.以下是几种尺寸类名:
* 1. .modal-sm: 用于设置小尺寸的模态框.
* 2. .modal-dialog: 默认, 用于设置默认尺寸的模态框.
* 3. .modal-lg: 用于设置大尺寸的模态框.
* 4. .modal-xl: 用于设置额外大尺寸的模态框.
* 5. .modal-fullscreen: 可以让模态框全屏幕显示.
* 6. .modal-fullscreen-*-*: 可以控制在什么尺寸下全屏幕显示..modal-fullscreen-sm-down: 576px以下尺寸全屏幕显示..modal-fullscreen-md-down: 768px以下尺寸全屏幕显示..modal-fullscreen-lg-down: 992px以下尺寸全屏幕显示. .modal-fullscreen-xl-down: 1200px以下尺寸全屏幕显示. .modal-fullscreen-xxl-down: 1400px 以下尺寸全屏幕显示.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title模态框尺寸/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
div classcontainer mt-3button typebutton classbtn btn-primary data-bs-togglemodal data-bs-target#myModal打开模态框/button
/div!-- 模态框 --
div classmodal fade idmyModaldiv classmodal-dialog modal-lgdiv classmodal-content!-- 模态框头部 --div classmodal-headerh4 classmodal-title模态框标题/h4button typebutton classbtn-close data-bs-dismissmodal/button/div!-- 模态框内容 --div classmodal-body模态框内容../div!-- 模态框底部 --div classmodal-footerbutton typebutton classbtn btn-danger data-bs-dismissmodal关闭/button/div/div/div
/div
/body
/html2.4 模态框居中显示
在Bootstrap 5中, .modal-dialog-centered类可以设置模态框水平和垂直方向都居中显示.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title居中显示/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
div classcontainer mt-3button typebutton classbtn btn-primary data-bs-togglemodal data-bs-target#myModal打开模态框/button
/div!-- 模态框 --
div classmodal fade idmyModaldiv classmodal-dialog modal-lg modal-dialog-centereddiv classmodal-content!-- 模态框头部 --div classmodal-headerh4 classmodal-title模态框标题/h4button typebutton classbtn-close data-bs-dismissmodal/button/div!-- 模态框内容 --div classmodal-body模态框内容../div!-- 模态框底部 --div classmodal-footerbutton typebutton classbtn btn-danger data-bs-dismissmodal关闭/button/div/div/div
/div
/body
/html2.5 模态框滚动条
默认情况下模态框如果包含很多内容, 页面会自动生成一个滚动, 模态框随着页面的滚动而滚动.在Bootstrap 5中, .modal-dialog-scrollable类可以在模态框里头设置一个滚动条. !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title模态框滚动条/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
div classcontainer mt-3button typebutton classbtn btn-primary data-bs-togglemodal data-bs-target#myModal打开模态框/button
/div!-- 模态框 --
div classmodal idmyModal!-- div classmodal-dialog --div classmodal-dialog modal-dialog-scrollablediv classmodal-content!-- 模态框头部 --div classmodal-headerh4 classmodal-title模态框标题/h4button typebutton classbtn-close data-bs-dismissmodal/button/div!-- 模态框内容 --div classmodal-body模态框内容..br/模态框内容..br/模态框内容..br/模态框内容..br/模态框内容..br/模态框内容..br/模态框内容..br/模态框内容..br/模态框内容..br/模态框内容..br/模态框内容..br/模态框内容..br/模态框内容..br/模态框内容..br/模态框内容..br/模态框内容..br/模态框内容..br/模态框内容..br/模态框内容..br/模态框内容..br/模态框内容..br/模态框内容..br/模态框内容..br/模态框内容..br//div!-- 模态框底部 --div classmodal-footerbutton typebutton classbtn btn-danger data-bs-dismissmodal关闭/button/div/div/div
/div
/body
/html3. 提示框
3.1 提示框样式
在Bootstrap 5中, 可以使用Tooltip组件来实现弹窗式提示框.创建提示框步骤:
* 1. 将data-bs-toggletooltip属性添加到希望触发提示框的元素上.
* 2. 使用title属性指定提示框显示的内容.
* 3. 当鼠标悬停在按钮上时, 提示框会显示相应的内容.// 当使用JavaScript初始化提示框时, 可以获得更多的控制和定制化的能力,
// 初始化提示框
var tooltipTriggerList [].slice.call(document.querySelectorAll([data-bs-toggletooltip]))
var tooltipList tooltipTriggerList.map(function (tooltipTriggerEl) {return new bootstrap.Tooltip(tooltipTriggerEl)
})这段代码的意义是用于初始化提示框(Tooltip)组件, 让具有data-bs-toggletooltip属性的元素拥有提示框的功能.
这段代码的具体作用:
* 1. tooltipTriggerList变量是一个空数组, 用于存储具有data-bs-toggletooltip属性的元素.
* 2. document.querySelectorAll([data-bs-toggletooltip])选择器将选取所有带有data-bs-toggletooltip属性的元素,并将其构成一个节点列表.* 3. [].slice.call()将节点列表转换为真正的数组, 并将其存储在tooltipTriggerList变量中.* 4. map()方法遍历tooltipTriggerList数组中的每个元素并执行一个匿名回调函数, 该回调函数接收每个元素作为参数.* 5. 在匿名回调函数中, 通过new bootstrap.Tooltip(tooltipTriggerEl)创建一个新的Tooltip 实例, 并将其返回.bootstrap.Tooltip是Bootstrap框架中负责创建和管理提示框的构造函数.* 6. tooltipList变量接收map()方法返回的所有Tooltip实例数组.通过执行这段代码, 具有data-bs-toggletooltip属性的元素将被初始化为拥有提示框功能的元素.
当鼠标在这些元素上悬停时, 提示框将显示相应的内容(一般来自title属性或通过JavaScript动态设置).!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title提示框/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
div classcontainer mt-5button typebutton classbtn btn-primary data-bs-toggletooltip title我是提示内容!鼠标移动到我这/button
/divscript// 初始化提示框var tooltipTriggerList [].slice.call(document.querySelectorAll([data-bs-toggletooltip]))var tooltipList tooltipTriggerList.map(function (tooltipTriggerEl) {return new bootstrap.Tooltip(tooltipTriggerEl)})
/script
/body
/html3.2 提示框显示方向
默认情况下提示框显示在元素上方, 上方没有足够的空间显示会换到其他方向上显示.
可以使用data-bs-placement属性来设定提示框显示的方向, 例: top, bottom, left, right.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title提示框显示方向/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
div classcontainer mt-5a href# data-bs-toggletooltip data-bs-placementtop title我是提示内容!鼠标移动到我这/aa href# data-bs-toggletooltip data-bs-placementbottom title我是提示内容!鼠标移动到我这/aa href# data-bs-toggletooltip data-bs-placementleft title我是提示内容!鼠标移动到我这/aa href# data-bs-toggletooltip data-bs-placementright title我是提示内容!鼠标移动到我这/a
/divscriptvar tooltipTriggerList [].slice.call(document.querySelectorAll([data-bs-toggletooltip]))var tooltipList tooltipTriggerList.map(function (tooltipTriggerEl) {return new bootstrap.Tooltip(tooltipTriggerEl)})
/script
/body
/html4. 弹出框
4.1 弹出框样式
在Bootstrap 5中, 可以使用popover组件来实现弹出式的信息框.创建弹出框步骤:
* 1. 将data-bs-togglepopover属性添加到希望触发提示框的元素上.
* 2. 使用title属性指定弹出框的标题.
* 3. data-bs-content属性指定弹出框的文本内容.
* 4. 当点击按钮时, 显示弹出框的内容(标题及文本内容).// 弹出框的JavaScript的初始化代码:
var popoverTriggerList [].slice.call(document.querySelectorAll([data-bs-togglepopover]))
var popoverList popoverTriggerList.map(function (popoverTriggerEl) {return new bootstrap.Popover(popoverTriggerEl)
})!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title弹出框/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
div classcontainer mt-3button typebutton classbtn btn-primary data-bs-togglepopover title弹出框标题data-bs-content弹出框内容点击按钮/button
/divscriptvar popoverTriggerList [].slice.call(document.querySelectorAll([data-bs-togglepopover]))var popoverList popoverTriggerList.map(function (popoverTriggerEl) {return new bootstrap.Popover(popoverTriggerEl)})
/script
/body
/html4.2 弹出框显示方向
默认情况下弹出框显示在元素右侧, 显示空间不足会在其他方向上显示.可以使用data-bs-placement属性来设定弹出框显示的方向, 例: top, bottom, left, right.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title弹出框显示方向/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
div classcontainer stylemargin-top: 100pxdiv classrowdiv classcola href# title标题 data-bs-togglepopover data-bs-placementtopdata-bs-content我是内容部分点我/a/divdiv classcola href# title标题 data-bs-togglepopover data-bs-placementbottom data-bs-content我是内容部分点我/a/divdiv classcola href# title标题 data-bs-togglepopover data-bs-placementleftdata-bs-content我是内容部分点我/a/divdiv classcola href# title标题 data-bs-togglepopover data-bs-placementright data-bs-content我是内容部分点我/a/div/divscriptvar popoverTriggerList [].slice.call(document.querySelectorAll([data-bs-togglepopover]))var popoverList popoverTriggerList.map(function (popoverTriggerEl) {return new bootstrap.Popover(popoverTriggerEl)})/script
/div
/body
/html4.3 关闭弹出框
默认情况下, 弹出框在再次点击指定元素后就会关闭.
可以使用data-bs-triggerfocus属性来设置在鼠标点击元素外部区域来关闭弹出框.
可以使用data-bs-triggerhover属性来在鼠标移动到元素上显示弹出框, 移除后关闭弹出框.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title取消弹出框/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
div classcontainer mt-5div classrowdiv classcola href# title取消弹出框 data-bs-togglepopover data-bs-triggerfocusdata-bs-content点击文档的其他地方关闭我点我/a/divdiv classcola href# title取消弹出框 data-bs-togglepopover data-bs-triggerhoverdata-bs-content点击文档的其他地方关闭我点我/a/div/div
/divscriptvar popoverTriggerList [].slice.call(document.querySelectorAll([data-bs-togglepopover]))var popoverList popoverTriggerList.map(function (popoverTriggerEl) {return new bootstrap.Popover(popoverTriggerEl)})
/script
/body
/html5. 滚动监听
5.1 滚动监听样式
滚动监听(Scrollspy)插件: 是一种常见的前端插件, 用于在网页滚动时自动更新导航目标的状态.
它通过监测滚动条的位置来确定用户当前所在的页面位置, 然后将对应的导航目标状态更新为活动状态.在Bootstarp 5中, 创建滚动监听的相关属性和类名及其介绍:
* 1. data-bs-spyscroll: 在容器元素中使用此属性, 用于指示该容器使用滚动监听功能.例: 在body元素上使用data-bs-spyscroll属性, 指示该页面使用滚动监听功能.* 2. data-bs-target.navbar: 指定滚动监听的目标元素. 该属性的值可以是一个选择器, 用于选择目标元素.这里指定为.navbar, 表示导航栏是用于滚动监听的目标.* 3. data-bs-offset50: 定义滚动监听的偏移量. 该属性的值可以是一个数字, 表示垂直偏移的像素值. 默认为10px.这个设置为50, 当滚动到目标元素的顶部超过50像素时, 滚动监听事件就会触发, 导航栏中对应的链接将被高亮显示.* 4. .sticky-top: 通过将此类应用于导航栏元素, 可以使导航栏固定在顶部, 以便在滚动时可见.创建滚动监听的步骤(灵敏度不够高):
* 1. 首先, 在body标签中添加data-bs-spyscroll属性, 以指示需要使用滚动监听功能.
* 2. 在导航栏的nav元素中, 添加相应的类名和样式, 以确保导航栏固定在顶部.例如: navbar-expand-sm bg-dark navbar-dark fixed-top.* 3. 在导航栏的ul元素中, 添加导航链接列表. 这些链接将用于导航到相应的部分.* 4. 对于每个部分, 创建一个div元素, 并为每个部分分配一个唯一的ID属性.例如: idsection1, idsection2, idsection3.* 5. 在每个部分的div元素中, 添加你想要展示的内容.* 6. 使用a元素创建导航链接, 将链接的href属性设置为对应部分的ID, 例如href#section1.* 7. 最后, 在body标签中添加data-bs-target和data-bs-offset属性, 将滚动监听功能与导航栏和偏移量关联起来.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title滚动监听/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script
/head
body data-bs-spyscroll data-bs-target.navbar data-bs-offset50
nav classnavbar navbar-expand-sm bg-dark navbar-dark fixed-topdiv classcontainer-fluidul classnavbar-navli classnav-itema classnav-link href#section1部分 1/a/lili classnav-itema classnav-link href#section2部分 2/a/lili classnav-itema classnav-link href#section3部分 3/a/li/ul/div
/navdiv idsection1 classcontainer-fluid bg-success text-white stylepadding:100px 30px;h1部分 1/h1p尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/p
/divdiv idsection2 classcontainer-fluid bg-warning stylepadding:100px 20px;h1部分 2/h1p尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/p
/divdiv idsection3 classcontainer-fluid bg-secondary text-white stylepadding:100px 20px;h1部分 3/h1p尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/p
/div
/body
/html5.2 案例
5.2.1 垂直滚动监听
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title垂直滚动监听/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
div classrowdiv classcol-4nav idnavbar-example3 classnavbar navbar-light bg-light flex-column sticky-top align-items-stretch p-3a classnavbar-brand href#Navbar/anav classnav nav-pills flex-columna classnav-link href#item-1Item 1/anav classnav nav-pills flex-columna classnav-link ms-3 my-1 href#item-1-1Item 1-1/aa classnav-link ms-3 my-1 href#item-1-2Item 1-2/a/nava classnav-link href#item-2Item 2/aa classnav-link active href#item-3Item 3/anav classnav nav-pills flex-columna classnav-link ms-3 my-1 href#item-3-1Item 3-1/aa classnav-link ms-3 my-1 active href#item-3-2Item 3-2/a/nav/nav/nav/divdiv classcol-8div data-bs-spyscroll data-bs-target#navbar-example3 data-bs-offset0 classscrollspy-example-2tabindex0h4 iditem-1Item 1/h4p尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/phrh5 iditem-1-1Item 1-1/h5p尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/phrh5 iditem-1-2Item 1-2/h5p尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/phrh4 iditem-2Item 2/h4p尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/phrh4 iditem-3Item 3/h4p尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/phrh5 iditem-3-1Item 3-1/h5p尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/phrh5 iditem-3-2Item 3-2/h5p尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/p/div/div
/div
/body
/html5.2.2 列表组形式
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title列表组形式/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/scriptstyle.content_padding {padding: 50px 20px;}/style
/head
body
div classrowdiv classcol-4div idlist-example classlist-group sticky-topa classlist-group-item list-group-item-action href#list-item-1Item 1/aa classlist-group-item list-group-item-action href#list-item-2Item 2/aa classlist-group-item list-group-item-action href#list-item-3Item 3/aa classlist-group-item list-group-item-action active href#list-item-4Item 4/a/div/divdiv classcol-8div data-bs-spyscroll data-bs-target#list-example data-bs-offset0 classscrollspy-exampletabindex0div idlist-item-1 classcontent_paddingh4Item 1/h4p尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/p/divhrdiv idlist-item-2 classcontent_paddingh4Item 2/h4p尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/p/divhrdiv idlist-item-3 classcontent_paddingh4Item 3/h4p尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/p/divhrdiv idlist-item-4 classcontent_paddingh4Item 4/h4p尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/pp尝试滚动此部分并在滚动时查看导航栏!尝试滚动此部分并在滚动时查看导航栏!/p/div/div/div
/div
/body
/html6. 侧边栏
Bootstrap中的侧边栏类似于模态框, 在移动端设备中比较常用.6.1 侧边栏组件
在 Bootstrap 5中, 用于创建侧边栏的相关类名及其介绍:
* 1. .offcanvas: 用于创建一个offcanvas元素, 定义侧边栏的样式. * 2. .offcanvas-start: 用于指定侧边栏的位置, 即屏幕的起始位置(左侧), 使用其中之一来定义侧边栏的对齐方式.* 3. .offcanvas-header: 用于定义侧边栏的头部区域, 一般用于显示标题, 关闭按钮或其他相关信息.可以将这个类应用于一个div元素, 使其成为侧边栏的头部.* 4. .offcanvas-body: 用于定义侧边栏的内容区域, 可以用于放置菜单, 表单, 文本或其他与侧边栏相关的内容.可以将这个类应用于一个div元素, 使其成为侧边栏的内容区域.* 5. .offcanvas-title: 用于定义侧边栏组件的标题区域.aria-controls属性: 是一个用于无障碍辅助功能的HTML属性, 用于指定由当前元素控制的其他元素的ID.
通过将aria-controls属性添加到一个元素上, 并将其值设置为另一个元素的ID, 可以建立起两个元素之间的关联关系.
虽然aria-controls属性本身不会触发特定的行为, 但它在构建无障碍界面时起到重要的角色.role属性: 是一个HTML属性, 用于指定元素在页面中扮演的角色或功能.
通过设置role属性, 可以告诉浏览器和辅助技术如何处理和解释元素.tabindex属性: 用于指定元素是否可通过键盘进行焦点导航.
当设置tabindex-1时, 该元素将被排除在键盘焦点顺序之外, 即无法通过按Tab键来聚焦到该元素.aria-labelledby: 是一个WAI-ARIA属性, 用于关联一个元素与一个或多个标签(或其他可识别的元素), 以提供对关联元素的描述或上下文.
通常情况下, aria-labelledby属性用于将一个标签元素的ID值与一个目标元素的aria-labelledby属性进行关联.
使用屏幕阅读器的用户将能够听到这个标签的描述, 从而更好地理解其用途.data-bs-dismissoffcanvas属性: 添加到关闭按钮上, 用于指定点击按钮时关闭offcanvas组件.
当点击按钮时, 相关的offcanvas组件将被隐藏或关闭. 这是Bootstrap JavaScript组件的一部分, 它会根据该属性来处理关闭事件.aria-labelClose属性: 定义了关闭按钮的辅助性文本.
它提供一个描述性的标签, 帮助屏幕阅读器用户了解按钮的作用.
在这个例子中, Close是表示关闭按钮的合适描述.对于使用a链接的情况, 可以在href属性中指定目标元素的选择器,
并为链接添加data-bs-toggleoffcanvas属性.对于使用button元素的情况, 可以使用data-bs-target属性来指定目标元素的选择器,
并为按钮添加data-bs-toggleoffcanvas属性.当你点击链接或按钮时, JavaScript会自动为目标元素添加.show类, 显示侧边栏内容.
再次点击链接或按钮, JavaScript会将.show类移除, 隐藏侧边栏内容.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title侧边栏组件/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
bodydiva classbtn btn-primary data-bs-toggleoffcanvas href rolebuttonaria-controlsoffcanvasExample使用链接的 href 属性/a!-- data-bs-toggle 指定操作的行为, data-bs-target绑定操作的对象--button classbtn btn-primary typebutton data-bs-toggleoffcanvas data-bs-target#offcanvasExample按钮中使用 data-bs-target/button
/divdiv classoffcanvas offcanvas-start tabindex-1 idoffcanvasExample aria-labelledbyoffcanvasExampleLabeldiv classoffcanvas-headerh5 classoffcanvas-title idoffcanvasExampleLabel侧边栏/h5button typebutton classbtn-close text-reset data-bs-dismissoffcanvas aria-labelClose/button/divdiv classoffcanvas-bodydiv一些文本作为占位符。在现实生活中您可以拥有您选择的元素。如文本、图像、列表等。/divdiv classdropdown mt-3button classbtn btn-secondary dropdown-toggle typebutton iddropdownMenuButtondata-bs-toggledropdown下拉按钮/buttonul classdropdown-menu aria-labelledbydropdownMenuButtonlia classdropdown-item href#选项1/a/lilia classdropdown-item href#选项2/a/lilia classdropdown-item href#选项3/a/li/ul/div/div
/div/body
/html6.2 侧边栏的方向
可以通过以下四个类来控制侧边栏的方向:
* 1. .offcanvas-start: 显示在左侧.
* 2. .offcanvas-end: 显示在右侧.
* 3. .offcanvas-top: 显示在顶部.
* 4. .offcanvas-bottom 显示在底部.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title显示方向/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
button classbtn btn-primary typebutton data-bs-toggleoffcanvas data-bs-target#offcanvasToparia-controlsoffcanvasTop底部侧边框
/buttondiv classoffcanvas offcanvas-bottom tabindex-1 idoffcanvasTop aria-labelledbyoffcanvasTopLabeldiv classoffcanvas-headerh5 idoffcanvasTopLabel显示在底部侧边框/h5button typebutton classbtn-close text-reset data-bs-dismissoffcanvas aria-labelClose/button/divdiv classoffcanvas-body.../div
/div/body
/html6.3 背景滚动条
data-bs-scrolltrue: 用于指定背景是否可以垂直滚动.
data-bs-scroll属性设置为false, 在打开Offcanvas侧边栏时, 背景将被禁止滚动(默认).!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title背景滚动条/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
bodydiv classsticky-top stylemargin: 5px 500pxbutton classbtn btn-primary typebutton data-bs-toggleoffcanvas data-bs-target#offcanvasWithBothOptions1aria-controlsoffcanvasWithBothOptions1默认不允许背景滚动/buttonbutton classbtn btn-primary typebutton data-bs-toggleoffcanvas data-bs-target#offcanvasWithBothOptions2aria-controlsoffcanvasWithBothOptions2允许背景滚动/button
/divdiv classoffcanvas offcanvas-start tabindex-1 idoffcanvasWithBothOptions1aria-labelledbyoffcanvasWithBothOptionsLabel1div classoffcanvas-headerh5 classoffcanvas-title idoffcanvasWithBothOptionsLabel1使用背景画布, 背景内容可滚动/h5button typebutton classbtn-close text-reset data-bs-dismissoffcanvas aria-labelClose/button/divdiv classoffcanvas-bodyp滚动背景页面查看效果/pbr/br/br/br/br/p背景滚动测试内容.../pp背景滚动测试内容.../pp背景滚动测试内容.../pp背景滚动测试内容.../pbr/br/br/br/br//div
/div
div classoffcanvas offcanvas-start data-bs-scrolltrue tabindex-1 idoffcanvasWithBothOptions2aria-labelledbyoffcanvasWithBothOptionsLabel2div classoffcanvas-headerh5 classoffcanvas-title idoffcanvasWithBothOptionsLabel2使用背景画布, 正文内容可滚动/h5button typebutton classbtn-close text-reset data-bs-dismissoffcanvas aria-labelClose/button/divdiv classoffcanvas-bodyp滚动页面查看效果/pbr/br/br/br/br/p背景滚动测试内容.../pp背景滚动测试内容.../pp背景滚动测试内容.../pp背景滚动测试内容.../pbr/br/br/br/br//div
/div
div classcontainer mt-3 text-endh3背景滚动滚动测试/h3p背景滚动测试内容.../pp背景滚动测试内容.../pp背景滚动测试内容.../pp背景滚动测试内容.../pbr/br/br/br/br/p背景滚动测试内容.../pp背景滚动测试内容.../pp背景滚动测试内容.../pp背景滚动测试内容.../pbr/br/br/br/br/p背景滚动测试内容.../pp背景滚动测试内容.../pp背景滚动测试内容.../pp背景滚动测试内容.../pbr/br/br/br/br/p背景滚动测试内容.../pp背景滚动测试内容.../pp背景滚动测试内容.../pp背景滚动测试内容.../pbr/br/br/br/br/
/div
/body
/html6.3 背景遮罩设置
data-bs-backdrop属性: 用于指定是否启用背景遮罩, 默认是开启的.
当设置data-bs-backdropfalse属性时, 打开的Offcanvas组件将没有背景遮罩.
这意味着用户可以与背景下的内容进行交互, 而不是被阻止.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title背景遮罩/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
bodydiv classsticky-top stylemargin: 5px 500pxbutton classbtn btn-primary typebutton data-bs-toggleoffcanvas data-bs-target#offcanvasWithBothOptions1aria-controlsoffcanvasWithBothOptions1默认开启遮罩/buttonbutton classbtn btn-primary typebutton data-bs-toggleoffcanvas data-bs-target#offcanvasWithBothOptions2aria-controlsoffcanvasWithBothOptions2关闭遮罩/button
/divdiv classoffcanvas offcanvas-start tabindex-1 idoffcanvasWithBothOptions1aria-labelledbyoffcanvasWithBothOptionsLabel1div classoffcanvas-headerh5 classoffcanvas-title idoffcanvasWithBothOptionsLabel1使用背景画布, 背景内容可滚动/h5button typebutton classbtn-close text-reset data-bs-dismissoffcanvas aria-labelClose/button/divdiv classoffcanvas-bodyp滚动背景页面查看效果/pbr/br/br/br/br/p背景滚动测试内容.../pp背景滚动测试内容.../pp背景滚动测试内容.../pp背景滚动测试内容.../pbr/br/br/br/br//div
/div
!--关闭遮罩并开启背景可滚动--
div classoffcanvas offcanvas-start data-bs-backdropfalse data-bs-scrolltrue tabindex-1idoffcanvasWithBothOptions2aria-labelledbyoffcanvasWithBothOptionsLabel2div classoffcanvas-headerh5 classoffcanvas-title idoffcanvasWithBothOptionsLabel2使用背景画布, 正文内容可滚动/h5button typebutton classbtn-close text-reset data-bs-dismissoffcanvas aria-labelClose/button/divdiv classoffcanvas-bodyp滚动页面查看效果/pbr/br/br/br/br/p背景滚动测试内容.../pp背景滚动测试内容.../pp背景滚动测试内容.../pp背景滚动测试内容.../pbr/br/br/br/br//div
/div
div classcontainer mt-3 text-endh3背景滚动滚动测试/h3p背景滚动测试内容.../pp背景滚动测试内容.../pp背景滚动测试内容.../pp背景滚动测试内容.../pbr/br/br/br/br/p背景滚动测试内容.../pp背景滚动测试内容.../pp背景滚动测试内容.../pp背景滚动测试内容.../pbr/br/br/br/br/p背景滚动测试内容.../pp背景滚动测试内容.../pp背景滚动测试内容.../pp背景滚动测试内容.../pbr/br/br/br/br/p背景滚动测试内容.../pp背景滚动测试内容.../pp背景滚动测试内容.../pp背景滚动测试内容.../pbr/br/br/br/br/
/div
/body
/html6.4 侧边栏案例
6.4.1 案例1
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title案例1/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/scriptstyle.bi {vertical-align: -.125em;pointer-events: none;fill: currentColor}.dropdown-toggle {outline: 0}.nav-link:hover {background-color: #00fbff;color: black !important;}/style
/head
body
svg xmlns styledisplay: none;symbol idbootstrap viewBox0 0 118 94titleBootstrap/titlepath fill-ruleevenodd clip-ruleevenodddM24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z/path/symbolsymbol idhome viewBox0 0 16 16path dM8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z//symbolsymbol idspeedometer2 viewBox0 0 16 16path dM8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z/path fill-ruleevenodddM0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z//symbolsymbol idtable viewBox0 0 16 16path dM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z//symbolsymbol idpeople-circle viewBox0 0 16 16path dM11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z/path fill-ruleevenodddM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z//symbolsymbol idgrid viewBox0 0 16 16path dM1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z//symbol/svgdiv classd-flex flex-column flex-shrink-0 p-3 text-white bg-dark stylewidth: 280px;a href/ classd-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-nonesvg classbi me-2 width40 height32use xlink:href#bootstrap//svgspan classfs-4侧边栏/span/ahrul classnav nav-pills flex-column mb-autoli classnav-itema href# classnav-link text-white aria-currentpagesvg classbi me-2 width16 height16use xlink:href#home//svg主页/a/lilia href# classnav-link text-whitesvg classbi me-2 width16 height16use xlink:href#speedometer2//svg仪表盘/a/lilia href# classnav-link text-whitesvg classbi me-2 width16 height16use xlink:href#table//svg订单/a/lilia href# classnav-link text-whitesvg classbi me-2 width16 height16use xlink:href#grid//svg产品/a/lilia href# classnav-link text-whitesvg classbi me-2 width16 height16use xlink:href#people-circle//svg客户/a/li/ulhrdiv classdropdowna href# classd-flex align-items-center text-white text-decoration-none dropdown-toggleiddropdownUser1 data-bs-toggledropdown aria-expandedfalseimg srcimg/5.png alt width32 height32 classrounded-circle me-2strongqz/strong/aul classdropdown-menu dropdown-menu-dark text-small shadow aria-labelledbydropdownUser1lia classdropdown-item href#新项目.../a/lilia classdropdown-item href#设置/a/lilia classdropdown-item href#个人信息/a/lilihr classdropdown-divider/lilia classdropdown-item href#登出/a/li/ul/div
/div
/body
/html6.4.2 案例2
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title案例2/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/scriptstyle.bi {vertical-align: -.125em;pointer-events: none;fill: currentColor}.dropdown-toggle {outline: 0}.nav-flush .nav-link {border-radius: 0}.btn-toggle-nav a {display: inline-flex;padding: .1875rem .5rem;margin-top: .125rem;margin-left: 1.25rem;text-decoration: none}.btn-toggle-nav a:hover, .btn-toggle-nav a:focus {background-color: #d2f4ea}.nav-link:hover {background-color: #00fbff;color: black !important;}/style
/head
body
svg xmlns styledisplay: none;symbol idbootstrap viewBox0 0 118 94titleBootstrap/titlepath fill-ruleevenodd clip-ruleevenodddM24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z/path/symbolsymbol idhome viewBox0 0 16 16path dM8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z//symbolsymbol idspeedometer2 viewBox0 0 16 16path dM8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z/path fill-ruleevenodddM0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z//symbolsymbol idtable viewBox0 0 16 16path dM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z//symbolsymbol idpeople-circle viewBox0 0 16 16path dM11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z/path fill-ruleevenodddM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z//symbolsymbol idgrid viewBox0 0 16 16path dM1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z//symbol
/svgdiv classd-flex flex-column flex-shrink-0 bg-light stylewidth: 4.5rem;a href/ classd-block p-3 link-dark text-decoration-none border-bottom titleLogo data-bs-toggletooltipdata-bs-placementrightsvg classbi width40 height32use xlink:href#bootstrap//svgspan classvisually-hiddenLogo/span/aul classnav nav-pills nav-flush flex-column mb-auto text-centerli classnav-itema href# classnav-link py-3 border-bottom aria-currentpage title主页data-bs-toggletooltip data-bs-placementrightsvg classbi width24 height24 roleimg aria-labelHomeuse xlink:href#home//svg/a/lilia href# classnav-link py-3 border-bottom title仪表盘 data-bs-toggletooltipdata-bs-placementrightsvg classbi width24 height24 roleimg aria-labelDashboarduse xlink:href#speedometer2//svg/a/lilia href# classnav-link py-3 border-bottom title订单 data-bs-toggletooltipdata-bs-placementrightsvg classbi width24 height24 roleimg aria-labelOrdersuse xlink:href#table//svg/a/lilia href# classnav-link py-3 border-bottom title产品 data-bs-toggletooltipdata-bs-placementrightsvg classbi width24 height24 roleimg aria-labelProductsuse xlink:href#grid//svg/a/lilia href# classnav-link py-3 border-bottom title客户 data-bs-toggletooltipdata-bs-placementrightsvg classbi width24 height24 roleimg aria-labelCustomersuse xlink:href#people-circle//svg/a/li/uldiv classdropdown border-topa href#classd-flex align-items-center justify-content-center p-3 link-dark text-decoration-none dropdown-toggleiddropdownUser3 data-bs-toggledropdown aria-expandedfalseimg srcimg/5.png altmdo width24 height24 classrounded-circle/aul classdropdown-menu text-small shadow aria-labelledbydropdownUser3lia classdropdown-item href#新项目.../a/lilia classdropdown-item href#设置/a/lilia classdropdown-item href#个人信息/a/lilihr classdropdown-divider/lilia classdropdown-item href#登出/a/li/ul/div
/div
/body
/html6.4.3 案例3
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title案例3/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/scriptstyle.bi {vertical-align: -.125em;pointer-events: none;fill: currentColor}.btn-toggle {display: inline-flex;align-items: center;padding: .25rem .5rem;font-weight: 600;color: rgba(0, 0, 0, .65);background-color: transparent;border: 0}.btn-toggle:hover, .btn-toggle:focus {color: rgba(0, 0, 0, .85);background-color: #d2f4ea}.btn-toggle::before {width: 1.25em;line-height: 0;content: url(data:image/svgxml,%3csvg xmlnshttp://www.w3.org/2000/svg width16 height16 viewBox0 0 16 16%3e%3cpath fillnone strokergba%280,0,0,.5%29 stroke-linecapround stroke-linejoinround stroke-width2 dM5 14l6-6-6-6/%3e%3c/svg%3e);transition: transform .35s ease;transform-origin: .5em 50%}.btn-toggle[aria-expandedtrue] {color: rgba(0, 0, 0, .85)}.btn-toggle[aria-expandedtrue]::before {transform: rotate(90deg)}.btn-toggle-nav a {display: inline-flex;padding: .1875rem .5rem;margin-top: .125rem;margin-left: 1.25rem;text-decoration: none}.btn-toggle-nav a:hover, .btn-toggle-nav a:focus {background-color: #d2f4ea}.fw-semibold {font-weight: 600}/style
/head
body
svg xmlns styledisplay: none;symbol idbootstrap viewBox0 0 118 94titleBootstrap/titlepath fill-ruleevenodd clip-ruleevenodddM24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z/path/symbol/svgdiv classflex-shrink-0 p-3 bg-white stylewidth: 280px;a href# classd-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottomsvg classbi me-2 width30 height24use xlink:href#bootstrap//svgspan classfs-5 fw-semibold标题/span/aul classlist-unstyled ps-0li classmb-1!-- aria-expanded 设置为True展开 菜单 --button classbtn btn-toggle align-items-center rounded collapsed data-bs-togglecollapsedata-bs-target#home-collapse aria-expandedtrue主页/button!-- show 显示子选项--div classcollapse show idhome-collapseul classbtn-toggle-nav list-unstyled fw-normal pb-1 smalllia href# classlink-dark rounded概述/a/lilia href# classlink-dark rounded更新/a/lilia href# classlink-dark rounded报告/a/li/ul/div/lili classmb-1button classbtn btn-toggle align-items-center rounded collapsed data-bs-togglecollapsedata-bs-target#dashboard-collapse aria-expandedfalse仪表盘/buttondiv classcollapse iddashboard-collapseul classbtn-toggle-nav list-unstyled fw-normal pb-1 smalllia href# classlink-dark rounded概述/a/lilia href# classlink-dark rounded周刊/a/lilia href# classlink-dark rounded月报/a/lilia href# classlink-dark rounded每报/a/li/ul/div/lili classmb-1button classbtn btn-toggle align-items-center rounded collapsed data-bs-togglecollapsedata-bs-target#orders-collapse aria-expandedfalse订单/buttondiv classcollapse idorders-collapseul classbtn-toggle-nav list-unstyled fw-normal pb-1 smalllia href# classlink-dark rounded新订单/a/lilia href# classlink-dark rounded已处理/a/lilia href# classlink-dark rounded已发货/a/lilia href# classlink-dark rounded已退货/a/li/ul/div/lili classborder-top my-3/lili classmb-1button classbtn btn-toggle align-items-center rounded collapsed data-bs-togglecollapsedata-bs-target#account-collapse aria-expandedfalse帐户/buttondiv classcollapse idaccount-collapseul classbtn-toggle-nav list-unstyled fw-normal pb-1 smalllia href# classlink-dark rounded新建.../a/lilia href# classlink-dark rounded个人资料/a/lilia href# classlink-dark rounded设置/a/lilia href# classlink-dark rounded登出/a/li/ul/div/li/ul
/div
/body
/html6.4.4 案例4
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title案例4/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/scriptstyle.bi {vertical-align: -.125em;pointer-events: none;fill: currentColor}.btn-toggle-nav a {display: inline-flex;padding: .1875rem .5rem;margin-top: .125rem;margin-left: 1.25rem;text-decoration: none}.scrollarea {overflow-y: auto}.fw-semibold {font-weight: 600}.lh-tight {line-height: 1.25}.list-group-item:hover {background-color: #00fbff;color: black !important;}/style
/head
body
svg xmlns styledisplay: none;symbol idbootstrap viewBox0 0 118 94titleBootstrap/titlepath fill-ruleevenodd clip-ruleevenodddM24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z/path/symbol
/svgdiv classd-flex flex-column align-items-stretch flex-shrink-0 bg-white stylewidth: 380px;a href/ classd-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottomsvg classbi me-2 width30 height24use xlink:href#bootstrap//svgspan classfs-5 fw-semibold列表组/span/adiv classlist-group list-group-flush border-bottom scrollareaa href# classlist-group-item list-group-item-action py-3 lh-tight aria-currenttruediv classd-flex w-100 align-items-center justify-content-betweenstrong classmb-1表项标题/strongsmall星期一/small/divdiv classcol-10 mb-1 small内容信息.../div/aa href# classlist-group-item list-group-item-action py-3 lh-tightdiv classd-flex w-100 align-items-center justify-content-betweenstrong classmb-1表项标题/strongsmall classtext-muted星期二/small/divdiv classcol-10 mb-1 small内容信息.../div/aa href# classlist-group-item list-group-item-action py-3 lh-tightdiv classd-flex w-100 align-items-center justify-content-betweenstrong classmb-1表项标题/strongsmall classtext-muted星期三/small/divdiv classcol-10 mb-1 small内容信息.../div/aa href# classlist-group-item list-group-item-action py-3 lh-tight aria-currenttruediv classd-flex w-100 align-items-center justify-content-betweenstrong classmb-1表项标题/strongsmall classtext-muted星期四/small/divdiv classcol-10 mb-1 small内容信息.../div/aa href# classlist-group-item list-group-item-action py-3 lh-tightdiv classd-flex w-100 align-items-center justify-content-betweenstrong classmb-1表项标题/strongsmall classtext-muted星期五/small/divdiv classcol-10 mb-1 small内容信息.../div/aa href# classlist-group-item list-group-item-action py-3 lh-tightdiv classd-flex w-100 align-items-center justify-content-betweenstrong classmb-1表项标题/strongsmall classtext-muted星期六/small/divdiv classcol-10 mb-1 small内容信息.../div/aa href# classlist-group-item list-group-item-action py-3 lh-tight aria-currenttruediv classd-flex w-100 align-items-center justify-content-betweenstrong classmb-1表项标题/strongsmall classtext-muted星期日/small/divdiv classcol-10 mb-1 small内容信息.../div/a/div
/div
/body
/html
