为什么Bootstrap 5移除了jQuery对CSS动画有何影响_分析原生JS切换机制-css教程-PHP中文网

bootstrap 5 报 typeerror: $ is not a function 是因彻底移除 jquery 依赖，需删除 jquery 引入、改用原生 api 初始化组件（如 new bootstrap.modal()）、替换 data-toggle 为 data-bs-toggle，并手动补全 css 动画。

为什么bootstrap 5移除了jquery对css动画有何影响_分析原生js切换机制

Bootstrap 5 报 `TypeError: $ is not a function` 怎么办

这不是配置问题，是代码里还留着 jQuery 风格调用的铁证。只要出现这个错，说明你项目中至少有一处写了类似 $().modal('show') 或 $('.dropdown').dropdown() 这样的语句——Bootstrap 5 的 JS 文件压根不认 $ 这个变量，它根本没定义。

删掉所有 jquery.min.js 和 jquery.slim.js 的 <script></script> 引入（除非其他独立插件强依赖）
确保只引入 bootstrap.bundle.min.js（含 Popper v2），且它在你的自定义脚本之前执行

把所有 $('#myModal').modal('show') 替换成：

const myModal = new bootstrap.Modal(document.getElementById('myModal'));
myModal.show();

别试图封装一个 $ 兼容层——原生 API 不支持隐式遍历，querySelector 只返回单个元素，querySelectorAll 返回 NodeList，必须显式循环

`data-toggle="modal"` 点击没反应？检查 `data-bs-` 前缀

控制台没报错，但模态框就是不弹、下拉菜单点不动——90% 是属性名没升级。Bootstrap 5 的 JS 解析器完全忽略 data-toggle，只监听带 bs 前缀的版本。

Feishu calendar sync, local ics to json data for AI agent

将ICS日历文件转为JSON格式，用于飞书日历导入导出及数据集成。

下载

全局搜索替换：data-toggle → data-bs-toggle，data-target → data-bs-target，data-dismiss → data-bs-dismiss
漏掉一个 data-trigger 就可能导致 Popover 初始化失败，哪怕 HTML 结构完全正确
data-bs-toggle="modal" 仅用于自动初始化；如果要手动控制（比如条件判断后才 show），必须走 JS API，不能靠属性触发
检查元素时看到旧属性，不代表它在起作用——Bootstrap 5 的 JS 根本不会读取它们

下拉菜单和 Modal 为什么没了淡入/滑动动画

不是你 CSS 写错了，是 Bootstrap 5 主动移除了所有默认过渡逻辑。它不再为 .dropdown-menu 或 .modal.fade 提供 transition 声明，也不再依赖 jQuery 的 fadeIn/slideDown。

想加淡入+下滑效果，得自己补 CSS：visibility 控制显隐（display: none 无法过渡），配合 opacity 和 transform
监听 .dropdown-menu.show 类变化来触发动画，而不是直接给 .dropdown-menu 加 transition
.modal.fade 这个 class 必须保留，它是 backdrop 和 dialog 动画同步的前提；删了它，animate.css 类加了也不同步
移动端默认不监听 touchstart，只响应 click 和 pointerdown；iOS Safari 会自动映射 click，但长按或滑动需自行监听 touchend 并调用 toggle()

`Uncaught ReferenceError: bootstrap is not defined` 的真实原因

这个错高频出现在你写 bootstrap.Modal.getInstance() 或 new bootstrap.Toast() 的时候。根本不是文件没引，而是执行时机错了——bootstrap 全局对象还没挂载好，你的脚本就急着调用了。

bootstrap.bundle.min.js 必须在调用前加载并执行完毕；放在顶部、没包 DOMContentLoaded、或没等 load 事件完成，都会导致该错
CDN 场景下别只依赖 defer，推荐显式用 type="module" 或监听 window.addEventListener('load', ...)
动态插入的 DOM 元素（比如 AJAX 加载的弹窗内容）不会被自动初始化，必须手动执行 new bootstrap.Modal(el)
Popper v2 配置项也变了：比如 boundary 改成 boundaryElement，不更新会导致定位偏移，但控制台不会报错，只会“看起来怪怪的”

原生切换机制的核心代价，是你得亲手管理 DOM 节点、事件委托、动画生命周期——没有 jQuery 那种“写一行，全量生效”的幻觉了。最容易被忽略的是：querySelectorAll 返回的 NodeList 不是数组，.forEach 在旧版 Safari 上可能不支持；还有 shown.bs.modal 这类事件现在必须用 addEventListener 绑定到具体 HTMLElement 上，传 jQuery 对象会直接失效。