B Bootstrap组件实验室
官方文档
Bootstrap v5.3.8 · jsDelivr CDN · 示例全部可交互

Bootstrap 5.3 组件示例大全

Bootstrap组件实验室 —— 覆盖官方 25 个组件与 12 个常用第三方组件。每个示例真实可交互、代码块一键复制，基于 jsDelivr CDN 打开即用，是查 Bootstrap 用法最省事的速查手册。

25官方组件页 12第三方组件页 5.3.8最新稳定版 37 可交互示例
浏览官方组件 浏览第三方组件

官方组件

Bootstrap 5.3 内置 · 共 25 个页面

手风琴Accordion

可折叠的内容面板，一次只展开一项

提示框Alerts

面向操作的反馈与状态提示，可关闭

徽章Badge

小徽标，用于计数、标签与状态标记

面包屑Breadcrumb

展示当前页面的层级导航路径

按钮Buttons

多种颜色、尺寸、轮廓与状态的按钮

按钮组Button group

将按钮组合成一行或一列，支持工具栏

卡片Cards

灵活的内容容器，支持图文、列表与页脚

轮播Carousel

可循环的幻灯片，支持指示器与控制按钮

折叠Collapse

切换内容的显示与隐藏，可横向展开

下拉菜单Dropdowns

带交互的下拉菜单、分割按钮与对齐方式

表单Forms

输入控件、校验反馈、开关与选择器

输入组Input group

将输入框与前缀后缀、按钮组合

列表组List group

可定制的内容列表，支持操作与徽章

模态框Modal

对话框与轻量内容浮层，多种尺寸

导航与标签页Navs & tabs

标签页、胶囊导航、垂直导航与 JS 切换

导航栏Navbar

站点级响应式导航条，含折叠菜单

抽屉Offcanvas

从四边滑出的侧边面板，可嵌套

分页Pagination

多页内容的分页导航，含禁用与尺寸

占位符Placeholders

内容加载中的骨架屏占位

气泡卡片Popovers

点击触发的小型悬浮信息卡，可配置方向

进度条Progress

任务完成度的可视化，含条纹与多段

滚动监听Scrollspy

随页面滚动自动高亮对应导航项

加载指示Spinners

边框与增长两种加载动画，可组合文字

轻提示Toasts

轻量通知，可手动或定时关闭，可堆叠

悬浮提示Tooltips

悬停或聚焦时显示的小提示文字

官方文档Bootstrap Docs

前往 bootstrap.ac.cn 阅读完整官方组件文档

第三方组件

基于官方 5.3 生态的常用库 · 徽标标注「官方已有 / 官方没有」

Bootstrap Selectbootstrap-select

官方已有功能丰富的下拉选择器，支持搜索、多选与自定义样式

Select2select2

官方已有经典下拉选择库，支持远程数据、标签化多选与搜索

Bootstrap Tablebootstrap-table

官方已有数据驱动的表格，支持排序、分页、搜索与导出

SweetAlert2sweetalert2

官方已有高颜值可定制的弹窗组件，替代原生 alert / confirm

Tempus Dominustempus-dominus

官方没有完整的日期时间选择器，Bootstrap 5 专用版本

Summernotesummernote

官方没有所见即所得富文本编辑器，基于 jQuery 构建

Bootstrap Fileinputbootstrap-fileinput

官方已有文件上传增强，带预览、拖拽与批量选择

Bootstrap Sliderbootstrap-slider

官方已有功能丰富的滑块，支持范围选择、刻度与工具提示

Font Awesomefont-awesome

官方已有海量图标字体库，Free 版即可覆盖常用场景

AOS 动画aos

官方没有页面滚动入场动画库，轻量且易配置

Chart.jschart.js

官方没有轻量灵活的图表库，柱状、折线、饼图等一应俱全

EChartsecharts

官方没有功能强大的图表库（Chart.js 备选），大数据量场景更优