在Bootstrap 5 中 , . card , card-header , . card-body , . card-footer类是用于创建卡片样式 .
下面是这些类的简单介绍 :
* 1. . card : 用于创建一个基本的卡片容器
它作为一个包裹元素 , 通常与其他卡片类一起使用 .
* 2. . card-header : 用于创建卡片的头部部分 .
通常在卡片顶部使用 , 用于显示标题 , 图标等内容 .
* 3. . card-body : 用于创建卡片的主体内容部分 ( ) .
它通常包含文本 , 按钮 , 链接和其他与主要卡片内容相关的元素 .
* 4. . card-footer : 用于创建卡片的页脚部分 .
它经常用于放置其他附加信息 , 按钮或链接等 .
卡片可以自由搭配头部 , 内容 , 底部的布局 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container mt-5" > < divclass = " card" > < divclass = " card-header" > </ div> < divclass = " card-body" > </ div> < divclass = " card-footer" > </ div> </ div> </ div> </ body> </ html>
通过背景颜色类名修改卡片的颜色 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container mt-3" > < divclass = " card" > < divclass = " card-body" > </ div> </ div> < br> < divclass = " card bg-primary text-white" > < divclass = " card-body" > </ div> </ div> < br> < divclass = " card bg-success text-white" > < divclass = " card-body" > </ div> </ div> < br> < divclass = " card bg-info text-white" > < divclass = " card-body" > </ div> </ div> < br> < divclass = " card bg-warning text-white" > < divclass = " card-body" > </ div> </ div> < br> < divclass = " card bg-danger text-white" > < divclass = " card-body" > </ div> </ div> < br> < divclass = " card bg-secondary text-white" > < divclass = " card-body" > </ div> </ div> < br> < divclass = " card bg-dark text-white" > < divclass = " card-body" > </ div> </ div> < br> < divclass = " card bg-light text-dark" > < divclass = " card-body" > </ div> </ div> </ div> </ body> </ html>
* 1. 标题 : 可以使用 . card-title类来设置卡片的标题 .
该类通常用于 < h > 标签 , 用于为标题文本应用样式 .
* 2. 文本 : 可以使用 . card-body类来设置卡片正文的内容 .
可以在 . card-body中使用 < p > 标签来包裹文本内容 , 并使用 . card-text类为文本应用样式 .
* 3. 链接 : 可以使用 . card-link类为链接设置颜色 .
将该类应用于 < a > 标签 , 可以改变链接的颜色样式 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container mt-5" > < divclass = " card" > < divclass = " card-body" > < h4class = " card-title" > </ h4> < pclass = " card-text" > </ p> < ahref = " #" class = " card-link" > </ a> < ahref = " #" class = " card-link" > </ a> </ div> </ div> </ div> </ body> </ html>
Bootstrap 5 中 , 用于设置卡片中的图片类名及其介绍 :
* 1. . card-img : 用于为卡片中的图片添加通用样式 .
* 2. . card-img-top : 用于在顶部显示图片 .
* 3. . card-img-bottom : 用于在底部显示图片 .
* 图片显示取决于 < img > 标签的位置 , 上面三个类名使用的css代码是一个的 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container mt-3" > < divclass = " row" > < divclass = " col-6" > < divclass = " card mx-auto" style = " width : 300px" > < imgsrc = " img/avatar.png" class = " card-img-top" alt = " Card Image" style = " width : 300px" > < divclass = " card-body" > < h5class = " card-title" > </ h5> < pclass = " card-text" > </ p> < ahref = " #" class = " card-link" > </ a> </ div> </ div> </ div> < divclass = " col-6" > < divclass = " card mx-auto" style = " width : 300px" > < divclass = " card-body" > < h5class = " card-title" > </ h5> < pclass = " card-text" > </ p> < ahref = " #" class = " card-link" > </ a> </ div> < imgsrc = " img/avatar.png" class = " card-img-top" alt = " Card Image" style = " width : 300px" > </ div> </ div> </ div> </ div> </ body> </ html>
Bootstrap 5 中 , . card-img-overlay类用于在卡片组件上创建覆盖内容的效果 .
通过给卡片中的图像添加该类名 , 可以在图像上添加叠加层 , 用于显示文本 , 按钮或其他元素 .
这样可以在图像上方创建一个半透明的区域 , 从而使文本更易于阅读或展示其他视觉效果 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container mt-3" > < divclass = " card" style = " width : 600px" > < imgsrc = " img/img.png" alt = " img" style = " width : 600px" > < divclass = " card-img-overlay" > < h4class = " card-title" > </ h4> < pclass = " card-text" > </ p> < ahref = " #" class = " btn btn-primary" > </ a> </ div> </ div> </ div> </ body> </ html>
Bootstrap 5 中 , 创建下拉菜单按钮的类名及其介绍 :
* 1. . dropdown : 定义一个下拉菜单组件 .
* 2. . data-bs-toggle = "dropdown" : 指定点击按钮时触发下拉菜单的显示和隐藏 .
* 3. . dropdown-menu : 定义一个下拉菜单样式 .
* 4. . dropdown-item : 定义下拉菜单中的菜单项的样式 .
创建一个下拉菜单组件的步骤如下 :
* 1. 在HTML文档中 , 找到想要添加下拉菜单的位置 , 使用 . dropdown类创建一个下拉菜单的容器 ( div元素 , 或者其他合适的元素 ) .
* 2. 在容器内部 , 添加一个触发下拉菜单的按钮 .
这通常是一个button元素 , 但也可以是其他适当的元素 .
给按钮添加btn类来定义按钮样式与下拉图标样式 . dropdown-toggle ,
并添加data-bs-toggle = "dropdown" 属性来指定该按钮可以用于触发下拉菜单的显示和隐藏 .
* 3. 在按钮元素后面 , 添加一个div元素来作为下拉菜单的内容容器 , 并给它添加dropdown-menu类来定义下拉菜单的样式 .
* 4. 在菜单内容容器内部 , 添加需要的菜单项 .
通常使用a元素来定义菜单项 .
给每个菜单项添加dropdown-item类来定义菜单项的样式 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container mt-3" > < divclass = " dropdown" > < buttonclass = " btn btn-primary dropdown-toggle" data-bs-toggle = " dropdown" > </ button> < divclass = " dropdown-menu" > < ahref = " #" class = " dropdown-item" > </ a> < ahref = " #" class = " dropdown-item" > </ a> < ahref = " #" class = " dropdown-item" > </ a> </ div> </ div> </ div> </ body> </ html>
Bootstrap 5 中 , . dropdown-divider类用于在下拉菜单中创建分隔线 .
可以在下拉菜单的菜单项之间添加一条水平分割线 , 以提升视觉上的分组和可读性 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container mt-3" > < divclass = " dropdown" > < buttonclass = " btn btn-primary dropdown-toggle" data-bs-toggle = " dropdown" > </ button> < divclass = " dropdown-menu" > < ahref = " #" class = " dropdown-item" > </ a> < ahref = " #" class = " dropdown-item" > </ a> < hrclass = " dropdown-divider" > < ahref = " #" class = " dropdown-item" > </ a> </ div> </ div> </ div> </ body> </ html>
Bootstrap 5 中 , . dropdown-header类用于在下拉菜单中创建功能性的头部标题 .
可以在下拉菜单中添加一个特殊的标题元素 , 通常用于分组菜单项或者标记特定的内容 .
这个标题元素会有一些样式上的调整 , 使其更加突出 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container mt-3" > < divclass = " dropdown" > < buttontype = " button" class = " btn btn-primary dropdown-toggle" data-bs-toggle = " dropdown" > </ button> < ulclass = " dropdown-menu" > < liclass = " dropdown-header text-primary" > </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < liclass = " dropdown-header text-primary" > </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> </ ul> </ div> </ div> </ body> </ html>
Bootstrap 5 中 , 用于设置拉选项状态的类名及其介绍 :
* 1. 选中状态 : 在下拉菜单中选中一个选项时 , 可以将该选项添加 . active类 , 以便突出显示该选项 .
它会改变选项的背景颜色或者添加其他样式 , 以表明当前选中的状态 .
* 2. 禁用状态 : 在下拉菜单中禁用某个选项 , 可以将该选项添加 . disabled类 .
它会让该选项将无法被点击或选中 , 通常会以灰色显示以示禁用状态 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container mt-3" > < divclass = " dropdown" > < buttontype = " button" class = " btn btn-primary dropdown-toggle" data-bs-toggle = " dropdown" > </ button> < ulclass = " dropdown-menu" > < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item active" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item disabled" href = " #" > </ a> </ li> </ ul> </ div> </ div> </ body> </ html>
Bootstrap 5 中 , 可以使用下列类来改变下拉菜单的弹出方向 :
* 默认为向下弹出 .
* 1. . dropup : 将下拉菜单向上弹出 .
* 2. . dropend : 将下拉菜单向右弹出 .
* 3. . dropstart : 将下拉菜单向左弹出 .
* 4. . dropdown-menu-end : 将下拉菜单向右下方弹出 .
注意 , 上右左方向弹出需要预留空间 , 否则空间不足以显示 , 会在其他方向展示 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container mt-3" > < divclass = " row" > < divclass = " dropdown col-6" > < buttontype = " button" class = " btn btn-primary dropdown-toggle" data-bs-toggle = " dropdown" > </ button> < ulclass = " dropdown-menu" > < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> </ ul> </ div> < divclass = " dropdown dropdown-menu-end col-6 text-end" > < buttontype = " button" class = " btn btn-primary dropdown-toggle" data-bs-toggle = " dropdown" > </ button> < ulclass = " dropdown-menu" > < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> </ ul> </ div> </ div> < divclass = " row" style = " margin-top : 300px" > < divclass = " dropdown dropend col-4" > < buttontype = " button" class = " btn btn-primary dropdown-toggle" data-bs-toggle = " dropdown" > </ button> < ulclass = " dropdown-menu" > < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> </ ul> </ div> < divclass = " dropdown dropup text-center col-4" > < buttontype = " button" class = " btn btn-primary dropdown-toggle" data-bs-toggle = " dropdown" > </ button> < ulclass = " dropdown-menu" > < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> </ ul> </ div> < divclass = " dropdown dropstart text-end col-4" > < buttontype = " button" class = " btn btn-primary dropdown-toggle" data-bs-toggle = " dropdown" > </ button> < ulclass = " dropdown-menu" > < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> </ ul> </ div> </ div> </ div> </ div> </ body> </ html>
Bootstrap 5 中 , . dropdown-item-text类用于设置下拉菜单中的文本项 .
* 菜单子项有悬浮效果 , 会将去除a标签的样式 ; 文本项没有悬浮效果是一个普通文本 , 保留a标签的样式 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container mt-3" > < divclass = " dropdown" > < buttontype = " button" class = " btn btn-primary dropdown-toggle" data-bs-toggle = " dropdown" > </ button> < ulclass = " dropdown-menu" > < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item-text" href = " #" > </ a> </ li> < li> < spanclass = " dropdown-item-text" > </ span> </ li> </ ul> </ div> </ div> </ body> </ html>
为按钮设置一个下拉菜单 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container mt-3" > < divclass = " row" > < divclass = " col-6" > < divclass = " btn-group" > < buttontype = " button" class = " btn btn-primary" > </ button> < buttontype = " button" class = " btn btn-primary" > </ button> < divclass = " btn-group" > < buttontype = " button" class = " btn btn-primary dropdown-toggle" data-bs-toggle = " dropdown" > </ button> < ulclass = " dropdown-menu" > < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> </ ul> </ div> </ div> </ div> < divclass = " col-6" > < divclass = " btn-group-vertical" > < buttontype = " button" class = " btn btn-primary text-start" > </ button> < buttontype = " button" class = " btn btn-primary text-start" > </ button> < divclass = " btn-group" > < buttontype = " button" class = " btn btn-primary dropdown-toggle text-start" data-bs-toggle = " dropdown" > </ button> < ulclass = " dropdown-menu" > < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> </ ul> </ div> </ div> </ div> </ div> </ div> </ body> </ html>
<! DOCTYPE html > < htmllang = " en" > < head> < title> </ title> < metacharset = " utf-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> < style>
.dropdown-menu {
position : static;
display : block;
width : auto;
margin : 4rem auto
}
.dropdown-menu-macos {
display : grid;
gap : .25rem;
padding : .5rem;
border-radius : .5rem
}
.dropdown-menu-macos .dropdown-item {
border-radius : .25rem
}
</ style> </ head> < body> < divclass = " d-flex gap-5 justify-content-center" id = " dropdownMacos" > < ulclass = " dropdown-menu dropdown-menu-macos mx-0 shadow" style = " width : 220px; " > < li> < aclass = " dropdown-item active" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < hrclass = " dropdown-divider" > </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> </ ul> < ulclass = " dropdown-menu dropdown-menu-dark dropdown-menu-macos mx-0 border-0 shadow" style = " width : 220px; " > < li> < aclass = " dropdown-item active" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < hrclass = " dropdown-divider" > </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> </ ul> </ div> </ body> </ html>
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> < style>
.dropdown-menu {
position : static;
display : block;
width : auto;
margin : 4rem auto
}
.form-control-dark {
background-color : rgba ( 255, 255, 255, .4) ;
border-color : rgba ( 255, 255, 255, .15)
} </ style> </ head> < body> < divclass = " d-flex gap-5 justify-content-center" id = " dropdownFilter" > < divclass = " dropdown-menu pt-0 mx-0 rounded-3 shadow overflow-hidden" style = " width : 280px; " > < formclass = " p-2 mb-2 bg-light border-bottom" > < inputtype = " search" class = " form-control" autocomplete = " false" placeholder = " 搜索..." > </ form> < ulclass = " list-unstyled mb-0" > < li> < aclass = " dropdown-item d-flex align-items-center gap-2 py-2" href = " #" > < spanclass = " d-inline-block bg-success rounded-circle" style = " width : .5em; height : .5em; " > </ span> </ a> </ li> < li> < aclass = " dropdown-item d-flex align-items-center gap-2 py-2" href = " #" > < spanclass = " d-inline-block bg-primary rounded-circle" style = " width : .5em; height : .5em; " > </ span> </ a> </ li> < li> < aclass = " dropdown-item d-flex align-items-center gap-2 py-2" href = " #" > < spanclass = " d-inline-block bg-danger rounded-circle" style = " width : .5em; height : .5em; " > </ span> </ a> </ li> < li> < aclass = " dropdown-item d-flex align-items-center gap-2 py-2" href = " #" > < spanclass = " d-inline-block bg-info rounded-circle" style = " width : .5em; height : .5em; " > </ span> </ a> </ li> </ ul> </ div> < divclass = " dropdown-menu dropdown-menu-dark border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden" style = " width : 280px; " > < formclass = " p-2 mb-2 bg-dark border-bottom border-dark" > < inputtype = " search" class = " form-control form-control-dark" autocomplete = " false" placeholder = " 搜索..." > </ form> < ulclass = " list-unstyled mb-0" > < li> < aclass = " dropdown-item d-flex align-items-center gap-2 py-2" href = " #" > < spanclass = " d-inline-block bg-success rounded-circle" style = " width : .5em; height : .5em; " > </ span> </ a> </ li> < li> < aclass = " dropdown-item d-flex align-items-center gap-2 py-2" href = " #" > < spanclass = " d-inline-block bg-primary rounded-circle" style = " width : .5em; height : .5em; " > </ span> </ a> </ li> < li> < aclass = " dropdown-item d-flex align-items-center gap-2 py-2" href = " #" > < spanclass = " d-inline-block bg-danger rounded-circle" style = " width : .5em; height : .5em; " > </ span> </ a> </ li> < li> < aclass = " dropdown-item d-flex align-items-center gap-2 py-2" href = " #" > < spanclass = " d-inline-block bg-info rounded-circle" style = " width : .5em; height : .5em; " > </ span> </ a> </ li> </ ul> </ div> </ div> </ body> </ html>
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> < style>
.bi {
vertical-align : -.125em;
fill : currentColor
}
.dropdown-menu {
position : static;
display : block;
width : auto;
margin : 4rem auto
}
.dropdown-item-danger {
color : var ( --bs-red)
}
.dropdown-item-danger:hover, .dropdown-item-danger:focus {
color : #fff;
background-color : var ( --bs-red)
}
</ style> </ head> < body> < svgxmlns = " " style = " display : none; " > < symbolid = " film" viewBox = " 0 0 16 16" > < pathd = " M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z" /> </ symbol> < symbolid = " joystick" viewBox = " 0 0 16 16" > < pathd = " M10 2a2 2 0 0 1-1.5 1.937v5.087c.863.083 1.5.377 1.5.726 0 .414-.895.75-2 .75s-2-.336-2-.75c0-.35.637-.643 1.5-.726V3.937A2 2 0 1 1 10 2z" /> < pathd = " M0 9.665v1.717a1 1 0 0 0 .553.894l6.553 3.277a2 2 0 0 0 1.788 0l6.553-3.277a1 1 0 0 0 .553-.894V9.665c0-.1-.06-.19-.152-.23L9.5 6.715v.993l5.227 2.178a.125.125 0 0 1 .001.23l-5.94 2.546a2 2 0 0 1-1.576 0l-5.94-2.546a.125.125 0 0 1 .001-.23L6.5 7.708l-.013-.988L.152 9.435a.25.25 0 0 0-.152.23z" /> </ symbol> < symbolid = " music-note-beamed" viewBox = " 0 0 16 16" > < pathd = " M6 13c0 1.105-1.12 2-2.5 2S1 14.105 1 13c0-1.104 1.12-2 2.5-2s2.5.896 2.5 2zm9-2c0 1.105-1.12 2-2.5 2s-2.5-.895-2.5-2 1.12-2 2.5-2 2.5.895 2.5 2z" /> < pathfill-rule = " evenodd" d = " M14 11V2h1v9h-1zM6 3v10H5V3h1z" /> < pathd = " M5 2.905a1 1 0 0 1 .9-.995l8-.8a1 1 0 0 1 1.1.995V3L5 4V2.905z" /> </ symbol> < symbolid = " files" viewBox = " 0 0 16 16" > < pathd = " M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z" /> </ symbol> < symbolid = " image-fill" viewBox = " 0 0 16 16" > < pathd = " M.002 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-12a2 2 0 0 1-2-2V3zm1 9v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12zm5-6.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0z" /> </ symbol> < symbolid = " trash" viewBox = " 0 0 16 16" > < pathd = " M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" /> < pathfill-rule = " evenodd" d = " M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" /> </ symbol> </ svg> < divclass = " d-flex gap-5 justify-content-center" id = " dropdownIcons" > < ulclass = " dropdown-menu mx-0 shadow" style = " width : 220px; " > < li> < aclass = " dropdown-item d-flex gap-2 align-items-center" href = " #" > < svgclass = " bi" width = " 16" height = " 16" > < usexlink: href= " #files" /> </ svg> </ a> </ li> < li> < aclass = " dropdown-item d-flex gap-2 align-items-center" href = " #" > < svgclass = " bi" width = " 16" height = " 16" > < usexlink: href= " #image-fill" /> </ svg> </ a> </ li> < li> < aclass = " dropdown-item d-flex gap-2 align-items-center" href = " #" > < svgclass = " bi" width = " 16" height = " 16" > < usexlink: href= " #film" /> </ svg> </ a> </ li> < li> < aclass = " dropdown-item d-flex gap-2 align-items-center" href = " #" > < svgclass = " bi" width = " 16" height = " 16" > < usexlink: href= " #music-note-beamed" /> </ svg> </ a> </ li> < li> < aclass = " dropdown-item d-flex gap-2 align-items-center" href = " #" > < svgclass = " bi" width = " 16" height = " 16" > < usexlink: href= " #joystick" /> </ svg> </ a> </ li> < li> < hrclass = " dropdown-divider" > </ li> < li> < aclass = " dropdown-item dropdown-item-danger d-flex gap-2 align-items-center" href = " #" > < svgclass = " bi" width = " 16" height = " 16" > < usexlink: href= " #trash" /> </ svg> </ a> </ li> </ ul> < ulclass = " dropdown-menu dropdown-menu-dark mx-0 border-0 shadow" style = " width : 220px; " > < li> < aclass = " dropdown-item d-flex gap-2 align-items-center" href = " #" > < svgclass = " bi" width = " 16" height = " 16" > < usexlink: href= " #files" /> </ svg> </ a> </ li> < li> < aclass = " dropdown-item d-flex gap-2 align-items-center" href = " #" > < svgclass = " bi" width = " 16" height = " 16" > < usexlink: href= " #image-fill" /> </ svg> </ a> </ li> < li> < aclass = " dropdown-item d-flex gap-2 align-items-center" href = " #" > < svgclass = " bi" width = " 16" height = " 16" > < usexlink: href= " #film" /> </ svg> </ a> </ li> < li> < aclass = " dropdown-item d-flex gap-2 align-items-center" href = " #" > < svgclass = " bi" width = " 16" height = " 16" > < usexlink: href= " #music-note-beamed" /> </ svg> </ a> </ li> < li> < aclass = " dropdown-item d-flex gap-2 align-items-center" href = " #" > < svgclass = " bi" width = " 16" height = " 16" > < usexlink: href= " #joystick" /> </ svg> </ a> </ li> < li> < hrclass = " dropdown-divider" > </ li> < li> < aclass = " dropdown-item d-flex gap-2 align-items-center" href = " #" > < svgclass = " bi" width = " 16" height = " 16" > < usexlink: href= " #trash" /> </ svg> </ a> </ li> </ ul> </ div> </ body> </ html>
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> < style>
.bi {
vertical-align : -.125em;
fill : currentColor
}
.dropdown-menu {
position : static;
display : block;
width : auto;
margin : 4rem auto
}
.cal-month, .cal-days, .cal-weekdays {
display : grid;
grid-template-columns : repeat ( 7, 1fr) ;
align-items : center
}
.cal-month-name {
grid-column-start : 2;
grid-column-end : 7;
text-align : center
}
.cal-weekday, .cal-btn {
display : flex;
flex-shrink : 0;
align-items : center;
justify-content : center;
height : 3rem;
padding : 0
}
.cal-btn:not([disabled]) {
font-weight : 500
}
.cal-btn:hover, .cal-btn:focus {
background-color : rgba ( 0, 0, 0, .05)
}
.cal-btn[disabled] {
opacity : .5
}
</ style> </ head> < body> < svgxmlns = " " style = " display : none; " > < symbolid = " arrow-left-short" viewBox = " 0 0 16 16" > < pathfill-rule = " evenodd" d = " M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z" /> </ symbol> < symbolid = " arrow-right-short" viewBox = " 0 0 16 16" > < pathfill-rule = " evenodd" d = " M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" /> </ symbol> </ svg> < divclass = " dropdown-menu p-2 shadow rounded-3" style = " width : 340px" id = " dropdownCalendar" > < divclass = " d-grid gap-1" > < divclass = " cal" > < divclass = " cal-month" > < buttonclass = " btn cal-btn" type = " button" > < svgclass = " bi" width = " 16" height = " 16" > < usexlink: href= " #arrow-left-short" /> </ svg> </ button> < strongclass = " cal-month-name" > </ strong> < selectclass = " form-select cal-month-name d-none" > < optionvalue = " January" > </ option> < optionvalue = " February" > </ option> < optionvalue = " March" > </ option> < optionvalue = " April" > </ option> < optionvalue = " May" > </ option> < optionselected value = " June" > </ option> < optionvalue = " July" > </ option> < optionvalue = " August" > </ option> < optionvalue = " September" > </ option> < optionvalue = " October" > </ option> < optionvalue = " November" > </ option> < optionvalue = " December" > </ option> </ select> < buttonclass = " btn cal-btn" type = " button" > < svgclass = " bi" width = " 16" height = " 16" > < usexlink: href= " #arrow-right-short" /> </ svg> </ button> </ div> < divclass = " cal-weekdays text-muted" > < divclass = " cal-weekday" > </ div> < divclass = " cal-weekday" > </ div> < divclass = " cal-weekday" > </ div> < divclass = " cal-weekday" > </ div> < divclass = " cal-weekday" > </ div> < divclass = " cal-weekday" > </ div> < divclass = " cal-weekday" > </ div> </ div> < divclass = " cal-days" > < buttonclass = " btn cal-btn" disabled type = " button" > </ button> < buttonclass = " btn cal-btn" disabled type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> < buttonclass = " btn cal-btn" type = " button" > </ button> </ div> </ div> </ div> </ div> </ body> </ html>
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> < style>
.bi {
vertical-align : -.125em;
fill : currentColor
}
.dropdown-menu {
position : static;
display : block;
width : auto;
margin : 4rem auto
}
.btn-hover-light {
text-align : left;
background-color : var ( --bs-white) ;
border-radius : .25rem
}
.btn-hover-light:hover, .btn-hover-light:focus {
color : var ( --bs-blue) ;
background-color : var ( --bs-light)
}
</ style> </ head> < body> < svgxmlns = " " style = " display : none; " > < symbolid = " image-fill" viewBox = " 0 0 16 16" > < pathd = " M.002 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-12a2 2 0 0 1-2-2V3zm1 9v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12zm5-6.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0z" /> </ symbol> < symbolid = " question-circle" viewBox = " 0 0 16 16" > < pathd = " M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" /> < pathd = " M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" /> </ symbol> </ svg> < divclass = " dropdown-menu d-flex align-items-stretch p-3 rounded-3 shadow-lg" style = " width : 600px" id = " dropdownMega" > < navclass = " d-grid gap-2 col-8" > < ahref = " #" class = " btn btn-hover-light d-flex align-items-center gap-3 py-2 px-3 lh-sm" > < svgclass = " bi" width = " 32" height = " 32" > < usexlink: href= " #image-fill" /> </ svg> < div> < strongclass = " d-block" > </ strong> < small> </ small> </ div> </ a> < ahref = " #" class = " btn btn-hover-light d-flex align-items-center gap-3 py-2 px-3 lh-sm" > < svgclass = " bi" width = " 32" height = " 32" > < usexlink: href= " #question-circle" /> </ svg> < div> < strongclass = " d-block" > </ strong> < small> </ small> </ div> </ a> </ nav> < divclass = " col-4" > </ div> </ div> </ body> </ html>
在 Bootstrap 5 中 , data-bs-target属性与data-bs-toggle属性搭配使用后 , 可以将组件行为与目标元素关联起来 .
属性介绍 :
* 1. data-bs-toggle属性 : 用于定义组件的行为 , 指示组件在何时触发 .
可以设置的值取决于具体的组件类型 , 如 : "collapse" ( 折叠菜单 ) , "modal" ( 模态框 ) , "tab" ( 标签页 ) 等 .
data-bs-toggle = "collapse" : 用于触发折叠菜单的展开与折叠 .
data-bs-toggle = "modal" : 用于触发模态框的显示与隐藏 .
data-bs-toggle = "tab" : 用于触发标签页的切换 .
注意 : < a > 元素上可以使用href属性来代替data-bs-target属性 .
* 2. data-bs-target属性 : 用于指定组件的目标元素或目标选择器 .
目标元素可以是一个CSS选择器 , 用于标识要操作的具体元素 .
也可以是一个指定的元素ID , 以 # 开头 , 如 : data-bs-target = "#myModal" .
Bootstrap 5 中 , . collapse类用于将内容进行折叠 .
通过在HTML元素中使用该类 , 可以使其在初始状态下处于折叠的状态 , 并在触发事件后展开或收起 .
折叠的两种状态 : 隐藏与展示 , 展示会为元素添加show属性 , 元素折叠时会为元素移除show属性 .
. collapse类 : 控制元素的隐藏 .
. show类 : 控制元素的显示 .
以下实例中 , 当按钮被点击时 , data-bs-toggle = "collapse" 属性触发了折叠菜单的行为 ,
data-bs-target = "#demo" 属性指定了折叠菜单的目标元素为ID为demo的 < div > 元素 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container mt-5" > < ahref = " #demo" class = " btn btn-primary" data-bs-toggle = " collapse" > </ a> < divid = " demo" class = " collapse" > < divclass = " border mt-3 p-3" > < p> </ p> < p> </ p> < p> </ p> < p> </ p> </ div> </ div> </ div> </ body> </ html>
在使用Bootstrap中的折叠组件时 , 可以使用data-bs-parent属性来确保所有的折叠元素在指定的父元素下 .
这样 , 当一个折叠选项显示时 , 其他选项就会隐藏起来 .
当每个折叠元素都被设置了 "data-bs-parent" 属性时 , 它们将与同一个父元素相关联 .
当一个折叠元素展开时 , 其他与它有相同 "data-bs-parent" 值的折叠元素会自动折叠起来 , 确保在同一个区域内只有一个折叠元素可见
下面是一个典型的手风琴案例 ( 由于手风琴的展开和折叠特性与界面上的手风琴类似 , 因此这种界面元素被称为手风琴 ) .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container mt-3" id = " accordion" > < divclass = " card" > < divclass = " card-header d-grid" > < buttonclass = " btn btn-primary" data-bs-toggle = " collapse" data-bs-target = " #d0" > </ button> </ div> < divclass = " collapse" id = " d0" data-bs-parent = " #accordion" > < divclass = " card-body" > < p> </ p> < p> </ p> < p> </ p> < p> </ p> </ div> </ div> </ div> < divclass = " card" > < divclass = " card-header d-grid" > < buttonclass = " btn btn-primary" data-bs-toggle = " collapse" data-bs-target = " #d1" > </ button> </ div> < divclass = " collapse" id = " d1" data-bs-parent = " #accordion" > < divclass = " card-body" > < p> </ p> < p> </ p> < p> </ p> < p> </ p> </ div> </ div> </ div> < divclass = " card" > < divclass = " card-header d-grid" > < buttonclass = " btn btn-primary" data-bs-toggle = " collapse" data-bs-target = " #d2" > </ button> </ div> < divclass = " collapse" id = " d2" data-bs-parent = " #accordion" > < divclass = " card-body" > < p> </ p> < p> </ p> < p> </ p> < p> </ p> </ div> </ div> </ div> </ div> </ body> </ html>
在Bootstrap 5 中 , 可以使用以下类名来创建导航栏 :
* 1. . nav : 用于标识一个导航栏组件的容器 , 可以用于水平或垂直导航 .
* 2. . nav-item : 用于标识导航栏中的每个子项的容器 .
* 3. . nav-link : 用于标识导航栏中的链接元素 , 用于呈现导航栏项的文本和样式 .
创建方式 :
* 1. 创建一个无效列表 .
* 2. 在 < ul > 元素上添加了 . nav类 , 将其标记为导航栏 .
* 3. 在每个 < li > 元素中 , 添加 . nav-item类 , 将其标记为导航栏的每个选项 .
* 4. 为每个链接 < a > 元素都有 . nav-link类 , 用于样式化导航栏链接 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container" > < ulclass = " nav" > < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> </ ul> </ div> </ body> </ html>
导航状态相关类名 :
* 1. . active : 在导航栏项中用于表示当前活动 / 选中状态的项 .
* 2. . disabled : 用于在导航栏项中禁用某个链接 , 使其无法点击 .
* 注意 . active类来没有明现的样式 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container" > < ulclass = " nav" > < liclass = " nav-item" > < aclass = " nav-link active" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link disabled" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> </ ul> </ div> </ body> </ html>
在Bootstrap 5 中 , 用于设置导航对齐方式的类名及其介绍 :
* 0. 默认向左对齐 .
* 1. . justify-content-center : 用于将导航栏居中显示 .
* 2. . justify-content-end : 用于将导航栏右对齐 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container" > < ulclass = " nav" > < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> </ ul> < ulclass = " nav justify-content-center" > < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> </ ul> < ulclass = " nav justify-content-end" > < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> </ ul> </ div> </ body> </ html>
在Bootstrap 5 中 , . flex-column类用于创建垂直导航 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container" > < ulclass = " nav flex-column" > < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> </ ul> </ div> </ body> </ html>
在Bootstrap 5 中 , . nav-tabs类可以将一组链接或按钮转换为选项卡样式的导航 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container" > < ulclass = " nav nav-tabs" > < liclass = " nav-item" > < aclass = " nav-link active" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link disabled" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> </ ul> </ div> </ body> </ html>
在Bootstrap 5 中 , . nav-pills类可以将导航项设置成胶囊形状 .
* 默认选中 , 才有样式 !
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container mt-1" > < ulclass = " nav nav-pills" > < liclass = " nav-item" > < aclass = " nav-link active" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> </ ul> </ div> </ body> </ html>
在Bootstrap 5 中 , . nav-justified类用于在导航栏中设置选项卡或链接项等宽显示 , 并且将它们平均分布在水平方向上 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container mt-1" > < ulclass = " nav nav-tabs nav-justified" > < liclass = " nav-item" > < aclass = " nav-link active" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> </ ul> < divclass = " row mt-3" > < divclass = " col-6" > < ulclass = " nav nav-tabs nav-justified" > < liclass = " nav-item" > < aclass = " nav-link active" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> </ ul> </ div> </ div> </ div> </ body> </ html>
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container mt-1" > < ulclass = " nav nav-tabs nav-justified" > < liclass = " nav-item" > < aclass = " nav-link active" href = " #" > </ a> </ li> < liclass = " nav-item dropdown" > < aclass = " nav-link dropdown-toggle" data-bs-toggle = " dropdown" href = " #" > </ a> < divclass = " dropdown-menu" > < aclass = " dropdown-item" href = " #" > </ a> < aclass = " dropdown-item" href = " #" > </ a> < aclass = " dropdown-item" href = " #" > </ a> </ div> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> </ ul> </ div> </ body> </ html>
在bootstrap 5 中 , 设置动态选项卡的相关属性与类目的介绍 :
* 1. data-bs-toggle = "tab" : 在每个选项卡链接中添加此属性 , 指示该链接用于切换选项卡 .
* 2. . tab-content : 用于定义选项卡内容的容器 .
* 3. . tab-pane : 用于定义每个选项卡内容的元素 .
* 4. . fade : 可选的类名 , 用于给选项卡内容添加淡入效果 .
创建步骤 :
* 1. 使用 < div > 元素创建一个动态选项卡的容器 , 并为该容器添加 . tab-content类 .
* 2. 在选项卡容器中使用 < div > 元素创建选项卡的内容 , 并为每个内容元素添加 . tab-pane类 .
确保为每个选项卡内容元素设置一个唯一的id .
* 3. 在选项卡链接中使用data-bs-toggle = "tab" 属性 , 为每个链接设置连接到选项卡内容的锚点 .
确保锚点与对应的选项卡内容元素的id匹配 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container mt-3" > < ulclass = " nav nav-tabs" role = " tablist" > < liclass = " nav-item" > < aclass = " nav-link active" data-bs-toggle = " tab" href = " #home" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" data-bs-toggle = " tab" href = " #menu1" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" data-bs-toggle = " tab" href = " #menu2" > </ a> </ li> </ ul> < divclass = " tab-content" > < divid = " home" class = " container tab-pane active" > < br> < h3> </ h3> < p> </ p> </ div> < divid = " menu1" class = " container tab-pane fade" > < br> < h3> </ h3> < p> </ p> </ div> < divid = " menu2" class = " container tab-pane fade" > < br> < h3> </ h3> < p> </ p> </ div> </ div> </ div> </ body> </ html>
在Bootstrap 5 中 , 创建导航栏相关的类名及其介绍 :
* 1. . navbar : 用于创建导航栏的容器 ; 将此类应用于 < nav > 元素上 .
* 2. . navbar-expand-xxl | xl | lg | md | sm类 : 用于创建响应式的导航栏 .
导航条默认是垂直的 , 使用 . navbar-expand-xxl | xl | lg | md | sm类 , 用于创建响应式的导航栏 , 根据屏幕尺寸水平展开或垂直堆叠导航链接 .
* 3. . navbar-nav : 用于创建导航链接的列表 ; 将此类应用于 < ul > 元素上 .
* 4. . nav-item : 用于定义导航链接的列表项 : 将此类应用于 < li > 元素上 .
* 5. . nav-link : 用于设置导航链接的样式 ; 将此类应用于 < a > 元素上 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container mt-1" > < navclass = " navbar navbar-expand-lg bg-info" > < ulclass = " navbar-nav" > < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> </ ul> </ nav> </ div> </ body> </ html>
导航栏状态相关类名 :
* 1. . active : 在导航栏项中用于表示当前活动 / 选中状态的项 .
* 2. . disabled : 用于在导航栏项中禁用某个链接 , 使其无法点击 .
* 注意 . active类来没有明现的样式 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container mt-1" > < navclass = " navbar navbar-expand-lg bg-info" > < ulclass = " navbar-nav" > < liclass = " nav-item" > < aclass = " nav-link active" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link disabled" href = " #" > </ a> </ li> </ ul> </ nav> </ div> </ body> </ html>
导航栏一般放在页面的顶部 .
在Bootstrap 5 中 , 用于设置导航栏对齐方式的类名及其介绍 :
* 0. 默认向左对齐 .
* 1. . justify-content-center : 用于将导航栏居中显示 .
* 2. . justify-content-end : 用于将导航栏右对齐 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container mt-1" > < navclass = " navbar navbar-expand-lg bg-info" > < ulclass = " navbar-nav" > < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> </ ul> </ nav> < navclass = " navbar navbar-expand-lg bg-info mt-3 justify-content-center" > < ulclass = " navbar-nav" > < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> </ ul> </ nav> < navclass = " navbar navbar-expand-lg bg-info mt-3 justify-content-end" > < ulclass = " navbar-nav" > < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> </ ul> </ nav> </ div> </ body> </ html>
常用背景颜色类名介绍 :
* 1. . bg-primary : 蓝色 , 主要的主题颜色 .
* 2. . bg-secondary : 灰色 , 次要的主题颜色 .
* 3. . bg-success : 绿色 , 表示成功的颜色 .
* 4. . bg-info : 浅蓝色 , 表示信息的颜色 .
* 5. . bg-warning : 黄色 , 表示警告的颜色 .
* 6. . bg-danger : 红色 , 表示危险或错误的颜色 .
* 7. . bg-dark : 深色 , 将背景颜色设置为深灰色或黑色 .
* 8. . bg-light : 浅色 , 将背景颜色设置为淡灰色或白色 .
在Bootstrap 5 中 , . navbar-dark类用于将导航栏文字设置为深灰色 , 还额外添加鼠标悬浮效果 . . .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container mt-1" > < navclass = " navbar navbar-expand-sm bg-primary navbar-dark" > < ulclass = " navbar-nav" > < liclass = " nav-item 主页" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link disabled" href = " #" > </ a> </ li> </ ul> </ nav> < navclass = " navbar navbar-expand-sm bg-success navbar-dark" > < ulclass = " navbar-nav" > < liclass = " nav-item 主页" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link disabled" href = " #" > </ a> </ li> </ ul> </ nav> < navclass = " navbar navbar-expand-sm bg-info navbar-dark" > < ulclass = " navbar-nav" > < liclass = " nav-item 主页" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link disabled" href = " #" > </ a> </ li> </ ul> </ nav> < navclass = " navbar navbar-expand-sm bg-warning navbar-dark" > < ulclass = " navbar-nav" > < liclass = " nav-item 主页" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link disabled" href = " #" > </ a> </ li> </ ul> </ nav> < navclass = " navbar navbar-expand-sm bg-danger navbar-dark" > < ulclass = " navbar-nav" > < liclass = " nav-item 主页" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link disabled" href = " #" > </ a> </ li> </ ul> </ nav> < navclass = " navbar navbar-expand-sm bg-secondary navbar-dark" > < ulclass = " navbar-nav" > < liclass = " nav-item 主页" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link disabled" href = " #" > </ a> </ li> </ ul> </ nav> < navclass = " navbar navbar-expand-sm bg-light" > < ulclass = " navbar-nav" > < liclass = " nav-item 主页" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link disabled" href = " #" > </ a> </ li> </ ul> </ nav> </ div> </ body> </ html>
在Bootstrap 5 中 , . navbar-brand类用于定义导航栏中的品牌名称或标志 .
通过为网站的主页或标志添加 . navbar-brand类 , 可以使其在导航栏中获得特定的样式和布局 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container" > < navclass = " navbar navbar-expand-sm bg-dark navbar-dark" > < aclass = " navbar-brand" href = " #" > </ a> < ulclass = " navbar-nav" > < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> </ ul> </ nav> < navclass = " navbar navbar-expand-sm bg-dark navbar-dark mt-5" > < aclass = " navbar-brand" href = " #" > < imgsrc = " img/img2.png" alt = " logo" > </ a> < ulclass = " navbar-nav" > < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> </ ul> </ nav> </ div> </ body> </ html>
通常 , 在小屏幕上都会折叠导航栏 , 通过点击来显示导航选项 .
在Bootstrap 5 中 , 用于设置折叠导航栏的相关类名及其介绍 :
* 1. navbar-expand-md : 可以使得导航栏适应中等屏幕尺寸及以上时自动展开 , 以便更好地展示导航菜单和内容 .
* 2. navbar-toggler : 用于创建导航栏的折叠按钮 , 点击按钮时 , 导航内容将折叠或展开 .
* 3. navbar-collapse : 用于包裹导航栏的内容 , 并配合collapse类一起使用 , 以实现导航内容的折叠和展开效果 .
* 4. navbar-toggler-icon : 用于创建导航栏折叠按钮的图标的类名 .
创建折叠导航栏的步骤如下 :
* 1. 创建一个导航栏容器 < nav > .
* 2. 在导航栏容器内添加一个 < button > 按钮 , 并使用类名 . navbar-toggler标识这是一个折叠导航栏的触发器 .
在按钮内添加一个 < span > 元素 , 并使用类名 . navbar-toggler-icon创建图标按钮 .
* 3. 为按钮添加data-bs-toggle = "collapse" 属性 , 以指定按钮与折叠效果的关联 .
使用 data-bs-target = "#thetarget" 属性 , 将按钮与要折叠的导航选项内容进行匹配 .
# thetarget是包含导航选项内容的 < div > 元素的ID或选择器 .
* 4. 创建一个包裹导航选项内容的 < div > 元素 , 并给它添加类名 . collapse . navbar-collapse , 以实现折叠效果 .
该 < div > 元素的ID或选择器应与按钮的data-bs-target属性值匹配 .
* 5. 在包裹导航选项内容的 < div > 内部添加导航链接 , 按钮等内容 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container" > < navclass = " navbar navbar-expand-md bg-dark navbar-dark" > < aclass = " navbar-brand" href = " #" > </ a> < buttonclass = " navbar-toggler" type = " button" data-bs-toggle = " collapse" data-bs-target = " #collapsibleNavbar" > < spanclass = " navbar-toggler-icon" > </ span> </ button> < divclass = " collapse navbar-collapse" id = " collapsibleNavbar" > < ulclass = " navbar-nav" > < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> </ ul> </ div> </ nav> </ div> </ body> </ html>
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container" > < navclass = " navbar navbar-expand-sm bg-dark navbar-dark" > < aclass = " navbar-brand" href = " #" > </ a> < ulclass = " navbar-nav" > < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item dropdown" > < aclass = " nav-link dropdown-toggle" href = " #" id = " navbardrop" data-bs-toggle = " dropdown" > </ a> < divclass = " dropdown-menu" > < aclass = " dropdown-item" href = " #" > </ a> < aclass = " dropdown-item" href = " #" > </ a> < aclass = " dropdown-item" href = " #" > </ a> </ div> </ li> </ ul> </ nav> </ div> </ body> </ html>
可以在导航栏中添加 < form > 元素内嵌表单 .
以下是关于表单布局相关类名的介绍 :
* 1. . d-flex : 将元素转换为Flexbox容器 , 以实现更灵活的布局 .
通过添加 . d-flex类 , 可以将元素内的子元素排列为水平方向 , 并使用Flexbox灵活调整它们的布局 .
这在导航栏中使用 < form > 元素时 , 可以实现输入框和按钮的水平排列 .
* 2. . ms-auto : 这个类会将元素推到其父Flexbox容器的右侧 .
在导航栏中 . 可以将这个类应用于 < form > 元素 , 使其在导航栏中靠右显示 .
* 3. . me-x : 用于给元素添加右边距 , 其中x代表间距的单位数 ( 1 - 5 ) .
在导航栏中 , 你可以使用 . me- 2 类来给输入框添加右边距 , 创造输入框和按钮之间的适当间隔 .
* 4. . form-control : 用于设置输入框的样式 , 包括宽度 , 高度 , 边框 , 边框圆角等 .
通过添加 . form-control类 , 输入框将占据父容器的整个宽度 , 并获得适当的样式 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container" > < navclass = " navbar navbar-expand-sm navbar-dark bg-dark" > < aclass = " navbar-brand" href = " #" > </ a> < buttonclass = " navbar-toggler" type = " button" data-bs-toggle = " collapse" data-bs-target = " #navbar" > < spanclass = " navbar-toggler-icon" > </ span> </ button> < divclass = " collapse navbar-collapse" id = " navbar" > < ulclass = " navbar-nav" > < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> </ ul> < formclass = " d-flex ms-auto me-2" > < inputclass = " form-control me-2" type = " text" placeholder = " 搜索" > < buttonclass = " btn btn-primary" type = " button" style = " width : 80px" > </ button> </ form> </ div> </ nav> </ div> </ body> </ html>
在Bootstrap 5 中 , . navbar-text类用于在导航栏中添加纯文本内容 , 例如一些简短的描述 , 标语 , 联系信息等 .
文本会在导航栏中垂直居中 , 并与导航链接对齐 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < divclass = " container" > < navclass = " navbar navbar-expand-sm bg-dark navbar-dark" > < ulclass = " navbar-nav" > < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> </ ul> < spanclass = " navbar-text" > </ span> </ nav> </ div> </ body> </ html>
在Bootstrap 5 中 , 固定导航栏相关的类名及其介绍 :
* 1. . fixed-top类是用于将元素固定在顶部 .
当应用 . fixed-top类到导航栏的 < nav > 元素上时 , 导航栏将保持在页面可见区域的顶部 , 即使页面滚动 .
* 2. . fixed-bottom类用于设置导航栏固定在底部 .
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> </ head> < body> < navclass = " navbar navbar-expand-sm bg-dark navbar-dark container fixed-top" > < aclass = " navbar-brand" href = " #" > </ a> < ulclass = " navbar-nav" > < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> < liclass = " nav-item" > < aclass = " nav-link" href = " #" > </ a> </ li> </ ul> </ nav> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> </ body> </ html>
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> < style>
.bi {
vertical-align : -.125em;
fill : currentColor
}
</ style> </ head> < body> < svgxmlns = " " style = " display : none; " > < symbolid = " bootstrap" viewBox = " 0 0 118 94" > < title> </ title> < pathfill-rule = " evenodd" clip-rule = " evenodd" d = " M24.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> </ svg> < divclass = " container" > < headerclass = " d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom" > < ahref = " #" class = " d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none" > < svgclass = " bi me-2" width = " 40" height = " 32" > < usexlink: href= " #bootstrap" /> </ svg> < spanclass = " fs-4" > </ span> </ a> < ulclass = " nav nav-pills" > < liclass = " nav-item" > < ahref = " #" class = " nav-link active" aria-current = " page" > </ a> </ li> < liclass = " nav-item" > < ahref = " #" class = " nav-link" > </ a> </ li> < liclass = " nav-item" > < ahref = " #" class = " nav-link" > </ a> </ li> < liclass = " nav-item" > < ahref = " #" class = " nav-link" > </ a> </ li> < liclass = " nav-item" > < ahref = " #" class = " nav-link" > </ a> </ li> </ ul> </ header> </ div> </ body> </ html>
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> < style>
.bi {
vertical-align : -.125em;
fill : currentColor
}
</ style> </ head> < body> < svgxmlns = " " style = " display : none; " > < symbolid = " bootstrap" viewBox = " 0 0 118 94" > < title> </ title> < pathfill-rule = " evenodd" clip-rule = " evenodd" d = " M24.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> </ svg> < divclass = " container" > < headerclass = " d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom" > < ahref = " #" class = " d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none" > < svgclass = " bi me-2" width = " 40" height = " 32" role = " img" aria-label = " Bootstrap" > < usexlink: href= " #bootstrap" /> </ svg> </ a> < ulclass = " nav col-12 col-md-auto mb-2 justify-content-center mb-md-0" > < li> < ahref = " #" class = " nav-link px-2 link-secondary" > </ a> </ li> < li> < ahref = " #" class = " nav-link px-2 link-dark" > </ a> </ li> < li> < ahref = " #" class = " nav-link px-2 link-dark" > </ a> </ li> < li> < ahref = " #" class = " nav-link px-2 link-dark" > </ a> </ li> < li> < ahref = " #" class = " nav-link px-2 link-dark" > </ a> </ li> </ ul> < divclass = " col-md-3 text-end" > < buttontype = " button" class = " btn btn-outline-primary me-2" > </ button> < buttontype = " button" class = " btn btn-primary" > </ button> </ div> </ header> </ div> </ body> </ html>
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> < style>
.bi {
vertical-align : -.125em;
fill : currentColor
}
</ style> </ head> < body> < svgxmlns = " " style = " display : none; " > < symbolid = " bootstrap" viewBox = " 0 0 118 94" > < title> </ title> < pathfill-rule = " evenodd" clip-rule = " evenodd" d = " M24.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> </ svg> < divclass = " container" > < headerclass = " p-3 bg-dark text-white" > < divclass = " container" > < divclass = " d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start" > < ahref = " #" class = " d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none" > < svgclass = " bi me-2" width = " 40" height = " 32" role = " img" aria-label = " Bootstrap" > < usexlink: href= " #bootstrap" /> </ svg> </ a> < ulclass = " nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0" > < li> < ahref = " #" class = " nav-link px-2 text-secondary" > </ a> </ li> < li> < ahref = " #" class = " nav-link px-2 text-white" > </ a> </ li> < li> < ahref = " #" class = " nav-link px-2 text-white" > </ a> </ li> < li> < ahref = " #" class = " nav-link px-2 text-white" > </ a> </ li> < li> < ahref = " #" class = " nav-link px-2 text-white" > </ a> </ li> </ ul> < formclass = " col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" > < inputtype = " search" class = " form-control form-control-dark" placeholder = " Search..." aria-label = " Search" > </ form> < divclass = " text-end" > < buttontype = " button" class = " btn btn-outline-light me-2" > </ button> < buttontype = " button" class = " btn btn-warning" > </ button> </ div> </ div> </ div> </ header> </ div> </ body> </ html>
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> < style>
.bi {
vertical-align : -.125em;
fill : currentColor
}
.text-small {
font-size : 85%
}
.dropdown-toggle {
outline : 0
} </ style> </ head> < body> < svgxmlns = " " style = " display : none; " > < symbolid = " bootstrap" viewBox = " 0 0 118 94" > < title> </ title> < pathfill-rule = " evenodd" clip-rule = " evenodd" d = " M24.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> </ svg> < headerclass = " p-3 mb-3 border-bottom" > < divclass = " container" > < divclass = " d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start" > < ahref = " /" class = " d-flex align-items-center mb-2 mb-lg-0 text-dark text-decoration-none" > < svgclass = " bi me-2" width = " 40" height = " 32" role = " img" aria-label = " Bootstrap" > < usexlink: href= " #bootstrap" /> </ svg> </ a> < ulclass = " nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0" > < li> < ahref = " #" class = " nav-link px-2 link-secondary" > </ a> </ li> < li> < ahref = " #" class = " nav-link px-2 link-dark" > </ a> </ li> < li> < ahref = " #" class = " nav-link px-2 link-dark" > </ a> </ li> < li> < ahref = " #" class = " nav-link px-2 link-dark" > </ a> </ li> </ ul> < formclass = " col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" > < inputtype = " search" class = " form-control" placeholder = " 搜索..." aria-label = " Search" > </ form> < divclass = " dropdown text-end" > < ahref = " #" class = " d-block link-dark text-decoration-none dropdown-toggle" id = " dropdownUser1" data-bs-toggle = " dropdown" aria-expanded = " false" > < imgsrc = " img/img3.png" alt = " mdo" width = " 32" height = " 32" class = " rounded-circle" > </ a> < ulclass = " dropdown-menu text-small" aria-labelledby = " dropdownUser1" > < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < hrclass = " dropdown-divider" > </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> </ ul> </ div> </ div> </ div> </ header> </ body> </ html>
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> < style>
.bi {
vertical-align : -.125em;
fill : currentColor
}
.text-small {
font-size : 85%
}
.dropdown-toggle {
outline : 0
} </ style> </ head> < body> < svgxmlns = " " style = " display : none; " > < symbolid = " bootstrap" viewBox = " 0 0 118 94" > < title> </ title> < pathfill-rule = " evenodd" clip-rule = " evenodd" d = " M24.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> </ svg> < headerclass = " py-3 mb-3 border-bottom" > < divclass = " container-fluid d-grid gap-3 align-items-center" style = " grid-template-columns : 1fr 2fr; " > < divclass = " dropdown" > < ahref = " #" class = " d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-dark text-decoration-none dropdown-toggle" id = " dropdownNavLink" data-bs-toggle = " dropdown" aria-expanded = " false" > < svgclass = " bi me-2" width = " 40" height = " 32" > < usexlink: href= " #bootstrap" /> </ svg> </ a> < ulclass = " dropdown-menu text-small shadow" aria-labelledby = " dropdownNavLink" > < li> < aclass = " dropdown-item active" href = " #" aria-current = " page" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < hrclass = " dropdown-divider" > </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> </ ul> </ div> < divclass = " d-flex align-items-center" > < formclass = " w-100 me-3" > < inputtype = " search" class = " form-control" placeholder = " 搜索..." aria-label = " Search" > </ form> < divclass = " flex-shrink-0 dropdown" > < ahref = " #" class = " d-block link-dark text-decoration-none dropdown-toggle" id = " dropdownUser2" data-bs-toggle = " dropdown" aria-expanded = " false" > < imgsrc = " img/img3.png" alt = " mdo" width = " 32" height = " 32" class = " rounded-circle" > </ a> < ulclass = " dropdown-menu text-small shadow" aria-labelledby = " dropdownUser2" > < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> < li> < hrclass = " dropdown-divider" > </ li> < li> < aclass = " dropdown-item" href = " #" > </ a> </ li> </ ul> </ div> </ div> </ div> </ header> < divclass = " container-fluid pb-3" > < divclass = " d-grid gap-3" style = " grid-template-columns : 1fr 2fr; " > < divclass = " bg-light border rounded-3" > < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> </ div> < divclass = " bg-light border rounded-3" > < br> < br> < br> < br> < br> < br> < br> < br> < br> < br> </ div> </ div> </ div> </ body> </ html>
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> < style>
.bi {
vertical-align : -.125em;
fill : currentColor
}
</ style> </ head> < body> < svgxmlns = " " style = " display : none; " > < symbolid = " bootstrap" viewBox = " 0 0 118 94" > < title> </ title> < pathfill-rule = " evenodd" clip-rule = " evenodd" d = " M24.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> </ svg> < navclass = " py-2 bg-light border-bottom" > < divclass = " container d-flex flex-wrap" > < ulclass = " nav me-auto" > < liclass = " nav-item" > < ahref = " #" class = " nav-link link-dark px-2 active" aria-current = " page" > </ a> </ li> < liclass = " nav-item" > < ahref = " #" class = " nav-link link-dark px-2" > </ a> </ li> < liclass = " nav-item" > < ahref = " #" class = " nav-link link-dark px-2" > </ a> </ li> < liclass = " nav-item" > < ahref = " #" class = " nav-link link-dark px-2" > </ a> </ li> < liclass = " nav-item" > < ahref = " #" class = " nav-link link-dark px-2" > </ a> </ li> </ ul> < ulclass = " nav" > < liclass = " nav-item" > < ahref = " #" class = " nav-link link-dark px-2" > </ a> </ li> < liclass = " nav-item" > < ahref = " #" class = " nav-link link-dark px-2" > </ a> </ li> </ ul> </ div> </ nav> < headerclass = " py-3 mb-4 border-bottom" > < divclass = " container d-flex flex-wrap justify-content-center" > < ahref = " #" class = " d-flex align-items-center mb-3 mb-lg-0 me-lg-auto text-dark text-decoration-none" > < svgclass = " bi me-2" width = " 40" height = " 32" > < usexlink: href= " #bootstrap" /> </ svg> < spanclass = " fs-4" > </ span> </ a> < formclass = " col-12 col-lg-auto mb-3 mb-lg-0" > < inputtype = " search" class = " form-control" placeholder = " 搜索..." aria-label = " Search" > </ form> </ div> </ header> </ body> </ html>
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> </ title> < linkhref = " bootstrap-5.3.2-dist/css/bootstrap.min.css" rel = " stylesheet" > < scriptsrc = " bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js" > </ script> < style>
.bi {
vertical-align : -.125em;
fill : currentColor
}
.text-small {
font-size : 85%
}
</ style> </ head> < body> < svgxmlns = " http://www.w3.org/2000/svg" style = " display : none; " > < symbolid = " bootstrap" viewBox = " 0 0 118 94" > < title> </ title> < pathfill-rule = " evenodd" clip-rule = " evenodd" d = " M24.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> < symbolid = " home" viewBox = " 0 0 16 16" > < pathd = " M8.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" /> </ symbol> < symbolid = " speedometer2" viewBox = " 0 0 16 16" > < pathd = " M8 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" /> < pathfill-rule = " evenodd" d = " M0 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" /> </ symbol> < symbolid = " table" viewBox = " 0 0 16 16" > < pathd = " M0 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" /> </ symbol> < symbolid = " people-circle" viewBox = " 0 0 16 16" > < pathd = " M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" /> < pathfill-rule = " evenodd" d = " M0 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" /> </ symbol> < symbolid = " grid" viewBox = " 0 0 16 16" > < pathd = " M1 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> </ svg> < header> < divclass = " px-3 py-2 bg-dark text-white" > < divclass = " container" > < divclass = " d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start" > < ahref = " /" class = " d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none" > < svgclass = " bi me-2" width = " 40" height = " 32" role = " img" aria-label = " Bootstrap" > < usexlink: href= " #bootstrap" /> </ svg> </ a> < ulclass = " nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small" > < li> < ahref = " #" class = " nav-link text-secondary" > < svgclass = " bi d-block mx-auto mb-1" width = " 24" height = " 24" > < usexlink: href= " #home" /> </ svg> </ a> </ li> < li> < ahref = " #" class = " nav-link text-white" > < svgclass = " bi d-block mx-auto mb-1" width = " 24" height = " 24" > < usexlink: href= " #speedometer2" /> </ svg> </ a> </ li> < li> < ahref = " #" class = " nav-link text-white" > < svgclass = " bi d-block mx-auto mb-1" width = " 24" height = " 24" > < usexlink: href= " #table" /> </ svg> </ a> </ li> < li> < ahref = " #" class = " nav-link text-white" > < svgclass = " bi d-block mx-auto mb-1" width = " 24" height = " 24" > < usexlink: href= " #grid" /> </ svg> </ a> </ li> < li> < ahref = " #" class = " nav-link text-white" > < svgclass = " bi d-block mx-auto mb-1" width = " 24" height = " 24" > < usexlink: href= " #people-circle" /> </ svg> </ a> </ li> </ ul> </ div> </ div> </ div> < divclass = " px-3 py-2 border-bottom mb-3" > < divclass = " container d-flex flex-wrap justify-content-center" > < formclass = " col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto" > < inputtype = " search" class = " form-control" placeholder = " 搜索..." aria-label = " Search" > </ form> < divclass = " text-end" > < buttontype = " button" class = " btn btn-light text-dark me-2" > </ button> < buttontype = " button" class = " btn btn-primary" > </ button> </ div> </ div> </ div> </ header> </ body> </ html>
![[JAVAee]SpringBoot-AOP](https://img-blog.csdnimg.cn/90425924543a410786d19347fcb5ae6c.png)
