Bootstrap 插件概览
Bootstrap 不止是 CSS 框架，还内置了 12 个基于 jQuery 的 JavaScript 插件，覆盖模态框、下拉、标签页、轮播等交互场景。它们全部支持"data 属性"声明式用法与"编程式"调用两种 API，学一次即可通用。
引入方式
插件打包在一个文件中，二选一引入即可（必须放在 jQuery 之后）：
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
说明：bootstrap.min.js 是压缩版，适合生产环境；它内部已包含下方全部插件。
插件清单
| 插件 | 作用 | data 触发 |
|---|---|---|
| 过渡 transition | 为其他插件提供淡入淡出动画 | 无需手动触发 |
| 模态框 modal | 弹出对话框 | data-toggle="modal" |
| 下拉 dropdown | 展开/收起菜单 | data-toggle="dropdown" |
| 滚动监听 scrollspy | 随滚动高亮导航 | data-spy="scroll" |
| 标签页 tab | 内容分区切换 | data-toggle="tab" |
| 提示工具 tooltip | 悬浮小提示 | data-toggle="tooltip" |
| 弹出框 popover | 带标题的悬浮气泡 | data-toggle="popover" |
| 警告框 alert | 可关闭的提示条 | data-dismiss="alert" |
| 按钮 button | 加载/选中状态切换 | data-toggle="button" |
| 折叠 collapse | 手风琴/开关面板 | data-toggle="collapse" |
| 轮播 carousel | 图片轮播播放 | data-ride="carousel" |
| 附加导航 affix | 滚动时固定元素 | data-spy="affix" |
data 属性 API
多数插件无需写 JavaScript，直接在标签上写 data-toggle 与目标即可：
<button data-toggle="collapse" data-target="#demo">点我展开</button>
<div id="demo" class="collapse">被折叠的内容</div>
显示效果：点击按钮后 #demo 平滑展开，再点一次收起——全程未写一行脚本。
编程式 API
也可以通过 jQuery 方法手动控制，便于在业务逻辑里触发：
<script>
$('#myModal').modal('show'); // 打开模态框
$('.collapse').collapse('toggle'); // 切换折叠状态
</script>
说明：调用前需确保页面已引入 jQuery 与 bootstrap.min.js。
使用注意事项
- 除 tooltip 与 popover 外，其余插件用 data 属性即可自动初始化；
- tooltip、popover 必须先用
$(...).tooltip()手动初始化； - 页面需引入 jQuery（1.9.1 及以上版本）；
- 若不想全量引入，可单独下载某个插件的 js 文件按需使用。
小结：Bootstrap 插件 = data 属性声明式起步 + jQuery 方法精细控制；先记住这张清单，遇到具体组件再到对应小节学习细节。