bootstrap4.0与3.0有哪些区别

发布时间：2022-01-10 15:21:17 作者：iii
来源：亿速云阅读：427

# Bootstrap 4.0与3.0有哪些区别

Bootstrap作为最流行的前端框架之一，其4.0版本相较于3.0进行了全面升级。本文将从**核心架构**、**样式改进**、**组件变化**和**功能增强**四个方面详细对比两个版本的差异。

---

## 一、核心架构升级

### 1. 从Less转向Sass
- **Bootstrap 3**：使用Less作为CSS预处理器  
- **Bootstrap 4**：改用Sass（兼容LibSass和Dart Sass），提供更快的编译速度和模块化支持  
  ```scss
  // 示例：Sass变量定义
  $primary: #007bff;

2. Flexbox默认布局

3.x：基于浮动（float）布局

4.x：全面采用Flexbox模型，简化响应式设计


<div class="d-flex justify-content-between">
<div>Item 1</div>
<div>Item 2</div>
</div>

3. 网格系统重构

特性	Bootstrap 3	Bootstrap 4
最大列数	12列	12列（可自定义）
断点前缀	`col-xs-*`等	`col-*` + 新断点（如xl）
间隙处理	固定间距	支持间隙工具（gap类）

二、样式与基础类变化

1. 单位标准化

Rem替代px：主要单位从像素改为相对单位（1rem=16px）
字体基准：基础字体大小从14px调整为16px

2. 颜色系统扩展

新增多种颜色工具类：

<!-- 新增颜色示例 -->
<button class="btn btn-outline-primary">Outline</button>
<button class="btn btn-danger btn-sm">Small</button>

3. 工具类增强

间距工具：新增m-*（外边距）、p-*（内边距）系列
显示属性：d-none、d-md-block等响应式显示控制

三、组件改进与新增

1. 表单重制

组件	3.x特性	4.x改进
表单控件	基础样式	统一风格，支持`form-control-lg`
自定义表单	有限支持	新增`.custom-radio`等完整解决方案

2. 卡片替代Well/Panel

<!-- Bootstrap 3 -->
<div class="panel panel-default">
  <div class="panel-body">Content</div>
</div>

<!-- Bootstrap 4 -->
<div class="card">
  <div class="card-body">Content</div>
</div>

3. 导航与导航栏

新增navbar-light/navbar-dark主题
支持响应式折叠菜单自动布局

4. 新增组件

Tooltips/Popovers：依赖Popper.js实现更精准定位
滚动监听（Spy）：优化滚动区域检测

四、JavaScript与兼容性

1. jQuery依赖变化

Bootstrap 3：必须配合jQuery
Bootstrap 4：仍依赖jQuery但可选择性使用（部分功能可通过纯JS实现）

2. 浏览器支持

浏览器	3.x支持	4.x支持
IE	IE8+	IE10+
移动浏览器	基础支持	全面优化触控体验

3. 插件API改进

统一使用data-toggle属性：


<!-- 同时适用于模态框、下拉菜单等 -->
<button data-toggle="modal" data-target="#myModal">

五、迁移建议

逐步替换：优先从网格系统和工具类开始迁移
注意破坏性变更：
- 类名变更（如.img-responsive → .img-fluid）
- 废弃的组件（Glyphicons图标库需单独引入）
推荐工具：
```
npm install bootstrap@4.0.0
```

总结

Bootstrap 4通过现代化技术栈（Flexbox+Sass）和更精细的设计系统，提供了更强大的定制能力。虽然迁移需要一定成本，但其响应式改进和性能优化能显著提升开发效率。对于新项目，建议直接采用4.x版本；旧项目可根据需求评估逐步升级。

官方迁移指南：https://getbootstrap.com/docs/4.0/migration/ “`

（注：实际字符数约1300字，此处为简洁展示核心内容）