Bootstrap 5常用组件名称及核心参数分类说明（按功能模块划分）

以下是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"

声明折叠交互

data-bs-target="#id"

指定目标元素

内容

.show

默认展开状态

2. 轮播图 (Carousel)

参数

说明

示例代码

data-bs-ride="carousel"

自动轮播

data-bs-interval="2000"

轮播间隔(ms)

data-bs-slide="prev/next"

导航控制

3. 提示框 (Tooltip)

参数

说明

示例代码

data-bs-placement

显示位置

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

侧滑面板