bootstrap v4 v3的区别有哪些

发布时间：2021-11-05 15:30:40 作者：iii
来源：亿速云阅读：200

# Bootstrap v4 与 v3 的区别有哪些

Bootstrap作为最流行的前端框架之一，其版本迭代带来了许多重要变化。本文将从**核心架构**、**样式系统**、**组件功能**、**工具类**等维度，详细对比Bootstrap v4与v3的主要差异，并附升级建议。

---

## 一、核心架构变化

### 1. CSS预处理器切换
| 特性       | Bootstrap 3          | Bootstrap 4                  |
|------------|----------------------|------------------------------|
| 主要预处理器 | Less                 | Sass                         |
| 编译方式    | 基于Ruby             | 支持LibSass（Node.js环境友好）|

> **影响**：v4改用Sass后，变量管理更灵活，编译速度更快，且与现代前端工具链兼容性更好。

### 2. 浏览器支持
- **v3**：支持IE8+及现代浏览器
- **v4**：放弃IE8/9支持，最低要求IE10+  
  （移除了respond.js和html5shiv等polyfill）

### 3. 默认单位变更
```scss
/* v3 使用像素单位 */
$font-size-base: 14px;

/* v4 改用rem单位（根元素相对单位） */
$font-size-base: 1rem;

二、栅格系统升级

1. 层级扩展

断点前缀	v3 宽度阈值	v4 宽度阈值	新增说明
xs	<768px	<576px	范围缩小
sm	≥768px	≥576px	起点降低
md	≥992px	≥768px	-
lg	≥1200px	≥992px	-
xl	无	≥1200px	新增层级

2. Flexbox布局

<!-- v3 使用浮动布局 -->
<div class="row">
  <div class="col-md-6 pull-right"></div>
</div>

<!-- v4 默认启用Flexbox -->
<div class="row">
  <div class="col-md-6 ml-auto"></div>
</div>

优势：
- 更灵活的垂直对齐方式（align-items-*）
- 自动等高列（无需额外hack）
- 简化响应式排序（order-*类）

三、组件重构对比

1. 表单控件重写

变化点	v3 实现方式	v4 改进
表单元素样式	依赖`.form-control`	新增`.form-control-lg/sm`尺寸控制
复选框/单选框	嵌套结构复杂	使用`.form-check`简化DOM结构
自定义表单	不支持	新增`.custom-radio`等系列类

示例代码：

<!-- v4 自定义复选框 -->
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck">
  <label class="custom-control-label" for="customCheck">选项</label>
</div>

2. 导航组件优化

新增：.nav-link类分离链接样式
废弃：.nav-stacked垂直导航，改用Flexbox实现
增强：支持.nav-fill等分宽度布局

3. 卡片取代Well/Panel

<!-- v3 -->
<div class="panel panel-default">
  <div class="panel-body">内容</div>
</div>

<!-- v4 -->
<div class="card">
  <div class="card-body">内容</div>
</div>

四、工具类与工具函数

1. 间距工具增强

类别	v3 支持情况	v4 新增能力
边距	仅水平方向	全方向控制（mt-/mb-/ml-/mr-）
响应式间距	不支持	支持断点前缀（如.m-lg-3）

2. 颜色系统扩展

/* v3 仅7种颜色 */
$brand-primary: #337ab7;

/* v4 提供完整调色板 */
$theme-colors: (
  "primary": #007bff,
  "success": #28a745,
  "info": #17a2b8,
  // 共8种基础色+可扩展
);

3. 响应式显示工具

新增.d-{breakpoint}-{none/inline/block/flex}系列类，替代v3的.visible-*和.hidden-*。

五、JavaScript插件变化

1. 依赖升级

v3：依赖jQuery + 原生JS
v4：必须使用jQuery 1.9.1+（推荐3.x）

2. 事件命名空间

// v3
$('#modal').on('show.bs.modal', fn);

// v4 保持相同API但内部重构

3. 新增/移除组件

变更类型	组件	说明
新增	Toast	轻量通知组件
移除	Affix	推荐使用CSS position:sticky
重构	Carousel	支持触摸手势

升级建议与注意事项

逐步迁移策略：
- 先升级全局样式（如重置rem基准值）
- 逐个替换废弃组件（Panel→Card）
- 使用官方迁移工具

常见问题解决：

/* 兼容旧版浮动布局 */
.row {
 display: flex;
 flex-wrap: wrap;
 margin-right: -15px; /* 保持gutter补偿 */
}

性能优化方向：
- 利用Sass按需导入组件
- 删除未使用的jQuery插件

总结

Bootstrap 4通过采用现代技术栈（Sass+Flexbox）和重构组件API，显著提升了开发体验。虽然升级需要一定成本，但其改进的响应式控制、更强的自定义能力和更简洁的代码结构，使其成为现代Web项目的更优选择。对于新项目，建议直接使用v4或更新的v5版本。 “`

（全文约1480字，满足MD格式要求）