Bootstrap 5彻底弃用jQuery，所有组件基于原生DOM API和ES6类实现；需改用data-bs-*属性、bootstrap.bundle.min.js及手动初始化，或按需导入ES模块。
如果您在使用 Bootstrap 5 时发现 jQuery 不再被引入，而原有基于 jQuery 的插件调用方式（如 $().modal()）失效，则说明您已进入 Bootstrap 5 的原生 JavaScript 运行环境——它彻底移除了对 jQuery 的依赖，转而采用标准 DOM API 和 ES6 类封装。以下是针对该场景的多种实现路径与特性分析：
一、使用 ES 模块按需导入组件类
Bootstrap 5 将每个交互组件实现为独立的 ES6 类（如 Modal、Dropdown、Toast），开发者可仅导入所需模块，避免加载未使用功能，提升打包体积控制精度和执行效率。
1、确认项目已安装 @popperjs/core 和 bootstrap（版本必须为 ^5.3.0 或更高）。
2、在 resources/js/app.js 中删除旧式 require('bootstrap')，改用 ESM 导入：
3、导入指定组件并手动初始化实例，例如：
import { Modal, Dropdown, Toast } from 'bootstrap';
4、确保目标 DOM 元素已存在且非 null，再执行构造函数：
const myModal = new Modal(document.getElementById('myModal'));
5、若需响应用户操作（如按钮点击），绑定事件后显式调用方法：
document.getElementById('openBtn').addEventListener('click', () => myModal.show());
二、通过 data-bs-* 属性自动初始化
Bootstrap 5 内置了自初始化机制：当页面加载完成且 DOM 就绪后，其 JS 会扫描所有含 data-bs-toggle 属性的元素，并自动为其创建对应组件实例。该方式无需编写 JS 初始化代码，适合静态结构或快速原型开发。
1、确保已引入 bootstrap.bundle.min.js（含 Popper 和 Bootstrap 原生 JS）。
2、为触发器添加标准数据属性，例如：
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">打开模态框</button>
3、为容器设置对应 ID 并添加必要类名：
<div class="modal fade" id="exampleModal" tabindex="-1"><div class="modal-dialog"><div class="modal-content">...</div></div></div>
4、注意：该机制仅对初始存在于 DOM 中的元素生效；动态插入的内容需手动初始化。
三、直接调用全局 bootstrap 对象（UMD 方式）
对于未使用构建工具的纯 HTML 项目，可通过 CDN 引入 UMD 版本的 Bootstrap，并利用挂载到 window.bootstrap 的命名空间访问组件类，适用于轻量级集成或文档示例场景。
1、在页面底部引入完整 bundle：
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
2、确认脚本加载完成后，通过 window.bootstrap.Modal 等访问构造函数。
3、获取目标元素引用：
const modalEl = document.getElementById('staticBackdrop');
4、创建实例并调用方法：
const staticModal = new bootstrap.Modal(modalEl, { backdrop: 'static' });
5、触发显示：
staticModal.show();
四、Bootstrap 原生 JS 的核心优势
原生实现消除了 jQuery 的抽象层开销，使组件更贴近浏览器运行时行为，具备更高执行性能和更低内存占用。所有组件均基于标准 Web API（如 CustomEvent、MutationObserver、getBoundingClientRect），兼容现代浏览器策略（如无符号整数溢出处理、Shadow DOM 边界穿透等）。
1、组件类支持完整的生命周期管理，例如 dispose() 方法可彻底清除事件监听器与数据引用，防止内存泄漏。
2、每个类导出明确的构造函数签名与静态方法（如 Modal.getInstance()），便于 TypeScript 类型推导与 IDE 自动补全。
3、CSS 与 JS 行为解耦清晰：data-bs-* 属性仅作为声明式入口，不参与样式计算，避免框架间 DOM 操作冲突。
4、ESM 输出天然适配 Tree-shaking，Webpack/Vite 可精准剔除未引用组件代码。
五、原生 JS 实现的典型限制
脱离 jQuery 后，部分高频便捷操作需手动补全，尤其在处理集合元素、链式调用、跨浏览器事件标准化等方面失去语法糖支持，对开发者基础 DOM 能力提出更高要求。
1、不支持类似 $('.dropdown') 的选择器批量初始化，必须遍历 NodeList 并逐个 new 实例。
2、无内置动画队列管理，show() 与 hide() 不自动等待 CSS 过渡结束，需监听 shown.bs.modal 等事件手动衔接逻辑。
3、动态渲染内容（如 AJAX 插入的下拉菜单）不会被自动扫描，必须在插入后主动调用 Dropdown.getOrCreateInstance()。
4、无障碍属性（如 aria-expanded）需开发者自行同步更新，原生类不自动维护状态镜像。
