从 Bootstrap 4 迁移到 5

重大变化

不再依赖 jQuery

Bootstrap 5 使用纯 JavaScript 重写了所有插件，彻底移除了对 jQuery 的依赖。这意味着：

• 页面加载更轻量，不需要额外加载 jQuery
• JavaScript 插件可以使用 ES 模块方式导入
• 如果你的项目仍在使用 jQuery，升级后可以减少一个依赖

CSS 自定义属性

Bootstrap 5 广泛使用 CSS 自定义属性（CSS 变量）来管理主题和样式，使得自定义变得更加灵活：

:root {
    --bs-primary: #0d6efd;
    --bs-body-font-family: system-ui;
    --bs-body-bg: #fff;
}

组件变更

已移除的组件

Bootstrap 4	Bootstrap 5 替代方案
.jumbotron	.bg-light .p-5 .rounded 组合
.media	Flexbox 工具类 .d-flex .align-items-start
.list-inline	.d-flex .gap-*
.btn-block	.d-block .w-100
.card-deck	网格系统 .row-cols-*
.form-group	.mb-3

命名变化

Bootstrap 4	Bootstrap 5
.badge	.badge（不再有独立的定位上下文）
.custom-select	.form-select
.custom-file	原生文件输入 + .form-control
.close	.btn-close
.float-left / .float-right	.float-start / .float-end
.ml-* / .mr-*	.ms-* / .me-*
.pl-* / .pr-*	.ps-* / .pe-*
.font-weight-bold	.fw-bold
.font-italic	.fst-italic

网格系统升级

• 新增 .col-xxl-* 断点（≥1400px）
• 不再支持 IE10/IE11，CSS 不再包含 IE 兼容代码
• .no-gutters 改为 .g-0

表单系统

Bootstrap 5 的表单系统经过全面重写：

• 所有表单控件使用统一的 .form-control 样式
• 新增 .form-label 替代 .col-form-label
• 表单校验样式使用 CSS 伪类 :valid 和 :invalid
• 移除了自定义表单控件（custom-*），全部使用原生组件

升级建议

1. 先更新 Bootstrap 4 到最新的 v4.x 版本
2. 使用 Bootstrap 5 迁移工具 scanner 检查代码
3. 用 npm install [email protected] 安装新版本
4. 全局替换已变更的 CSS 类名
5. 移除 jQuery 相关的代码和依赖
6. 测试所有组件的显示和交互效果

jQuery 转原生 JS 对比

以下对比展示了从 jQuery 迁移到 Bootstrap 5 原生 JavaScript 的常见模式：

场景	jQuery（Bootstrap 4）	原生 JS（Bootstrap 5）
初始化 Tooltip	$('[data-toggle="tooltip"]').tooltip()	new bootstrap.Tooltip(element)
初始化 Modal	$('#myModal').modal('show')	bootstrap.Modal.getOrCreateInstance(el).show()
关闭 Modal	$('#myModal').modal('hide')	bootstrap.Modal.getOrCreateInstance(el).hide()
监听事件	$('#myModal').on('shown.bs.modal', fn)	el.addEventListener('shown.bs.modal', fn)
获取元素	$('.my-class')	document.querySelectorAll('.my-class')
添加/移除类	$(el).addClass('active') $(el).removeClass('active')	el.classList.add('active') el.classList.remove('active')
切换类	$(el).toggleClass('active')	el.classList.toggle('active')

CSS 变量迁移

Bootstrap 5 大量使用 CSS 自定义属性（CSS 变量），覆盖颜色、间距、字体等核心设计系统：

/* Bootstrap 4 — 使用 Sass 变量覆盖 */
$primary: #007bff;
$body-bg: #f8f9fa;
$font-family-base: 'Segoe UI', sans-serif;

/* Bootstrap 5 — 使用 CSS 变量覆盖（无需重新编译） */
:root {
    --bs-primary: #0d6efd;
    --bs-body-bg: #f8f9fa;
    --bs-body-font-family: 'Segoe UI', system-ui, sans-serif;
    --bs-border-radius: 0.5rem;
    --bs-link-color: #0d6efd;
    --bs-link-hover-color: #0a58ca;
}

Sass 变量仍然可以用于自定义编译，但 CSS 变量方式更方便在运行时动态修改主题：

/* 通过 CSS 变量动态切换主题 */
.dark-theme {
    --bs-body-bg: #212529;
    --bs-body-color: #dee2e6;
    --bs-primary: #6ea8fe;
}

/* 在 JS 中动态更新 */
document.documentElement.style.setProperty('--bs-primary', '#ff6b6b');

组件变更详解

Navbar 变化

特性	Bootstrap 4	Bootstrap 5
导航条收缩断点	navbar-expand-lg	navbar-expand-lg（不变）
导航内联表单	form-inline	.d-flex
导航项激活	.active（无 a 标签包含）	.active 必须在 <a> 上

表单控件命名变化

Bootstrap 4	Bootstrap 5
.form-control	.form-control（保持一致）
.form-control-file	.form-control
.form-control-range	.form-range
.custom-control	.form-check
.custom-select	.form-select
.custom-switch	.form-check form-switch

常见迁移问题