Bootstrap交互组件不能仅靠复制HTML运行，必须匹配对应版本的JS依赖与初始化逻辑：v3需jQuery+bootstrap.js，v4/v5需Popper及正确引入方式，且tooltip、modal等须显式初始化，动态内容需重绑定，控制台报错是首要排查线索。
Bootstrap组件不能靠“复制粘贴”就直接跑起来，尤其是带交互的（比如模态框、下拉菜单、折叠面板），缺 JS 初始化或依赖顺序错，按钮点不动、菜单打不开是常态。
复制前先确认文档版本和依赖链
你看到的示例 HTML 很可能来自 Bootstrap v3、v4 或 v5 文档，三者 class 名、JS 行为、依赖项完全不同：
- v3 依赖
jQuery+bootstrap.js，不依赖 Popper - v4 要求
jQuery+Popper+bootstrap.bundle.min.js（或分开引入） - v5 移除了 jQuery，改用原生 JS，但
bootstrap.bundle.min.js仍含 Popper
直接从 v5 文档复制一个 dropdown 到只引了 v4 CSS 的页面里，DOM 结构对了，JS 动作照样失效。查文档右上角版本号，别凭印象判断。
粘贴后必须补 JS 初始化逻辑
很多组件（如 collapse、tab、tooltip）不是“写完 HTML 就生效”，需要手动触发或等自动初始化。常见漏掉的点：
-
data-toggle="collapse"类按钮，需确保bootstrap.js已加载且没报TypeError: $(...).collapse is not a function - 动态插入的 DOM（如 AJAX 加载的面板），
$('[data-toggle="collapse"]').collapse()必须重执行，不能只在$(document).ready()里跑一次 - Tooltip/Popover 默认不启用，得显式调用
$('[data-toggle="tooltip"]').tooltip()，否则 hover 没反应
检查浏览器控制台有没有 ReferenceError 或 jQuery is not defined —— 这类错误往往比样式错位更早暴露问题根源。
模态框里复制按钮为什么点不了
这是高频踩坑场景：你在模态框 HTML 里写了 <button class="btn" data-clipboard-text="xxx"></button>，但点击无反应。根本原因不是 Bootstrap，而是 clipboard 初始化时机不对：
-
new ClipboardJS('.btn')在模态框display: none时运行，找不到目标元素 - 即使找到了，模态框的
z-index或transform可能导致事件捕获异常 - 正确做法是监听
shown.bs.modal事件，在模态框完全显示后再初始化：$('#myModal').on('shown.bs.modal', function () { new ClipboardJS('.btn', { container: this }); });
注意 container: this —— 把作用域限定在当前模态框内，避免跨模态框误绑或重复绑定。
表格中加按钮容易漏渲染时机
用 BootstrapTable 或类似插件做分页表格时，在 data-formatter 里拼 <button data-clipboard-target="#xxx"></button> 字符串，常出现按钮存在但复制无效。因为：
- 表格数据是异步加载或懒渲染的，
ClipboardJS初始化早于单元格 DOM 插入 - 翻页后新行的按钮没重新绑定
- 解决方式不是全局重绑，而是监听表格的渲染完成事件（如
onPostBody），再用委托绑定：$table.on('post-body.bs.table', function () { // 使用事件委托，避免重复初始化 $(document).off('click.clipboard').on('click.clipboard', '.copy-btn', function () { const text = $(this).data('copy-text'); navigator.clipboard.writeText(text).catch(console.error); }); });
现代方案优先用 navigator.clipboard.writeText()，它不依赖第三方库，但必须在用户 click 回调里同步调用，不能包在 setTimeout 或 Promise.then 里，否则被浏览器拒绝。
