不引入 Bootstrap JS 文件是最干净的移除方式,因其 CSS 完全自包含;需删除所有 script 引入、data-bs-* 属性及 Sass 中 JS 相关模块,确保构建产物无 JS 字节和 data-bs- 选择器。

直接引入 bootstrap.bundle.min.js 或 bootstrap.min.js 会加载全部 20+ 个 JS 组件(Modal、Dropdown、Tooltip 等),哪怕你只用 .container 和 .btn,这些 JS 也照常执行、监听 DOM、绑定事件——不仅白耗内存和 CPU,还可能干扰你自己的交互逻辑。
不引 JS 文件是最干净的移除方式
Bootstrap 5 的 CSS 是完全自包含的,所有 utility 类、grid、type、forms 等样式都不依赖 JS。只要你不写 data-bs-* 属性、不调用任何组件 API,JS 根本不需要存在。
- 删掉所有
<script src="...bootstrap.min.js"></script>或<script src="...bootstrap.bundle.min.js"></script> - 确认构建产物里没有残留的 JS 引入(比如 Webpack 中误
import 'bootstrap') - 检查控制台是否还有
Uncaught ReferenceError: bootstrap is not defined—— 有说明某处 JS 代码还在试图调用它
警惕 HTML 里残留的 data-bs-* 属性
这些属性本身不报错,但会悄悄触发 Bootstrap JS 初始化逻辑——前提是 JS 被加载了。更危险的是:即使 JS 没加载,某些框架(如 Vue、React)或 CMS 模板仍可能把 data-bs-toggle="modal" 这类属性原样输出到 HTML,造成语义污染和未来维护混淆。
使用约定式提交(Conventional Commits)生成标准化的 Git 提交信息。适用于以下场景: (1) 暂存更改时需要提交信息; (2) 审查 diff 时希望获得结构化摘要; (3) 编写 PR 描述或变更日志(changelog)条目; (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff,并生成按类型(type)划分范围的提交信息。
- 全局搜索并删除所有
data-bs-开头的属性(data-bs-toggle、data-bs-target、data-bs-dismiss等) - 如果用了第三方插件(如
bootstrap-select),它们通常强依赖 JS,必须一并移除或替换为纯 CSS 替代方案 - 注意:
data-bs-*不是“没 JS 就自动失效”,而是“有 JS 才会生效”;留着它只是埋了个未来隐患
按需编译 Sass 时彻底跳过 JS 相关模块
如果你走 Sass 按需编译路线(推荐),千万别在 custom.scss 里漏掉 JS 的“影子”。Bootstrap 的 Sass 文件中,bootstrap/scss/bootstrap.scss 最后几行默认会 @import "bootstrap/scss/components" 和 @import "bootstrap/scss/plugins",后者就包含 JS 初始化所需的 data-api 和事件绑定逻辑。
- 确保你的入口 Sass 文件只导入 CSS 相关部分:
@import "bootstrap/scss/functions"→@import "bootstrap/scss/variables"→@import "bootstrap/scss/mixins"→@import "bootstrap/scss/reboot"→@import "bootstrap/scss/grid"等 - 绝对不要
@import "bootstrap/scss/bootstrap",它是一键全量,连 JS 初始化的 Sass 都会带进来(虽然不生成 JS,但会污染编译上下文) - 检查最终生成的 CSS 是否含
[data-bs-toggle]、.dropdown[data-bs-auto-close]这类选择器——有说明 Sass 编译链里混进了 JS 相关模块
真正“纯 CSS”的边界很清晰:HTML 只含 class 名,CSS 只靠属性选择器生效,DOM 上不挂任何 data-bs-,构建产物里没有 Bootstrap JS 字节。最容易被忽略的是那些看似无害的 data-bs-toggle="tooltip" ——它不报错、不阻塞,但只要 JS 有一天被意外引入,就会立刻激活,而你根本想不起这行代码在哪。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










