bootstrap 5 移除 jquery 后报 typeerror: $ is not a function，根本原因是代码中残留 $().modal() 等 jquery 调用；需删除 jquery 引入、改用 new bootstrap.modal() 等原生 api，并确保 transition 精准监听 opacity 和 transform。
Bootstrap 5 移除 jQuery 后，自定义 CSS 组件本身不会报错——报错的一定是你的 JS 代码里还残留着 jQuery 调用，或者你误以为「CSS 类名改了但 JS 初始化逻辑不用动」。
报 TypeError: $ is not a function 的根本原因
这个错误和 CSS 无关，只说明你的 JS 文件中至少有一处写了类似 $().modal('show') 或 $('.dropdown').dropdown() 这样的调用。Bootstrap 5 的 JS 文件不定义 $，也不暴露 jQuery 风格 API。
- 删掉所有
<script src="jquery.min.js"></script>（除非其他独立插件强依赖） - 确认只引入了
bootstrap.bundle.min.js（含 Popper），且它在你的自定义脚本之前加载 - 全局搜索替换：
$、jQuery、.modal(、.dropdown(等，全部删掉或重写
data-bs-toggle 属性生效但自定义组件没反应？检查 class 和 DOM 就绪时机
你可能给按钮加了 data-bs-toggle="modal"，也写了 <div class="modal fade" id="myModal">，但点击没反应——常见于自定义组件中漏掉了关键 class 或初始化过早。
<ul>
<li>
<code>.fade 必须存在：没有它，Bootstrap 5 的 JS 不会启用 transition 监听，动画退化为硬切，部分组件甚至拒绝初始化
.show 类不能手动加：它由 JS 控制，你提前加会导致状态错乱；也不要靠 style="display: block" 强行显示DOMContentLoaded 或 $(document).ready() 的等效写法里（如 document.addEventListener('DOMContentLoaded', ...)）data-bs-toggle 自动初始化完全失效，必须手动执行 new bootstrap.Modal(...)
自定义 CSS 动画不触发？transition 声明必须精准匹配 JS 监听属性
Bootstrap 5 原生 JS 只监听 opacity 和 transform 的 transitionend 事件，不像 jQuery 那样靠 transition: all 蒙混过关。
- 写全声明：
transition: opacity .15s ease-in-out, transform .15s ease-in-out，不能简写成transition: all .15s - 删掉
.fade类后，computed style 中的transition属性常跟着消失——说明 CSS 加载晚于 JS 执行，需检查<link rel="stylesheet">是否在中且位置靠前 - 动态插入内容后，记得调用
myModal.handleUpdate()（针对 Modal）或dropdownEl.update()（针对 Dropdown），否则 Popper 定位未重算，transform偏移导致动画卡住
最易被忽略的一点：Bootstrap 5 的 JS 初始化是一次性扫描，不监听 DOM 变化。哪怕你用 innerHTML 插入一个带 data-bs-toggle="tooltip" 的元素，它也不会自动绑定——这不是 bug，是设计使然。你得自己判断何时该调用 new bootstrap.Tooltip(...)。
