期權練功坊
陳Solomen
更新於 2024/12/09閱讀時間約 6 分鐘

什麼是 Bootstrap？

raw-image


框架的歷史與用途

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

Bootstrap 的重要里程碑

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

用途

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

為什麼選用 Bootstrap

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

簡單範例：使用 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>


執行結果

  1. 響應式按鈕：兩個按鈕自帶樣式和間距。
  2. 響應式網格：在大於 768px 的螢幕上，每個欄位會平分寬度；在小螢幕上，每個欄位會堆疊排列。


透過這樣的簡單例子，你可以快速體驗 Bootstrap 的便利性和強大功能。



分享至
成為作者繼續創作的動力吧！
期權練功坊
追蹤
期權練功坊
追蹤
從 Google News 追蹤更多 vocus 的最新精選內容從 Google News 追蹤更多 vocus 的最新精選內容

作者的相關文章

你可能也想看

發表回應

成為會員 後即可發表留言
© 2024 vocus All rights reserved.