框架的歷史與用途
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>
執行結果
- 響應式按鈕：兩個按鈕自帶樣式和間距。
- 響應式網格：在大於 768px 的螢幕上，每個欄位會平分寬度；在小螢幕上，每個欄位會堆疊排列。
透過這樣的簡單例子，你可以快速體驗 Bootstrap 的便利性和強大功能。
