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格式，包含代碼示例和層級標題，覆蓋了架構、組件、工具類等核心差異點。需要調整細節或補充內容可以隨時告知。