Bootstrap 5与Bootstrap 3的核心差异

陌磊君_7334

陌磊君_7334

2026-04-07

697人浏览

原创

bootstrap 5 与 bootstrap 3 几乎不兼容:栅格改用 flexbox、js 组件去 jquery 化、断点与间距类重构、弃用 ie 支持及 glyphicons,迁移需全面重写代码。

bootstrap 5与bootstrap 3的核心差异

Bootstrap 5 和 Bootstrap 3 不是简单升级,而是两套几乎不兼容的系统。直接替换 CSS 文件或 JS 脚本大概率导致布局错乱、组件失效、响应式崩溃。

栅格系统从 float 切到 flexbox

Bootstrap 3 的 .row 依赖 float + clear: both 实现行内列排列,必须手动处理清除浮动,.col-md-6 类在小屏下默认堆叠,但垂直对齐、等高、间距控制极其受限。

Bootstrap 5 全面基于 display: flex,.row 默认是 flex-container,列自动成为 flex-item:

  • .row 不再需要 .clearfix 或 ::after 伪元素清浮
  • 支持 align-items / justify-content 类(如 align-items-center、justify-content-between)直接控制对齐
  • 列高自动拉齐,无需 hack(如 min-height 或 table-cell 模拟)
  • .g-* 系列类统一控制行列间距,替代 Bootstrap 3 中零散的 .row-no-gutters + 自定义 margin/padding

JavaScript 组件彻底去 jQuery 化

Bootstrap 3 所有交互组件(modal、dropdown、tooltip)强依赖 jQuery,调用方式形如 $(".modal").modal("show");没有 jQuery 就完全不能用。

Bootstrap 5 移除全部 jQuery 绑定,改用原生 Element.addEventListener 和 CustomEvent:

VPS Bootstrap
VPS Bootstrap

从零启动全新 VPS,完成 OpenClaw 完整部署,包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载
  • 初始化方式变为 new bootstrap.Modal(document.getElementById("myModal"))
  • 事件监听使用标准 DOM 事件名,如 shown.bs.modal → shown.bs.modal(仍保留命名空间,但不再依赖 jQuery 的 .on())
  • data-toggle 已废弃,统一为 data-bs-toggle(注意 bs 前缀)
  • Popper.js 升级到 v2,tooltip 和 popover 的定位逻辑更稳定,但配置项名有变化(如 boundary → boundaryElement)

断点、容器与间距类命名全面重构

Bootstrap 3 的断点只有 4 级(xs/sm/md/lg),容器靠 .container(固定宽)和 .container-fluid(100% 宽)二分;列间距靠负 margin + 内边距模拟,无统一控制入口。

Bootstrap 5 扩展为 6 级断点(新增 xxl ≥1400px),并重写整套间距系统:

  • 容器新增 .container-xxl,且 .container 默认按当前断点最大宽度自适应(不再是固定值)
  • 列偏移/排序类从 .col-md-offset-2 改为 .offset-md-2;列顺序从 .col-md-push-3 / .col-md-pull-3 改为 .order-md-3
  • 间距工具类统一前缀 m-/p-,支持方向(t/b/s/e)和断点(md),如 mt-3、pe-lg-4
  • .text-center 在移动端默认生效,若需仅在大屏居中,得写 text-lg-center(Bootstrap 3 是 text-center + text-left 覆盖)

图标、预处理器与浏览器支持已不可逆割裂

Bootstrap 3 内置 Glyphicons 字体图标,只需 <span class="glyphicon glyphicon-search"></span>;而 Bootstrap 5 完全不提供图标,必须自行引入 Font Awesome、Bootstrap Icons 或 SVG Sprite。

其他关键断裂点:

  • CSS 预处理:Bootstrap 3 用 Less,Bootstrap 5 只支持 Dart Sass(LibSass 已弃用),变量体系全量重写,@grid-columns → $grid-columns,且大量变量转为 CSS 自定义属性(--bs-body-color)
  • 浏览器支持:Bootstrap 5 明确放弃 IE 11 及以下,也不再 polyfill Flexbox 旧语法;Bootstrap 3 仍做 IE8+ 兼容(包括 box-sizing: border-box 的 hack)
  • 表单控件样式重绘:Bootstrap 5 的 <input type="checkbox"> 使用伪元素绘制,不依赖背景图;Bootstrap 3 仍用 sprite 图片,定制时需替换整套雪碧图

迁移时最容易被忽略的是 CSS 变量穿透和 JS 初始化时机——比如在 DOMContentLoaded 之前调用 bootstrap.Tooltip 会静默失败,而 Bootstrap 3 的 jQuery 插件对此容忍度更高。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

bootstrap

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2523

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5483

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6490

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

6118

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

863

5

bootstrap框架介绍
bootstrap框架介绍

本专题整合了bootstrap框架相关介绍,阅读专题下面的文章了解更多详细内容。

2026.03.18

705

21

bootstrap安装教程
bootstrap安装教程

本专题整合了bootstrap安装相关教程,阅读专题下面的文章了解更多详细操作教程。

2026.03.18

199

9

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

2026.10.16

60

10

OpenJDK怎么配置Java开发环境
OpenJDK怎么配置Java开发环境

怎样用OpenJDK搭建开发环境?本专题介绍版本选择、下载安装、环境变量配置和编译运行验证,帮助你理清JDK的作用及基本配置流程,并通过简单程序检查环境是否可用,为后续项目开发做好准备。

2026.10.16

20

10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap5 入门教程
Bootstrap5 入门教程

共0课时 | 0人学习

Bootstrap Components 组件文档
Bootstrap Components 组件文档

共0课时 | 0人学习

Bootstrap Grid 栅格系统
Bootstrap Grid 栅格系统

共0课时 | 0人学习