$ is not a function 错误与 css 无关，只因 js 中残留 $().modal() 等 jquery 调用；须删 jquery 引入、改用 bootstrap.modal() 等原生 api，并确保 transition 精准监听 opacity 和 transform。
Bootstrap 5 移除 jQuery 后，自定义 CSS 组件本身不会报错——出问题的一定是你的 JS 初始化逻辑或 transition 声明没对上原生 API 的要求。
为什么 $ is not a function 错误总跟着 CSS 组件出现
这个错误和 CSS 无关，只说明你 JS 里还写着 $().modal()、$('.dropdown') 这类调用。Bootstrap 5 的 JS 不暴露 $，也不解析 jQuery 风格选择器。哪怕你只是在某个自定义组件的初始化脚本里顺手写了这一行，整个 modal 或 dropdown 就会静默失效。
- 删掉所有
<script src="jquery.min.js"></script>（除非其他插件强依赖） - 确保只引入
bootstrap.bundle.min.js，且它在你的自定义脚本之前加载 - 全局搜索替换：
$、jQuery、.modal(、.dropdown(，一个都不能留
data-bs-toggle 生效但自定义组件没反应？检查 class 和 DOM 就绪时机
写了 data-bs-toggle="modal"，也加了 id="myModal"，点击却没弹窗——常见于自定义组件漏掉了关键 class 或初始化过早。
-
.fade必须存在：没有它，Bootstrap 5 的 JS 不会启用 transition 监听，动画退化为硬切，部分组件甚至拒绝初始化 -
.show类不能手动加：它由 JS 控制，你提前加会导致状态错乱；也不要靠style="display: block"强行显示 - 确保初始化代码包裹在
DOMContentLoaded里，比如document.addEventListener('DOMContentLoaded', () => { ... }) - 若组件是动态渲染（如 Vue/React 挂载后插入），
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偏移导致动画错位
最容易被忽略的是：transition 属性必须同时作用于两个元素——比如 Modal 的 .modal.fade 和 .modal-dialog 都得有对应声明，否则 JS 监听不到完整动画周期，shown.bs.modal 事件就永远不会触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
