bootstrap v4 v3的區別有哪些

# 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. 層級擴展

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. 表單控件重寫

示例代碼：

<!-- 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. 間距工具增強

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. 新增/移除組件

升級建議與注意事項

1. 逐步遷移策略：

   • 先升級全局樣式（如重置rem基準值）
   • 逐個替換廢棄組件（Panel→Card）
   • 使用官方遷移工具

2. 常見問題解決：

   /* 兼容舊版浮動布局 */
   .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px; /* 保持gutter補償 */
   }
   

3. 性能優化方向：

   • 利用Sass按需導入組件
   • 刪除未使用的jQuery插件

總結

Bootstrap 4通過采用現代技術棧（Sass+Flexbox）和重構組件API，顯著提升了開發體驗。雖然升級需要一定成本，但其改進的響應式控制、更強的自定義能力和更簡潔的代碼結構，使其成為現代Web項目的更優選擇。對于新項目，建議直接使用v4或更新的v5版本。 “`

（全文約1480字，滿足MD格式要求）