什麼是 Bootstrap？

更新於 2024/12/09發佈於 2024/12/09閱讀時間約 6 分鐘

框架的歷史與用途

Bootstrap 是一個由 Twitter 開發的開源前端框架，最初由 Mark Otto 和 Jacob Thornton 在 2011 年發布，目的是幫助開發者快速設計響應式網頁。Bootstrap 的主要特色是提供一組預設的 HTML、CSS 和 JavaScript 元件，簡化開發流程，提升效率。

Bootstrap 的重要里程碑

2011 年 - 發布第一版，命名為 "Twitter Bootstrap"。
2013 年 - 發布 3.0，全面支援響應式設計。
2018 年 - 4.0 推出，採用 Flexbox，增強現代設計。
2021 年 - 發布 Bootstrap 5，移除了對 jQuery 的依賴，採用原生 JavaScript，全面支援 CSS Grid。

用途

快速建立響應式網頁：
- 提供網格系統 (Grid System) 和中斷點，讓網頁在不同裝置上顯示良好。
統一設計風格：
- 預設樣式讓按鈕、表單、卡片等元素有一致的外觀。
增強互動性：
- JavaScript 元件如模態框、輪播圖、下拉選單，快速增加功能。

為什麼選用 Bootstrap

節省開發時間
- 提供現成的樣式和元件，開發者可以專注於功能設計。
- 不需要從零開始設計 UI，只需使用預設的類別名稱。
響應式設計
- 提供強大的響應式功能，適配手機、平板和桌面等多種裝置。
- 使用網格系統快速布局，隨需調整大小和排列方式。
廣泛支援與社群
- 由於 Bootstrap 的流行性，網上有大量的範例、插件和支援資源。
- 擁有活躍的開發社群，能快速解決問題。
高擴展性
- 可以根據項目需求自訂樣式或覆寫預設樣式。
- 與其他框架（如 Angular、React）和後端技術（如 ASP.NET Core）無縫整合。
穩定和兼容性高
- 定期更新，支援最新的瀏覽器技術。
- 保持對大部分主流瀏覽器的良好支援。

簡單範例：使用 Bootstrap 創建響應式按鈕

以下是一個簡單範例，展示如何使用 Bootstrap 的按鈕和網格系統

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Example</title>
  <!-- 引入 Bootstrap CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-5">
    <h1 class="text-center">歡迎使用 Bootstrap</h1>
    <p class="text-center">Bootstrap 是建立響應式網頁的快速解決方案！</p>
    <!-- 按鈕組 -->
    <div class="d-flex justify-content-center">
      <button class="btn btn-primary me-2">主要按鈕</button>
      <button class="btn btn-secondary">次要按鈕</button>
    </div>
    <!-- 響應式網格 -->
    <div class="row mt-4">
      <div class="col-md-4 bg-primary text-white text-center p-3">欄位 1</div>
      <div class="col-md-4 bg-secondary text-white text-center p-3">欄位 2</div>
      <div class="col-md-4 bg-success text-white text-center p-3">欄位 3</div>
    </div>
  </div>
  <!-- 引入 Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>