以下是Bootstrap 5常用组件名称及核心参数分类说明（按功能模块划分）：
1. 布局组件
| 组件名称 |
核心参数/类名 |
作用说明 |
| Container |
.container/.container-fluid |
响应式固定宽度或全宽容器 |
| Grid System |
.row+.col-{breakpoint}-* |
12列响应式网格系统 |
| Spacing |
.{m/p}{t/b/s/e/x/y}-{1-5} |
边距(m)和填充(p)工具类 |
2. 基础组件
| 组件名称 |
核心参数/属性 |
作用说明 |
| Button |
.btn-{primary/secondary等} |
按钮样式及状态类 |
| Card |
.card-body/.card-title |
卡片容器及内容结构类 |
| Alert |
.alert-{success/danger等} |
警告框样式及关闭功能 |
3. 导航组件
| 组件名称 |
核心参数/属性 |
作用说明 |
| Navbar |
data-bs-toggle="collapse" |
响应式导航栏折叠控制 |
| Nav |
.nav-link+.active |
导航链接激活状态 |
| Breadcrumb |
.breadcrumb-item |
面包屑导航结构 |
4. 表单组件
| 组件名称 |
核心参数/属性 |
作用说明 |
| Form Control |
.form-control/.form-select |
输入框和下拉框基础样式 |
| Checkbox |
.form-check-input |
复选框/单选框样式类 |
| Validation |
.is-invalid/.valid-feedback |
表单验证状态反馈 |
5. 交互组件
| 组件名称 |
核心参数/属性 |
作用说明 |
| Modal |
data-bs-toggle="modal" |
模态框触发属性 |
| Dropdown |
data-bs-toggle="dropdown" |
下拉菜单交互控制 |
| Tooltip |
data-bs-toggle="tooltip" |
工具提示触发属性 |
6. 辅助组件
| 组件名称 |
核心参数/类名 |
作用说明 |
| Spinners |
.spinner-border |
加载动画样式 |
| Progress |
.progress-bar |
进度条容器和填充条 |
| Badge |
.badge-{primary/danger等} |
徽章样式类 |
参数类型说明
- 样式类：如
.btn-primary控制视觉样式
- 数据属性：如
data-bs-toggle控制交互行为
- 状态类：如
.active标记当前选中项
- 响应断点：
{sm/md/lg/xl/xxl}控制不同屏幕下的表现
需要具体组件的完整代码示例可告知组件名称。
以下是Bootstrap 5常用组件的参数表格及代码示例：
1. 折叠面板 (Collapse)
| 参数 |
说明 |
示例代码 |
data-bs-toggle="collapse" |
声明折叠交互 |
<button data-bs-toggle="collapse" data-bs-target="#demo"> |
data-bs-target="#id" |
指定目标元素 |
<div id="demo" class="collapse">内容</div> |
.show |
默认展开状态 |
<div class="collapse show"> |
2. 轮播图 (Carousel)
| 参数 |
说明 |
示例代码 |
data-bs-ride="carousel" |
自动轮播 |
<div id="myCarousel" data-bs-ride="carousel"> |
data-bs-interval="2000" |
轮播间隔(ms) |
<div data-bs-interval="2000"> |
data-bs-slide="prev/next" |
导航控制 |
<button data-bs-slide="prev"> |
3. 提示框 (Tooltip)
| 参数 |
说明 |
示例代码 |
data-bs-placement |
显示位置 |
<button data-bs-placement="top"> |
title="内容" |
提示文本 |
<button title="提示内容"> |
| JS初始化 |
必需代码 |
new bootstrap.Tooltip(element) |
其他常用组件速查表
| 组件名称 |
核心类/参数 |
功能说明 |
| 弹出框 (Popover) |
data-bs-toggle="popover" |
增强版Tooltip |
| 滚动监听 (Scrollspy) |
data-bs-spy="scroll" |
滚动高亮导航 |
| 分页器 (Pagination) |
.pagination .page-item |
分页导航 |
| 列表组 (List Group) |
.list-group .list-group-item |
条目列表容器 |
| 手风琴 (Accordion) |
.accordion .accordion-item |
多级折叠面板 |
| 悬浮框 (Toast) |
.toast .toast-header |
自动消失通知 |
| 侧边栏 (Offcanvas) |
.offcanvas .offcanvas-body |
侧滑面板 |
浙公网安备 33010602011771号