bootstrap3和bootstrap4有哪些区别

# Bootstrap 3和Bootstrap 4有哪些区别

Bootstrap作为最流行的前端框架之一，经历了多次版本迭代。Bootstrap 4在2018年发布，相比Bootstrap 3进行了全面升级。以下是两者之间的主要区别：

---

## 一、核心架构差异

### 1. CSS预处理器
- **Bootstrap 3**：使用Less作为CSS预处理器
- **Bootstrap 4**：改用Sass（SCSS语法），与现代前端工具链更兼容

### 2. 浏览器支持
- **Bootstrap 3**：支持IE8+
- **Bootstrap 4**：放弃IE8支持，最低要求IE10+，全面拥抱现代浏览器

### 3. 默认单位
- **Bootstrap 3**：使用`px`作为主要单位
- **Bootstrap 4**：改用`rem`（根相对单位），更易于响应式缩放

---

## 二、栅格系统改进

### 1. 新增响应断点
```html
<!-- Bootstrap 3 -->
<div class="col-md-6"></div>

<!-- Bootstrap 4 -->
<div class="col-lg-6"></div>

• 新增xl（≥1200px）超大屏幕断点
• 断点命名更语义化：xs→sm→md→lg→xl

2. Flexbox布局

• Bootstrap 4默认采用Flexbox实现栅格系统，支持：
  • 垂直对齐控制（align-items-*）
  • 自动等宽列（col）
  • 更灵活的顺序控制（order-*）

三、组件变化

1. 新增组件

• 卡片（Card）：替代Bootstrap 3的panel/well/thumbnail
• Flexbox工具类：快速实现弹性布局

2. 移除/重命名组件

• 移除：Glyphicons图标库
• 重命名：
  • .img-responsive → .img-fluid
  • .input-lg → .form-control-lg

3. 表单重构

• 所有表单元素默认采用display: block
• 新增custom-*系列类实现自定义表单样式

四、工具类增强

1. 间距工具

/* Bootstrap 4新增 */
.mt-3 { margin-top: 1rem; }
.px-2 { padding-left/right: 0.5rem; }

2. 响应式显示工具

<!-- Bootstrap 4新增 -->
<div class="d-none d-md-block"></div>

3. 颜色系统

• 扩展颜色工具类（如bg-dark、text-white）
• 新增transparent透明颜色

五、JavaScript改进

1. 插件重写

• 所有JS插件使用ES6重构
• 事件命名空间更规范（如show.bs.modal）

2. 依赖变化

• 从依赖jQuery改为可选的jQuery依赖
• Popper.js成为工具提示和弹出框的必需依赖

六、迁移建议

1. 逐步替换：优先替换已弃用的组件
2. 注意断点：调整响应式类名（如col-xs-*→col-*）
3. 图标方案：推荐使用Font Awesome替代Glyphicons
4. 工具类转换：将center-block改为Flexbox方案

总结

Bootstrap 4通过采用现代CSS技术（Flexbox/Sass）、优化栅格系统、增强工具类等改进，提供了更强大的定制能力和开发体验。对于新项目建议直接使用Bootstrap 5（2020年发布），但了解3到4的升级变化仍是理解框架演进的关键。

注意：Bootstrap 5已进一步移除jQuery依赖并新增CSS自定义属性支持，建议持续关注最新版本。 “`

这篇文章约800字，采用Markdown格式，包含代码示例和层级标题，覆盖了架构、组件、工具类等核心差异点。需要调整细节或补充内容可以随时告知。