Bootstrap
https://v5.bootcss.com/
什么是Bootstrap
Bootstrap 是一款开源的前端响应式框架 ，内置大量美观的样式 、组件 与网格系统 ，不用手写复杂 CSS 和 JS，就能快速搭建适配手机、平板、电脑的整洁、统一、兼容多设备的网页与网站界面。
Bootstrap是由Twitter的MarkOtto和JacobThornton开发的。Bootstrap是2011年八月在GitHub上发布的开源产品。
为什么使用Bootstrap
容易上手
只要对HTML和CSS有基本了解的人都可以很快速的使用Bootstrap。
响应式设计
Bootstrap可以根据不同平台（手机、平板电脑和台式机）进行调整。
移动优先
在Bootstrap中，自适应移动端是框架的核心部分。
浏览器兼容性
Bootstrap5兼容所有主流浏览器（Chrome、Firefox、Edge、Safari和Opera）。如果您需要支持IE11及以下版本，请使用Bootstrap4或Bootstrap3。
主要组件
graph LR
root[前端UI组件体系]
%% 布局模块
A[布局]
A1[Breakpoint 断点]
A2[Container 容器]
A3[Grid 网格]
A4[Typography 文字排版]
%% 页面内容模块
B[页面内容]
B1[Image 图片]
B2[Table 表格]
B3[Figure 画像]
%% 表单模块
C[表单]
C1[Check 选项]
C2[Select 选择]
C3[Input 输入]
C4[Validation 校验]
%% 组件模块
D[组件]
D1[Button 按钮]
D2[Badge 徽章]
D3[Progress 进度条]
D4[Pagination 分页]
D5[Accordion 手风琴]
D6[Alerts 警告框]
D7[Breadcrumb 面包屑导航]
D8[Card 卡片]
D9[Carousel 轮播]
D10[Model 模式对话框]
D11[Dropdown 下拉菜单]
D12[Nav 导航]
%% 层级关系
root --> A
root --> B
root --> C
root --> D
A --> A1
A --> A2
A --> A3
A --> A4
B --> B1
B --> B2
B --> B3
C --> C1
C --> C2
C --> C3
C --> C4
D --> D1
D --> D2
D --> D3
D --> D4
D --> D5
D --> D6
D --> D7
D --> D8
D --> D9
D --> D10
D --> D11
D --> D12
%% 样式定义（对应原图标色）
classDef layout fill:#6f42c1,color:#fff,stroke:#333,stroke-width:1px
classDef content fill:#17a2b8,color:#fff,stroke:#333,stroke-width:1px
classDef form fill:#28a745,color:#fff,stroke:#333,stroke-width:1px
classDef component fill:#fd7e14,color:#fff,stroke:#333,stroke-width:1px
classDef item fill:#f8f9fa,color:#212529,stroke:#333,stroke-width:1px
classDef root fill:#fff,color:#212529,stroke:#333,stroke-width:2px
class A layout
class B content
class C form
class D component
class A1,A2,A3,A4,B1,B2,B3,C1,C2,C3,C4,D1,D2,D3,D4,D5,D6,D7,D8,D9,D10,D11,D12 item
class root root
Bootstrap5安装使用
https://getbootstrap.com/
经过编译的CSS和JS
https://github.com/twbs/bootstrap/releases/download/v5.2.3/bootstrap-5.2.3-dist.zip
源文件
https://github.com/twbs/bootstrap/archive/v5.2.3.zip
使用jsDelivr免费CDN
< link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel = "stylesheet" >
< script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js ></ script >
包管理器
HelloWorld!
效果
源代码
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Bootstrap demo</ title >
<!-- 引入CSS -->
< link href = "bootstrap-5.2.3-dist/css/bootstrap.min.css" rel = "stylesheet" >
</ head >
< body >
< h1 > Hello, world!</ h1 >
<!-- 引入JS -->
< script src = "bootstrap-5.2.3-dist/js/bootstrap.min.js" ></ script >
</ body >
</ html >
断点(Breakpoints)
Bootstrap断点 是框架预设的屏幕宽度临界值，采用移动优先的最小宽度适配规则，划分出xs、sm、md、lg、xl、xxl六个档位，浏览器窗口宽度达到对应阈值时，网页布局、栅格结构与组件样式就会自动调整，实现不同设备的响应式适配。
核心概念
断点是响应式设计的基石。
使用它们来控制何时可以在特定视口或设备大小下调整布局。
使用媒体查询通过断点构建CSS。
媒体查询是CSS的一项功能，允许您根据一组浏览器和操作系统参数有条件地应用样式。我们在媒体查询中最常用的是最小宽度。
移动第一，响应式设计是目标。
Bootstrap的CSS旨在应用最小的样式，使布局在最小的断点处工作，然后对样式进行分层，以调整更大设备的设计。这优化了CSS，缩短了渲染时间，并为访问者提供了良好的体验。
常见类
分类
屏幕尺寸说明
像素阈值（≥）
断点缩写
常用搭配类名示例
超小屏
手机竖屏
无（基础col-直接生效）
无
.col-6、.d-none
小屏
手机横屏/小平板
576px
sm
.col-sm-4、.d-sm-block、.text-sm-center
中屏
平板/小笔记本
768px
md
.col-md-6、.offset-md-3、.hidden-md
大屏
常规电脑显示器
992px
lg
.col-lg-3、.justify-content-lg-center
超大屏
大屏桌面显示器
1200px
xl
.col-xl-2、.container-xl
特大屏
超宽高清大屏
1400px
xxl
.col-xxl-1、.container-xxl
容器(Container)
容器 是页面最外层的响应式包裹盒子 ，会自动居中、控制宽度、加内边距，是所有布局必须用的基础，让页面在手机、电脑上都整齐不乱。
常见类器
分类
说明
常用CSS类名
固定响应容器
居中显示、随屏幕断点变宽，左右留白，标准页面主体容器
.container
全屏通栏容器
撑满浏览器整宽，无左右边距，适合banner、通栏区块
.container-fluid
断点定制容器
在指定屏幕尺寸下才转为固定宽度，灵活适配布局
.container-sm、.container-md、.container-lg、.container-xl、.container-xxl
内边距辅助
给容器增减上下/左右内边距，防止内容贴边
.p-*、.px-*、.py-*（如px-3、py-4）
外边距居中
容器额外水平居中、上下留白
.mx-auto、.my-*
效果
源代码
< div class = "container-sm border" > .container-sm</ div >
< div class = "container-md mt-3 border" > .container-md</ div >
< div class = "container-lg mt-3 border" > .container-lg</ div >
< div class = "container-xl mt-3 border" > .container-xl</ div >
< div class = "container-xxl mt-3 border" > .container-xxl</ div >
< script src = "bootstrap-5.2.3-dist/js/bootstrap.min.js" ></ script >
</ body >
</ html >
源代码
container.html <!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Bootstrap demo</ title >
< link href = "bootstrap-5.2.3-dist/css/bootstrap.min.css" rel = "stylesheet" >
</ head >
< body >
< div class = "container pt-3" >
< h1 > 响应式容器</ h1 >
< p > 重置浏览器大小查看效果.</ p >
</ div >
< div class = "container-sm border" > .container-sm</ div >
< div class = "container-md mt-3 border" > .container-md</ div >
< div class = "container-lg mt-3 border" > .container-lg</ div >
< div class = "container-xl mt-3 border" > .container-xl</ div >
< div class = "container-xxl mt-3 border" > .container-xxl</ div >
< script src = "bootstrap-5.2.3-dist/js/bootstrap.min.js" ></ script >
</ body >
</ html >
网格(Grid)
网格 是一套标准化响应式布局系统 ，靠容器、行、列 三层结构搭配断点划分屏幕，自动把页面切分成均等12栏；能灵活自由拆分内容区块，随手机、平板、电脑屏幕自动变宽变窄，轻松实现多设备自适应排版。
常见类
分类
说明
常用CSS类名
容器容器
固定/自适应包裹，固定居中版+全屏版
.container（固定宽度居中）、.container-fluid（全屏通栏）
行（row）
包裹列，实现布局对齐、消除边距
.row（必须配合列使用，是网格核心行）
基础列等分
平均划分12栅格，快速均分宽度
.col-1~.col-12（移动端默认生效）
响应式断点（适配）
按手机、平板、电脑自动切换宽度
断点：sm(≥576px)、md(≥768px)、lg(≥992px)、xl(≥1200px).col-md-6、.col-lg-4
自动均分列
自动等分一行剩余宽度，无需算12
.col（自适应均分）
列偏移
向右空出栅格，实现留白居中
.offset-*、.offset-md-*（如.offset-md-3）
列排序
调整移动端/桌面端前后顺序
.order-1~.order-12、.order-md-first/.order-md-last
列对齐（垂直）
整行内容上下居中/底部/顶部
行：.align-items-start、.align-items-center、.align-items-end
单独列垂直对齐
单独控制某一列上下位置
列：.align-self-start、.align-self-center、.align-self-end
水平对齐
整行列左/中/右、两端分布
.justify-content-start、.justify-content-center、.justify-content-end、.justify-content-between
禁止换行
一行强制不自动换行挤压显示
.flex-nowrap（搭配row使用）
等高等宽
多行卡片等高、统一拉伸
.h-100、.flex-grow-1
网格系统规则
网格每一行需要放在设置了.container(固定宽度)或.container-fluid(全屏宽度)类的容器中。
使用行来创建水平的列组。
内容需要放置在列中，并且只有列可以是行的直接子节点。
预定义的类如.row和.col-sm-4可用于快速制作网格布局。
列通过填充创建列内容之间的间隙。
网格列是通过跨越指定的12个列来创建。
Bootstrap5和Bootstrap4使用flexbox（弹性盒子）而不是浮动。
效果
源代码
< div class = "row" >
< div class = "col p-3 bg-primary text-white" > .col</ div >
< div class = "col p-3 bg-dark text-white" > .col</ div >
< div class = "col p-3 bg-primary text-white" > .col</ div >
</ div >
源代码
grid.html <!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Bootstrap demo</ title >
< link href = "bootstrap-5.2.3-dist/css/bootstrap.min.css" rel = "stylesheet" >
</ head >
< body >
< div class = "container-fluid mt-3" >
< h1 > 创建相等宽度的列</ h1 >
< p > 创建三个相等宽度的列! 尝试在class="row"的div中添加新的class="col" div, 会显示四个等宽的列。</ p >
< div class = "row" >
< div class = "col p-3 bg-primary text-white" > .col</ div >
< div class = "col p-3 bg-dark text-white" > .col</ div >
< div class = "col p-3 bg-primary text-white" > .col</ div >
</ div >
</ div >
< script src = "bootstrap-5.2.3-dist/js/bootstrap.min.js" ></ script >
</ body >
</ html >
文字排版(Typography)
Bootstrap框架自带的统一文字排版样式 规范，预设了标题、正文、引用、对齐、颜色等默认字体与间距，不用手写CSS，就能快速统一网页所有文字的大小、层级和排版，适配不同屏幕，让文本整洁美观。
Bootstrap5默认的font-size为16px,line-height为1.5。默认的font-family为"HelveticaNeue"，Helvetica,Arial,sans-serif。此外，所有的<p>元素margin-top:0、margin-bottom:1rem(16px)。
常见类
分类
说明
常用CSS类名
标题样式
统一h1~h6标题层级、加大加粗规范
h1 h2 h3 h4 h5 h6
副标题/小字
弱化副标题、辅助小字说明
display-1~6超大标题、small小号文本
段落文本
基础段落间距、正文规范排版
lead突出强调段落
文本对齐
文字左/中/右、两端对齐
text-start、text-center、text-end、text-justify
文字加粗
粗体、常规、细体字重控制
fw-bold粗体、fw-normal常规、fw-light细体
斜体文本
文字设置斜体效果
fst-italic斜体、fst-normal取消斜体
行高间距
控制文字行高紧凑/宽松
lh-1紧凑、lh-sm偏小、lh-base默认、lh-lg加大
文字颜色
主题文字高亮/警示色
text-primary/success/danger/warning/muted淡灰
文本大小写
转大写、小写、首字母大写
text-uppercase、text-lowercase、text-capitalize
删除/高亮
划线删除、背景高亮标记
text-decoration-line-through删除线、mark标签高亮
文字隐藏
超出文字省略多行打点
text-truncate文本超长省略
效果
源代码
< h1 > h1. Bootstrap heading</ h1 >
< h2 > h2. Bootstrap heading</ h2 >
< h3 > h3. Bootstrap heading</ h3 >
< h4 > h4. Bootstrap heading</ h4 >
< h5 > h5. Bootstrap heading</ h5 >
< h6 > h6. Bootstrap heading</ h6 >
源代码
typography.html <!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Bootstrap demo</ title >
< link href = "bootstrap-5.2.3-dist/css/bootstrap.min.css" rel = "stylesheet" >
</ head >
< body >
< h1 > h1. Bootstrap heading</ h1 >
< h2 > h2. Bootstrap heading</ h2 >
< h3 > h3. Bootstrap heading</ h3 >
< h4 > h4. Bootstrap heading</ h4 >
< h5 > h5. Bootstrap heading</ h5 >
< h6 > h6. Bootstrap heading</ h6 >
< script src = "bootstrap-5.2.3-dist/js/bootstrap.min.js" ></ script >
</ body >
</ html >
图片(Images)
Bootstrap内置图片样式工具 ，能让图片自动自适应容器、按比例缩放不溢出，还支持快速加圆角、缩略图、居中对齐等效果，轻松实现图片在手机和电脑端都适配美观。
常见类
分类
说明
常用CSS类名
自适应图片
图片自动适配容器、按比例缩放、不会撑破布局
img-fluid
圆角样式
给图片添加圆角效果
rounded、rounded-top、rounded-bottom、rounded-start、rounded-end、rounded-circle（圆形）
缩略图样式
自带边框的精美缩略图展示效果
img-thumbnail
浮动对齐
让图片靠左/靠右浮动排版
float-start、float-end
居中显示
在块级容器内让图片水平居中
搭配 d-block mx-auto
响应式图文
搭配图片做图文配图、轻量化展示
figure、figure-img、figure-caption
效果
源代码
< div class = "row" >
< div class = "col" >
< img src = "./img/bootstrap-logo-shadow.png" class = "img-thumbnail" alt = "..." >
</ div >
< div class = "col" >
< img src = "./img/bootstrap-logo-shadow.png" class = "img-thumbnail" alt = "..." >
</ div >
< div class = "col" >
< img src = "./img/bootstrap-logo-shadow.png" class = "img-thumbnail" alt = "..." >
</ div >
</ div >
源代码
img.html <!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Bootstrap demo</ title >
< link href = "bootstrap-5.2.3-dist/css/bootstrap.min.css" rel = "stylesheet" >
</ head >
< body >
< div class = "container mt-3" >
< div class = "row" >
< div class = "col" >
< img src = "./img/bootstrap-logo-shadow.png" class = "img-thumbnail" alt = "..." >
</ div >
< div class = "col" >
< img src = "./img/bootstrap-logo-shadow.png" class = "img-thumbnail" alt = "..." >
</ div >
< div class = "col" >
< img src = "./img/bootstrap-logo-shadow.png" class = "img-thumbnail" alt = "..." >
</ div >
</ div >
</ div >
< script src = "bootstrap-5.2.3-dist/js/bootstrap.min.js" ></ script >
</ body >
</ html >
表格(Table)
Bootstrap封装了标准化表格样式 ，能快速美化原生表格，自带隔行变色、边框、hover高亮效果，还支持响应式横向滚动适配小屏，让表格整洁统一、多设备清晰易读。
常见类
分类
说明
常用CSS类名
基础表格
给原生表格加基础边框、间距、统一样式
table
条纹表格
隔行变色，方便区分每行数据
table-striped
边框表格
给表格所有单元格添加完整边框
table-bordered
悬浮高亮
鼠标悬停行时自动高亮变色
table-hover
精简紧凑
缩小单元格内边距，表格更紧凑
table-sm
深色主题
表格底色变黑，文字反白显示
table-dark
表头配色
设置表头自定义背景色（深浅/主题色）
thead-dark、thead-light
情境状态行
给单行/单元格加成功、危险、警告等提示色
table-success、table-danger、table-warning、table-info、table-active、table-primary、table-secondary、table-light、table-dark
响应式表格
小屏幕自动横向滚动，防止表格挤乱
table-responsive、table-responsive-sm/md/lg/xl（按断点适配）
效果
源代码
< table class = "table" >
< thead class = "table-dark" >
< tr >
< td > 列1</ td >
< td > 列2</ td >
< td > 列3</ td >
</ tr >
</ thead >
< tbody >
< tr >
< td > 行1列1</ td >
< td > 行1列2</ td >
< td > 行1列3</ td >
</ tr >
< tr >
< td > 行2列1</ td >
< td > 行2列2</ td >
< td > 行2列3</ td >
</ tr >
< tr >
< td > 行3列1</ td >
< td > 行3列2</ td >
< td > 行3列3</ td >
</ tr >
</ tbody >
</ table >
源代码
table.html <!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Bootstrap demo</ title >
< link href = "bootstrap-5.2.3-dist/css/bootstrap.min.css" rel = "stylesheet" >
</ head >
< body >
< table class = "table" >
< thead class = "table-dark" >
< tr >
< td > 列1</ td >
< td > 列2</ td >
< td > 列3</ td >
</ tr >
</ thead >
< tbody >
< tr >
< td > 行1列1</ td >
< td > 行1列2</ td >
< td > 行1列3</ td >
</ tr >
< tr >
< td > 行2列1</ td >
< td > 行2列2</ td >
< td > 行2列3</ td >
</ tr >
< tr >
< td > 行3列1</ td >
< td > 行3列2</ td >
< td > 行3列3</ td >
</ tr >
</ tbody >
</ table >
< script src = "bootstrap-5.2.3-dist/js/bootstrap.min.js" ></ script >
</ body >
</ html >
Bootstrap封装了表单组件与样式 体系，统一美化输入框、单选多选、下拉框等控件，自带对齐、间距与校验状态样式，还能适配响应式布局，快速搭建整洁规范、兼容多设备的交互表单。
常见类
分类
说明
常用CSS类名
基础输入框
统一美化单行/多行输入、下拉选项
form-control（input/select/textarea）
文本域
多行文本输入框统一样式
form-control（适配textarea）
单选/复选（默认）
基础单选、多选框布局对齐
form-check、form-check-input、form-check-label
开关切换
圆角滑动开关（美化复选）
form-switch
表单布局-垂直
默认竖向堆叠表单
默认无需额外布局类，直接套form-control即可
表单布局-水平
标签+输入框左右并排对齐
row+col-*-*栅格搭配表单使用
表单布局-内联
多控件同行紧凑排列
form-inline（旧版，新版用栅格flex实现）
输入组组件
输入框前后加文字/按钮/图标
input-group、input-group-prepend、input-group-append、input-group-text
尺寸控制
放大/缩小输入控件
form-control-lg（大号）、form-control-sm（小号）
校验状态
标红/标绿提示正误
is-valid（通过）、is-invalid（错误），搭配valid-feedback/invalid-feedback
提示文案
显示校验/补充说明文字
form-text（普通说明）、valid-feedback、invalid-feedback
文件上传
美化原生上传控件
form-control-file（旧）/自定义表单file
范围滑块
美化原生滑动取值条
form-range
效果
源代码
< form action = "" class = "was-validated" >
< div class = "form-group" >
< label for = "uname" > Username:</ label >
< input type = "text" class = "form-control" id = "uname" placeholder = "Enter username" name = "uname" required >
< div class = "valid-feedback" > 验证成功！</ div >
< div class = "invalid-feedback" > 请输入用户名！</ div >
</ div >
< div class = "form-group" >
< label for = "pwd" > Password:</ label >
< input type = "password" class = "form-control" id = "pwd" placeholder = "Enter password" name = "pswd" required >
< div class = "valid-feedback" > 验证成功！</ div >
< div class = "invalid-feedback" > 请输入密码！</ div >
</ div >
< div class = "form-group form-check" >
< label class = "form-check-label" >
< input class = "form-check-input" type = "checkbox" name = "remember" required > 同意协议
< div class = "valid-feedback" > 验证成功！</ div >
< div class = "invalid-feedback" > 同意协议才能提交。</ div >
</ label >
</ div >
< button type = "submit" class = "btn btn-primary" > 提交</ button >
</ form >
源代码
form.html <!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Bootstrap demo</ title >
< link href = "bootstrap-5.2.3-dist/css/bootstrap.min.css" rel = "stylesheet" >
</ head >
< body >
< form action = "" class = "was-validated" >
< div class = "form-group" >
< label for = "uname" > Username:</ label >
< input type = "text" class = "form-control" id = "uname" placeholder = "Enter username" name = "uname" required >
< div class = "valid-feedback" > 验证成功！</ div >
< div class = "invalid-feedback" > 请输入用户名！</ div >
</ div >
< div class = "form-group" >
< label for = "pwd" > Password:</ label >
< input type = "password" class = "form-control" id = "pwd" placeholder = "Enter password" name = "pswd" required >
< div class = "valid-feedback" > 验证成功！</ div >
< div class = "invalid-feedback" > 请输入密码！</ div >
</ div >
< div class = "form-group form-check" >
< label class = "form-check-label" >
< input class = "form-check-input" type = "checkbox" name = "remember" required > 同意协议
< div class = "valid-feedback" > 验证成功！</ div >
< div class = "invalid-feedback" > 同意协议才能提交。</ div >
</ label >
</ div >
< button type = "submit" class = "btn btn-primary" > 提交</ button >
</ form >
< script src = "bootstrap-5.2.3-dist/js/bootstrap.min.js" ></ script >
</ body >
</ html >
Bootstrap封装了标准化交互按钮组件 ，自带多种主题配色、尺寸样式与hover点击动效，支持禁用、圆角、轮廓等状态，可自适应页面布局，快速做出美观统一、兼容多设备的可点击按钮。
常见类
分类
说明
常用CSS类名
基础按钮
定义标准按钮样式基底
btn
主题颜色按钮
不同功能配色（主色、成功、警告、危险等）
btn-primary、btn-secondary、btn-success、btn-danger、btn-warning、btn-info、btn-light、btn-dark、btn-link
镂空描边按钮
只有边框无填充底色
btn-outline-primary、btn-outline-success、btn-outline-danger（全系outline）
按钮尺寸
控制按钮大小
btn-lg大号、btn-sm小号
块级按钮
按钮独占整行宽度
btn-block
激活状态
按钮保持按下高亮效果
active
禁用状态
置灰不可点击
disabled
按钮组容器
多个按钮合并成一组、无缝排列
btn-group
垂直按钮组
按钮组竖向排列
btn-group-vertical
效果
源代码
< button type = "button" class = "btn btn-primary" > Primary</ button >
< button type = "button" class = "btn btn-secondary" > Secondary</ button >
< button type = "button" class = "btn btn-success" > Success</ button >
< button type = "button" class = "btn btn-danger" > Danger</ button >
< button type = "button" class = "btn btn-warning" > Warning</ button >
< button type = "button" class = "btn btn-info" > Info</ button >
< button type = "button" class = "btn btn-light" > Light</ button >
< button type = "button" class = "btn btn-dark" > Dark</ button >
< button type = "button" class = "btn btn-link" > Link</ button >
源代码
button.html <!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Bootstrap demo</ title >
< link href = "bootstrap-5.2.3-dist/css/bootstrap.min.css" rel = "stylesheet" >
</ head >
< body >
< button type = "button" class = "btn btn-primary" > Primary</ button >
< button type = "button" class = "btn btn-secondary" > Secondary</ button >
< button type = "button" class = "btn btn-success" > Success</ button >
< button type = "button" class = "btn btn-danger" > Danger</ button >
< button type = "button" class = "btn btn-warning" > Warning</ button >
< button type = "button" class = "btn btn-info" > Info</ button >
< button type = "button" class = "btn btn-light" > Light</ button >
< button type = "button" class = "btn btn-dark" > Dark</ button >
< button type = "button" class = "btn btn-link" > Link</ button >
< script src = "bootstrap-5.2.3-dist/js/bootstrap.min.js" ></ script >
</ body >
</ html >
徽章(Badges)
徽章 是小巧的标签提示组件，用来标注数量、状态、分类或消息角标，自带配色与圆角样式，能贴在文字、按钮旁醒目展示信息，轻量化突出关键提醒内容。只需要将 .badge 类加上带有指定意义的颜色类 (如 .bg-secondary) 添加到 元素上即可。
常见类
分类
说明
常用CSS类名
基础徽章
默认小圆角文字角标基础样式
badge
主题配色徽章
不同场景颜色标识
bg-primary、bg-secondary、bg-success、bg-danger、bg-warning、bg-info、bg-light、bg-dark
胶囊徽章
两端全圆润圆角（圆角更大）
rounded-pill
数字角标（气泡）
右上角定位小红点/数字提醒
badge + 定位工具类搭配使用
效果
源代码
< span class = "badge rounded-pill bg-default" > 默认</ span >
< span class = "badge rounded-pill bg-primary" > 主要</ span >
< span class = "badge rounded-pill bg-success" > 成功</ span >
< span class = "badge rounded-pill bg-info" > 信息</ span >
< span class = "badge rounded-pill bg-warning" > 警告</ span >
< span class = "badge rounded-pill bg-danger" > 危险</ span >
源代码
badge.html <!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Bootstrap demo</ title >
< link href = "bootstrap-5.2.3-dist/css/bootstrap.min.css" rel = "stylesheet" >
</ head >
< body >
< div class = "container mt-3" >
< h2 > 药丸形状徽章</ h2 >
< span class = "badge rounded-pill bg-default" > 默认</ span >
< span class = "badge rounded-pill bg-primary" > 主要</ span >
< span class = "badge rounded-pill bg-success" > 成功</ span >
< span class = "badge rounded-pill bg-info" > 信息</ span >
< span class = "badge rounded-pill bg-warning" > 警告</ span >
< span class = "badge rounded-pill bg-danger" > 危险</ span >
</ div >
< script src = "bootstrap-5.2.3-dist/js/bootstrap.min.js" ></ script >
</ body >
</ html >
进度条(Progress)
进度条 是可视化展示任务进度的组件，自带底色、填充色块与百分比标注，支持分层、变色和动画效果，能直观反馈加载、上传、流程完成度等实时状态。
创建一个基本的进度条的步骤如下：
常见类
分类
说明
常用CSS类名
基础进度条
进度条外层容器
progress
进度条主体
显示实际进度的填充条
progress-bar
背景色进度条
不同状态颜色
bg-primary、bg-success、bg-info、bg-warning、bg-danger
条纹进度条
带条纹样式
progress-bar-striped
动画进度条
条纹滚动动画
progress-bar-animated
多段进度条
一段进度条显示多个进度
多个 progress-bar 放在同一个 progress 内
效果
源代码
< div class = "progress" >
< div class = "progress-bar" style = "width:30%" ></ div >
</ div >
< div class = "progress" >
< div class = "progress-bar bg-success" style = "width:40%" ></ div >
</ div >
< div class = "progress" >
< div class = "progress-bar bg-info" style = "width:50%" ></ div >
</ div >
< div class = "progress" >
< div class = "progress-bar bg-warning" style = "width:60%" ></ div >
</ div >
< div class = "progress" >
< div class = "progress-bar bg-danger" style = "width:70%" ></ div >
</ div >
源代码
progress.html <!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Bootstrap demo</ title >
< link href = "bootstrap-5.2.3-dist/css/bootstrap.min.css" rel = "stylesheet" >
</ head >
< body >
< div class = "container mt-3" >
< h2 > 多种颜色的进度条</ h2 >
< p > Bootstrap5 提供了以下几种进度条颜色:</ p >
< div class = "progress" >
< div class = "progress-bar" style = "width:30%" ></ div >
</ div >
< div class = "progress" >
< div class = "progress-bar bg-success" style = "width:40%" ></ div >
</ div >
< div class = "progress" >
< div class = "progress-bar bg-info" style = "width:50%" ></ div >
</ div >
< div class = "progress" >
< div class = "progress-bar bg-warning" style = "width:60%" ></ div >
</ div >
< div class = "progress" >
< div class = "progress-bar bg-danger" style = "width:70%" ></ div >
</ div >
</ div >
< script src = "bootstrap-5.2.3-dist/js/bootstrap.min.js" ></ script >
</ body >
</ html >
分页 是标准化的页码导航组件，用来实现多页内容的翻页跳转，自带规整样式、选中与禁用状态，适配移动端，能快速做出简洁统一的页面切换导航栏。
要创建一个基本的分页可以在<ul>元素上添加.pagination类。然后在
元素上添加.page-item类，<li>元素的<a>标签上添加.page-link类
常见类
分类
说明
常用CSS类名
分页容器
包裹整个分页列表，统一布局
pagination
分页子项
分页里单个页码、箭头选项
page-item
分页链接
页码可点击跳转区域
page-link
激活当前页
标记正在浏览的页码
active
禁用页码
无法点击的上一页/下一页
disabled
分页尺寸
放大或缩小整体分页组件
pagination-lg、pagination-sm
对齐方式
分页整体居左、居中、居右
justify-content-center、justify-content-end
效果
源代码
< ul class = "pagination" >
< li class = "page-item" >< a class = "page-link" href = "#" > Previous</ a ></ li >
< li class = "page-item" >< a class = "page-link" href = "#" > 1</ a ></ li >
< li class = "page-item" >< a class = "page-link" href = "#" > 2</ a ></ li >
< li class = "page-item" >< a class = "page-link" href = "#" > 3</ a ></ li >
< li class = "page-item" >< a class = "page-link" href = "#" > Next</ a ></ li >
</ ul >
源代码
pagination.html <!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Bootstrap demo</ title >
< link href = "bootstrap-5.2.3-dist/css/bootstrap.min.css" rel = "stylesheet" >
</ head >
< body >
< div class = "container mt-3" >
< h2 > 分页</ h2 >
< p > 要创建一个基本的分页可以在 ul 元素上添加 .pagination 类。然后在 li 元素上添加 .page-item 类：</ p >
< ul class = "pagination" >
< li class = "page-item" >< a class = "page-link" href = "#" > Previous</ a ></ li >
< li class = "page-item" >< a class = "page-link" href = "#" > 1</ a ></ li >
< li class = "page-item" >< a class = "page-link" href = "#" > 2</ a ></ li >
< li class = "page-item" >< a class = "page-link" href = "#" > 3</ a ></ li >
< li class = "page-item" >< a class = "page-link" href = "#" > Next</ a ></ li >
</ ul >
</ div >
< script src = "bootstrap-5.2.3-dist/js/bootstrap.min.js" ></ script >
</ body >
</ html >
手风琴(Accordion)
手风琴 是可折叠收纳的面板组件，能实现点击展开、收起内容区块，支持互斥只显示一个面板，节省页面空间，清晰归类展示详情信息。
结合Collapse JavaScript插件可构建垂直折叠手风琴。
常见类
分类
说明
常用CSS类名
手风琴容器
包裹整个手风琴模块，实现统一折叠联动
accordion
单项卡片容器
手风琴每一个独立内容项
accordion-item
标题触发按钮
点击展开/收起的头部按钮
accordion-header、accordion-button
收缩内容容器
存放展开后的正文内容
accordion-collapse
展示内容区域
每个模块的正文排版区域
accordion-body
默认展开状态
让某一项默认直接展开显示
show
收起图标样式
自带下拉箭头切换样式（内置）
搭配原生accordion-button自动生成
效果
源代码
< div class = "accordion" id = "accordionExample" >
< div class = "accordion-item" >
< h2 class = "accordion-header" id = "headingOne" >
< button class = "accordion-button" type = "button" data-bs-toggle = "collapse" data-bs-target = "#collapseOne"
aria-expanded = "true" aria-controls = "collapseOne" >
</ button >
</ h2 >
< div id = "collapseOne" class = "accordion-collapse collapse show" aria-labelledby = "headingOne"
data-bs-parent = "#accordionExample" >
< div class = "accordion-body" >
< strong > This is the first item's accordion body.</ strong >
</ div >
</ div >
< div id = "collapseOne" class = "accordion-collapse collapse show" aria-labelledby = "headingOne"
data-bs-parent = "#accordionExample" >
< div class = "accordion-body" >
< strong > This is the second item's accordion body.</ strong >
</ div >
</ div >
</ div >
</ div >
源代码
accordion.html <!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Bootstrap demo</ title >
< link href = "bootstrap-5.2.3-dist/css/bootstrap.min.css" rel = "stylesheet" >
</ head >
< body >
< div class = "accordion" id = "accordionExample" >
< div class = "accordion-item" >
< h2 class = "accordion-header" id = "headingOne" >
< button class = "accordion-button" type = "button" data-bs-toggle = "collapse" data-bs-target = "#collapseOne"
aria-expanded = "true" aria-controls = "collapseOne" >
</ button >
</ h2 >
< div id = "collapseOne" class = "accordion-collapse collapse show" aria-labelledby = "headingOne"
data-bs-parent = "#accordionExample" >
< div class = "accordion-body" >
< strong > This is the first item's accordion body.</ strong >
</ div >
</ div >
< div id = "collapseOne" class = "accordion-collapse collapse show" aria-labelledby = "headingOne"
data-bs-parent = "#accordionExample" >
< div class = "accordion-body" >
< strong > This is the second item's accordion body.</ strong >
</ div >
</ div >
</ div >
</ div >
< script src = "bootstrap-5.2.3-dist/js/bootstrap.min.js" ></ script >
</ body >
</ html >
警告框(Alert)
警告框 是醒目提示信息的弹窗组件，自带成功、错误、警告等配色，可快速展示通知与反馈，还支持一键关闭，清晰直观提醒用户各类状态消息。
常见类
分类
说明
常用CSS类名
基础容器
警告框整体外层样式
alert
主题配色
不同场景的颜色提示
alert-primary、alert-success、alert-danger、alert-warning、alert-info、alert-light、alert-dark
可关闭弹窗
支持点击叉号关闭警告框
alert-dismissible
关闭按钮
右上角关闭叉号搭配使用
btn-close
强调链接
在警告框内搭配高亮文字链接
alert-link
效果
源代码
< div class = "alert alert-primary" role = "alert" >
</ div >
< div class = "alert alert-secondary" role = "alert" >
</ div >
< div class = "alert alert-success" role = "alert" >
</ div >
< div class = "alert alert-danger" role = "alert" >
</ div >
< div class = "alert alert-warning" role = "alert" >
</ div >
< div class = "alert alert-info" role = "alert" >
</ div >
< div class = "alert alert-light" role = "alert" >
</ div >
< div class = "alert alert-dark" role = "alert" >
</ div >
源代码
alert.html <!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Bootstrap demo</ title >
< link href = "bootstrap-5.2.3-dist/css/bootstrap.min.css" rel = "stylesheet" >
</ head >
< body >
< div class = "alert alert-primary" role = "alert" >
</ div >
< div class = "alert alert-secondary" role = "alert" >
</ div >
< div class = "alert alert-success" role = "alert" >
</ div >
< div class = "alert alert-danger" role = "alert" >
</ div >
< div class = "alert alert-warning" role = "alert" >
</ div >
< div class = "alert alert-info" role = "alert" >
</ div >
< div class = "alert alert-light" role = "alert" >
</ div >
< div class = "alert alert-dark" role = "alert" >
</ div >
< script src = "bootstrap-5.2.3-dist/js/bootstrap.min.js" ></ script >
</ body >
</ html >
面包屑导航(Breadcrumb)
面包屑导航 是层级路径指引组件，清晰展示当前页面在整个网站的位置与上级目录，样式简洁规整，方便用户回看、跳转上级页面，优化浏览导航体验。
常见类
分类
说明
常用CSS类名
面包屑容器
包裹整个面包屑导航
breadcrumb
面包屑项
单个导航条目
breadcrumb-item
当前页
标记当前所在页面
active
分隔符
自动生成路径分隔符号
内置样式，无需额外类名
效果
源代码
< nav style = "--bs-breadcrumb-divider: '>';" aria-label = "breadcrumb" >
< ol class = "breadcrumb" >
< li class = "breadcrumb-item" >< a href = "#" > Home</ a ></ li >
< li class = "breadcrumb-item active" aria-current = "page" > Library</ li >
</ ol >
</ nav >
源代码
breadcrum.html <!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Bootstrap demo</ title >
< link href = "bootstrap-5.2.3-dist/css/bootstrap.min.css" rel = "stylesheet" >
</ head >
< body >
< nav style = "--bs-breadcrumb-divider: '>';" aria-label = "breadcrumb" >
< ol class = "breadcrumb" >
< li class = "breadcrumb-item" >< a href = "#" > Home</ a ></ li >
< li class = "breadcrumb-item active" aria-current = "page" > Library</ li >
</ ol >
</ nav >
< script src = "bootstrap-5.2.3-dist/js/bootstrap.min.js" ></ script >
</ body >
</ html >
卡片(Cards)
卡片 是灵活独立的内容容器，可自由搭配图片、文字、按钮等元素，自带统一圆角、阴影与间距样式，能自适应屏幕断点，快速搭建整洁模块化的图文展示区块。
常见类
分类
说明
常用CSS类名
基础卡片容器
卡片最外层包裹
card
卡片头部
卡片顶部标题区域
card-header
卡片主体
卡片正文内容区域
card-body
卡片标题
卡片内标题文字
card-title
卡片文本
卡片内段落文字
card-text
卡片链接
卡片内按钮/链接
card-link
卡片图片
卡片顶部/底部图片
card-img-top、card-img-bottom
图片覆盖层
文字覆盖在图片上
card-img-overlay
卡片底部
卡片底部区域
card-footer
卡片布局
卡片分组/列/网格
card-group、card-deck、card-columns
效果
源代码
< div class = "card" >
< div class = "card-body" >
< h4 class = "card-title" > Card title</ h4 >
< p class = "card-text" > Some example text. Some example text.</ p >
< a href = "#" class = "card-link" > Card link</ a >
< a href = "#" class = "card-link" > Another link</ a >
</ div >
</ div >
源代码
card.html <!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Bootstrap demo</ title >
< link href = "bootstrap-5.2.3-dist/css/bootstrap.min.css" rel = "stylesheet" >
</ head >
< body >
< div class = "container mt-3" >
< h2 > 标题、文本和链接</ h2 >
< div class = "card" >
< div class = "card-body" >
< h4 class = "card-title" > Card title</ h4 >
< p class = "card-text" > Some example text. Some example text.</ p >
< a href = "#" class = "card-link" > Card link</ a >
< a href = "#" class = "card-link" > Another link</ a >
</ div >
</ div >
</ div >
< script src = "bootstrap-5.2.3-dist/js/bootstrap.min.js" ></ script >
</ body >
</ html >
轮播(Carousel)
轮播 是自动或手动切换的图片滑动组件，支持左右箭头切换、小圆点指示器与自动播放，能循环展示多张图文内容，常用于首页banner、产品展示，适配移动端实现流畅的幻灯效果。
常见类
分类
说明
常用CSS类名
轮播容器
包裹整个轮播组件
carousel
轮播滑动动画
开启平滑过渡效果
slide
图片包裹层
包含所有轮播项
carousel-inner
单个轮播项
每一张轮播图片/内容
carousel-item
默认显示项
初始化展示的轮播项
active
轮播图片
轮播内图片
d-block w-100
图片标题区域
轮播图片上的文字说明
carousel-caption
左侧切换按钮
上一张控制按钮
carousel-control-prev
右侧切换按钮
下一张控制按钮
carousel-control-next
指示点容器
轮播底部小圆点
carousel-indicators
效果
源代码
< div id = "carousel" class = "carousel slide" data-bs-ride = "carousel" >
< div class = "carousel-inner" >
< div class = "carousel-item active" >
< img src = "./img/bootstrap-logo-shadow.png" class = "d-block w-100" alt = "..." >
</ div >
< div class = "carousel-item" >
< img src = "./img/bootstrap-logo-shadow.png" class = "d-block w-100" alt = "..." >
</ div >
< div class = "carousel-item" >
< img src = "./img/bootstrap-logo-shadow.png" class = "d-block w-100" alt = "..." >
</ div >
</ div >
< button class = "carousel-control-prev" type = "button" data-bs-target = "#carousel" data-bs-slide = "prev" >
< span class = "carousel-control-prev-icon" aria-hidden = "true" ></ span >
< span class = "visually-hidden" > Previous</ span >
</ button >
< button class = "carousel-control-next" type = "button" data-bs-target = "#carousel" data-bs-slide = "next" >
< span class = "carousel-control-next-icon" aria-hidden = "true" ></ span >
< span class = "visually-hidden" > Next</ span >
</ button >
</ div >
源代码
carousel.html <!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Bootstrap demo</ title >
< link href = "bootstrap-5.2.3-dist/css/bootstrap.min.css" rel = "stylesheet" >
</ head >
< body >
< div class = "container-fluid mt-3" >
< div id = "carousel" class = "carousel slide" data-bs-ride = "carousel" >
< div class = "carousel-inner" >
< div class = "carousel-item active" >
< img src = "./img/bootstrap-logo-shadow.png" class = "d-block w-100" alt = "..." >
</ div >
< div class = "carousel-item" >
< img src = "./img/bootstrap-logo-shadow.png" class = "d-block w-100" alt = "..." >
</ div >
< div class = "carousel-item" >
< img src = "./img/bootstrap-logo-shadow.png" class = "d-block w-100" alt = "..." >
</ div >
</ div >
< button class = "carousel-control-prev" type = "button" data-bs-target = "#carousel" data-bs-slide = "prev" >
< span class = "carousel-control-prev-icon" aria-hidden = "true" ></ span >
< span class = "visually-hidden" > Previous</ span >
</ button >
< button class = "carousel-control-next" type = "button" data-bs-target = "#carousel" data-bs-slide = "next" >
< span class = "carousel-control-next-icon" aria-hidden = "true" ></ span >
< span class = "visually-hidden" > Next</ span >
</ button >
</ div >
</ div >
< script src = "bootstrap-5.2.3-dist/js/bootstrap.min.js" ></ script >
</ body >
</ html >
模式对话框(Model)
模式对话框 就是弹出的悬浮弹窗，会挡住底层页面，用来展示提示、确认操作或填写内容，自带遮罩、居中显示，支持打开关闭动画，适配手机电脑，不用自己写复杂弹窗代码。
常见类
分类
说明
常用CSS类名
模态框外层
整个弹窗的遮罩+容器
modal
对话框居中
让弹窗垂直居中显示
modal-dialog-centered
弹窗尺寸
控制弹窗大小
modal-sm、modal-lg、modal-xl
弹窗内容区
弹窗内部白色面板
modal-content
弹窗头部
标题+关闭按钮区域
modal-header
弹窗标题
弹窗标题文字
modal-title
弹窗主体
弹窗正文内容区域
modal-body
弹窗底部
按钮操作区
modal-footer
关闭按钮
关闭弹窗的按钮
btn-close
滚动内容
内容超长时内部滚动
modal-dialog-scrollable
效果
源代码
<!-- Button trigger modal -->
< button type = "button" class = "btn btn-primary" data-bs-toggle = "modal" data-bs-target = "#exampleModal" >
</ button >
<!-- Modal -->
< div class = "modal fade" id = "exampleModal" tabindex = "-1" aria-labelledby = "exampleModalLabel" aria-hidden = "true" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h1 class = "modal-title fs-5" id = "exampleModalLabel" > Modal title</ h1 >
< button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close" ></ button >
</ div >
< div class = "modal-body" >
</ div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-secondary" data-bs-dismiss = "modal" > Close</ button >
< button type = "button" class = "btn btn-primary" > Save changes</ button >
</ div >
</ div >
</ div >
</ div >
源代码
model.html <!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Bootstrap demo</ title >
< link href = "bootstrap-5.2.3-dist/css/bootstrap.min.css" rel = "stylesheet" >
</ head >
< body >
<!-- Button trigger modal -->
< button type = "button" class = "btn btn-primary" data-bs-toggle = "modal" data-bs-target = "#exampleModal" >
</ button >
<!-- Modal -->
< div class = "modal fade" id = "exampleModal" tabindex = "-1" aria-labelledby = "exampleModalLabel" aria-hidden = "true" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h1 class = "modal-title fs-5" id = "exampleModalLabel" > Modal title</ h1 >
< button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close" ></ button >
</ div >
< div class = "modal-body" >
</ div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-secondary" data-bs-dismiss = "modal" > Close</ button >
< button type = "button" class = "btn btn-primary" > Save changes</ button >
</ div >
</ div >
</ div >
</ div >
< script src = "bootstrap-5.2.3-dist/js/bootstrap.min.js" ></ script >
</ body >
</ html >
下拉菜单(Dropdown)
下拉菜单 是点击或悬浮后弹出的折叠选项列表，可挂载在按钮、导航栏上，自带隐藏显示交互与规范样式，用来收纳多选内容，节省页面空间，操作简洁直观。
常见类
分类
说明
常用CSS类名
下拉容器
包裹整个下拉组件
dropdown
触发按钮
点击展开下拉的按钮
dropdown-toggle
下拉菜单
展开后的菜单面板
dropdown-menu
菜单项
菜单内的可点击选项
dropdown-item
激活项
当前选中的菜单项
active
禁用项
不可点击的菜单项
disabled
分割线
菜单内分隔区域
dropdown-divider
菜单标题
菜单分组标题
dropdown-header
文本内容
菜单内普通文本
dropdown-item-text
效果
源代码
< div class = "dropdown m-5" >
< button class = "btn btn-primary dropdown-toggle" type = "button" data-bs-toggle = "dropdown" >
</ button >
< ul class = "dropdown-menu" >
< li >< a class = "dropdown-item" href = "#" > 选项一</ a ></ li >
< li >< a class = "dropdown-item" href = "#" > 选项二</ a ></ li >
< li >< a class = "dropdown-item" href = "#" > 选项三</ a ></ li >
< li >< hr class = "dropdown-divider" ></ li >
< li >< a class = "dropdown-item" href = "#" > 其他选项</ a ></ li >
</ ul >
</ div >
源代码
dropdown.html <!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Bootstrap demo</ title >
< link href = "bootstrap-5.2.3-dist/css/bootstrap.min.css" rel = "stylesheet" >
</ head >
< body >
< div class = "dropdown m-5" >
< button class = "btn btn-primary dropdown-toggle" type = "button" data-bs-toggle = "dropdown" >
</ button >
< ul class = "dropdown-menu" >
< li >< a class = "dropdown-item" href = "#" > 选项一</ a ></ li >
< li >< a class = "dropdown-item" href = "#" > 选项二</ a ></ li >
< li >< a class = "dropdown-item" href = "#" > 选项三</ a ></ li >
< li >< hr class = "dropdown-divider" ></ li >
< li >< a class = "dropdown-item" href = "#" > 其他选项</ a ></ li >
</ ul >
</ div >
< script src = "bootstrap-5.2.3-dist/js/bootstrap.bundle.min.js" ></ script >
</ body >
</ html >
导航(Nav)
导航 是成套的页面菜单组件，自带导航栏、标签页、胶囊菜单等样式，支持点击切换、响应式折叠与对齐排版，能快速做出适配手机电脑、整洁统一的网站顶部导航与内容切换菜单。
常见类
分类
说明
常用CSS类名
基础导航容器
导航整体外层
nav
导航项
单个导航条目
nav-item
导航链接
导航可点击区域
nav-link
选项卡样式
标签页样式导航
nav-tabs
胶囊样式
Pill 胶囊按钮样式
nav-pills
激活导航
当前选中项
active
禁用导航
不可点击项
disabled
垂直导航
竖向排列导航
flex-column
导航居中/靠右
调整导航对齐
justify-content-center、justify-content-end
效果
源代码
< ul class = "nav nav-tabs" role = "tablist" >
< li class = "nav-item" >
< a class = "nav-link active" data-bs-toggle = "tab" href = "#home" > Home</ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link" data-bs-toggle = "tab" href = "#menu1" > Menu 1</ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link" data-bs-toggle = "tab" href = "#menu2" > Menu 2</ a >
</ li >
</ ul >
源代码
nav.html <!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Bootstrap demo</ title >
< link href = "bootstrap-5.2.3-dist/css/bootstrap.min.css" rel = "stylesheet" >
</ head >
< body >
< ul class = "nav nav-tabs" role = "tablist" >
< li class = "nav-item" >
< a class = "nav-link active" data-bs-toggle = "tab" href = "#home" > Home</ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link" data-bs-toggle = "tab" href = "#menu1" > Menu 1</ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link" data-bs-toggle = "tab" href = "#menu2" > Menu 2</ a >
</ li >
</ ul >
< script src = "bootstrap-5.2.3-dist/js/bootstrap.min.js" ></ script >
</ body >
</ html >
