一、Bootstrap 簡介
Bootstrap 是一個開源的前端框架，由 Twitter 開發，旨在快速開發響應式、移動優先的 Web 頁面。它包含 HTML、CSS 和 JavaScript 組件，如按鈕、導航欄、表單等。
二、Bootstrap 安裝方式
2.1 使用 CDN（推薦入門）
無需下載任何文件，直接在 HTML 中引入 CDN 鏈接：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Bootstrap 示例</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><h1 class="text-center text-primary">Hello, Bootstrap!</h1><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
2.2 本地安裝
方法一：官網下載
- 訪問官網：https://getbootstrap.com/
- 點擊下載 → 選擇 Compiled CSS and JS
- 解壓后包含：
bootstrap.min.cssbootstrap.bundle.min.js
將文件放入項目中并在 HTML 中引用：
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.bundle.min.js"></script>
方法二：使用 npm 安裝
npm install bootstrap
三、基礎使用示例
3.1 柵格系統（Grid）
<div class="container"><div class="row"><div class="col-md-6 bg-info">左側</div><div class="col-md-6 bg-warning">右側</div></div>
</div>
3.2 按鈕
<button class="btn btn-primary">主要按鈕</button>
<button class="btn btn-secondary">次要按鈕</button>
3.3 表單
<form><div class="mb-3"><label class="form-label">郵箱地址</label><input type="email" class="form-control" placeholder="輸入郵箱"></div>
</form>
四、Bootstrap 樣式類常見分類
| 分類 | 示例類名 |
|---|---|
| 顏色類 | text-primary、bg-success |
| 排版類 | text-center、fw-bold |
| 間距類 | m-3、p-2、mt-5 |
| 邊框類 | border、rounded |
| 顯示控制類 | d-none、d-flex |
五、響應式設計
Bootstrap 默認響應式布局，支持斷點類：
col-sm-6（小屏及以上）col-md-6（中等屏及以上）col-lg-6（大屏及以上）col-xl-6（超大屏）
示例：
<div class="row"><div class="col-sm-12 col-md-6">左</div><div class="col-sm-12 col-md-6">右</div>
</div>
六、常見問題
Q1: 樣式不生效？
- 檢查是否正確引入了 Bootstrap 的 CSS 和 JS 文件
- 如果使用組件，如下拉菜單，JS 也必須正確引入
Q2: 自定義樣式覆蓋 Bootstrap？
- 使用自定義類名
- 或在 Bootstrap 引入之后單獨引入自定義樣式
七、學習資源推薦
- Bootstrap 官方文檔
- Bootstrap 中文網
- 菜鳥教程 Bootstrap 教程
本文由“小奇Java面試”原創發布，轉載請注明出處。
可以搜索【小奇JAVA面試】第一時間閱讀，回復【資料】獲取福利，回復【項目】獲取項目源碼，回復【簡歷模板】獲取簡歷模板，回復【學習路線圖】獲取學習路線圖。
![[C語言]存儲結構詳解](http://pic.xiahunao.cn/[C語言]存儲結構詳解)
