我的模板Bootstrap v4.1.3相升级到Bootstrap v5.3.3需要注意的有哪些（5JavaScript 插件与交互）

五、JavaScript 插件与交互

Bootstrap 5 的 JS 插件完全基于原生 JS，API 变化极大：

data-*属性前缀

所有交互相关的data属性均新增bs前缀，这是最容易出错的点：

data-toggle→data-bs-toggle

data-target→data-bs-target

data-dismiss→data-bs-dismiss

示例：模态框触发按钮需改为 <button data-bs-toggle="modal" data-bs-target="#myModal">

实例化与方法调用

不再通过 jQuery 实例化插件，改用原生 JS 构造函数：

javascript

// 旧：Bootstrap 4（jQuery）

$('#myModal').modal('show');

// 新：Bootstrap 5（原生JS）

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

myModal.show(); // 调用方法

事件绑定

用原生addEventListener替代 jQuery 的on()：

javascript

// 旧：$(myModal).on('shown.bs.modal', function() { ... })

// 新：

myModal.addEventListener('shown.bs.modal', function() {

  // 逻辑

});

插件选项

选项通过实例化时的对象传入，或data-bs-*属性：

html

预览

<!-- 数据属性方式 -->

<div class="toast" data-bs-autohide="false">...</div>

<!-- JS选项方式 -->

const myToast = new bootstrap.Toast(element, { autohide: false });