Bootstrap: Bootstrap 简介与安装
1. 本课导读
(1) 前置知识
- 掌握 HTML 基础标签（div、p、h1~h6、a、img）
- 了解 CSS 选择器和常用属性（color、margin、padding、font-size）
(2) 🎯 你将学到
- 理解 Bootstrap 是什么以及它的核心能力
- 学会通过 CDN 安装 Bootstrap 5.3
- 能独立搭建第一个 Bootstrap 页面
- 掌握 Bootstrap 版本选型对比
- 理解 Bootstrap class 命名规则
(3) 痛点
Alice 是一名刚学完 HTML 和 CSS 的初学者，她想做一个带导航栏、卡片、表格和轮播图的个人主页——但自己写 CSS 太慢了。
(4) 解法
Bootstrap 是目前最流行的前端 CSS 框架。它提供了一套完整的组件库和响应式网格系统，让你不用从头写 CSS 就能快速搭建美观、适配多端的网页。
理解方式： 写 CSS 就像自己买菜、切菜、炒菜；用 Bootstrap 就像叫外卖——你选好组件，它帮你把样式做好，你只管组装。
(5) 收益
使用 Bootstrap 后，Alice 只需引入 CDN、添加对应的 class，就能快速搭建出带导航栏、卡片、表格的专业页面。原本需要手写几百行 CSS 的工作量，现在只需几十行 HTML。
2. 什么是 Bootstrap
Bootstrap 最初由 Twitter 工程师 Mark Otto 和 Jacob Thornton 于 2011 年开发，原名 Twitter Blueprint。经过十几个大版本迭代，如今的 Bootstrap 5.3 已是一个成熟、稳定的框架。
(1) 核心特性
Bootstrap 提供了四大块能力：
| 能力 | 说明 | 示例 |
|---|---|---|
| 网格系统 | 12 列响应式布局，适配手机/平板/桌面 | col-md-6 col-lg-4 |
| 组件库 | 70+ 现成 HTML/CSS/JS 组件 | 按钮、卡片、导航栏、模态框 |
| 工具类 | 原子化 CSS 工具，免写自定义样式 | mt-3、text-center、d-flex |
| JS 插件 | 无需 jQuery，基于原生 JavaScript | 轮播、弹出框、折叠面板 |
(2) 与其他框架的对比
| 对比维度 | Bootstrap | Tailwind CSS | 纯手写 CSS |
|---|---|---|---|
| 学习曲线 | 低（class 命名直观） | 中高（大量工具类需记忆） | 高（须掌握布局/选择器/兼容性） |
| 开发速度 | 快 | 快 | 慢 |
| 定制自由度 | 中（Sass 变量覆盖） | 高（设计系统级定制） | 最高 |
| 文件体积 | 中（约30KB gzip） | 小（按需编译） | 视代码量而定 |
| 组件丰富度 | 70+ 组件 | 无内置组件 | 全需自建 |
| 适用场景 | 快速开发、管理后台、MVP | 设计系统、品牌定制 | 核心业务、性能极致 |
(3) 版本历史
timeline
title Bootstrap 版本历程
2011 : v2.0 : Twitter Blueprint 开源
2013 : v3.0 : 扁平化 + 移动优先
2018 : v4.0 : Flexbox 网格 + Sass
2021 : v5.0 : 弃 jQuery + CSS 变量
2023 : v5.3 : 暗色模式 + 强调色
输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。
3. 安装 Bootstrap
本教程前 15 课均使用 CDN 方式——不需要下载任何文件，只需在 HTML 中引入两行代码即可。
(1) 方式一：CDN 引入（推荐）
▶ 示例：CDN 引入基础模板
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Bootstrap Page</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, Bootstrap!</h1>
<p class="lead">This is my first Bootstrap page.</p>
<!-- Bootstrap JS + Popper (needed for interactive components) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。 关键点：
- CSS 放在
<head>中加载，JS 放在</body>前 bootstrap.bundle.min.js已包含 Popper.js（弹框类组件需要）- 使用
min版本（压缩版）减少加载时间
(2) 方式二：npm 安装（Phase 5 使用）
BASH
npm install bootstrap@5.3.3
TEXT
📖 仅展示
// import in JS entry file
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。 此方式需要在 Phase 5 结合 Sass 定制时使用，前期可跳过。
4. 完整页面示例
下面是一个完整的 Bootstrap 页面，包含了导航栏、按钮、卡片和网格布局：
▶ 示例：个人主页综合模板
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Demo - Alice's Portfolio</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container">
<a class="navbar-brand" href="#">Alice</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<div class="bg-primary text-white text-center py-5">
<div class="container">
<h1 class="display-4">Hi, I'm Alice</h1>
<p class="lead">A web developer who loves building clean, responsive websites.</p>
<a href="#" class="btn btn-light btn-lg">View My Work</a>
</div>
</div>
<!-- Cards -->
<div class="container my-5">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Web Design</h5>
<p class="card-text">Clean and modern interfaces built with Bootstrap.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Responsive Layout</h5>
<p class="card-text">Works perfectly on mobile, tablet, and desktop.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">UI Components</h5>
<p class="card-text">Over 70 ready-to-use components at your fingertips.</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。 这段代码只有约 40 行 HTML——如果用纯 CSS 手写，至少需要 150 行以上。
5. Bootstrap 的 class 命名规则
Bootstrap 的 class 命名遵循固定模式，理解这个模式后你就能"猜"出大部分 class 名：
TEXT
📖 仅展示
{property}{direction}-{size}-{value}
| 部分 | 含义 | 示例 |
|---|---|---|
property |
属性缩写 | m=margin, p=padding, text=text-align |
direction |
方向（可选） | t=top, b=bottom, s=start, e=end |
size |
断点（可选） | sm, md, lg, xl, xxl |
value |
值 | 0 ~ 5, auto, center, start |
例如 mt-md-3 = 在 md 及以上屏幕设置 margin-top: 1rem。这个命名体系贯穿整个 Bootstrap，后续课程会逐一展开。
(1) Bootstrap vs 纯 CSS 开发效率对比
| 场景 | 原生 CSS | Bootstrap | 时间节省 |
|---|---|---|---|
| 响应式三列网格 | 40+ 行媒体查询 | 1 行 row-cols-md-3 |
~90% |
| 导航栏 + 折叠菜单 | 80+ 行 CSS + JS | 1 个 navbar 组件 |
~85% |
| 卡片式布局 | 60+ 行 CSS | 1 个 card 组件 |
~95% |
| 表单验证样式 | 30+ 行 CSS | was-validated class |
~90% |
(2) Bootstrap 版本选型对比
| 版本 | jQuery | CSS 变量 | 暗色模式 | 网格 | IE 支持 |
|---|---|---|---|---|---|
| v4.6 | 必需 | 无 | 无 | Flexbox | ✅ |
| v5.0 | 移除 | 新增 | 无 | Flexbox + xxl | ❌ |
| v5.3 | 移除 | 增强 | ✅ | Flexbox + CSS Grid helpers | ❌ |
▶ 示例：验证 Bootstrap 是否加载成功
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Verify Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container text-center py-5">
<div class="spinner-border text-primary mb-3" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<h3>Bootstrap 5.3.3 is loaded</h3>
<p class="text-success"><strong>✓</strong> CSS is working</p>
<button class="btn btn-primary" onclick="alert('JS is working!')">Test JS</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。
▶ 示例：快速使用常用组件
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Components</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
<span class="badge bg-primary">New</span>
<span class="badge bg-success">Active</span>
<span class="badge bg-danger">Expired</span>
<div class="progress mt-3" style="height: 20px;">
<div class="progress-bar bg-success" style="width: 75%">75% Complete</div>
</div>
<div class="alert alert-info mt-3">Info alert with an <a href="#" class="alert-link">example link</a>.</div>
</div>
</body>
</html>
输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。
▶ 示例：开发者工具调试技巧
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DevTools Practice</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
<h1>DevTools Practice</h1>
<p class="text-muted">Open DevTools (F12) and inspect these Bootstrap elements.</p>
<div class="row">
<div class="col-4"><div class="bg-primary text-white p-3 rounded">Col 1</div></div>
<div class="col-4"><div class="bg-success text-white p-3 rounded">Col 2</div></div>
<div class="col-4"><div class="bg-info text-white p-3 rounded">Col 3</div></div>
</div>
</div>
</body>
</html>
输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。
❓ 常见问题
Q Bootstrap 5 需要 jQuery 吗？
A 完全不需要。Bootstrap 5 彻底移除了 jQuery 依赖，所有 JS 插件都基于原生 JavaScript 实现。你只需要引入
bootstrap.bundle.min.js 即可使用所有交互组件。Q 我应该用 Bootstrap 还是 Tailwind？
A 追求开发速度和组件丰富度选 Bootstrap；需要高度定制化设计系统、品牌风格严格的选 Tailwind。作为学习路径，推荐先学 Bootstrap（门槛低、社区大、找工作有优势），再学 Tailwind。
Q 页面加载 CDN 会很慢吗？
A Bootstrap 的 CDN 文件来自 jsDelivr 全球加速网络，国内有节点。CSS 压缩后约 28KB，JS 约 22KB，对页面加载影响很小。浏览器还会缓存 CDN 文件，后续页面无需重复下载。
Q 我没学过 JavaScript，能用 Bootstrap 吗？
A 可以。Bootstrap 的 CSS 部分（网格、排版、按钮、卡片等）完全可以脱离 JS 使用。Phase 1-2 全部是 CSS 内容，不需要任何 JS 知识。
Q Bootstrap 5 和 4 的主要区别是什么？
A Bootstrap 5 移除了 jQuery 依赖、增加了 CSS 自定义属性支持、改进了网格系统（新增 xxl 断点）、增加了暗色模式，并移除了对 IE 的支持。如果从 v4 迁移，需要注意
left/right 改为 start/end 等变化。Q 使用 CDN 方式会有单点故障风险吗？
A 可以通过多 CDN 回退策略解决。在主 CDN 加载失败时 fallback 到备选 CDN，或者使用
integrity 属性校验文件完整性。生产环境也可考虑将 Bootstrap 文件托管在自己的 CDN 上。📖 小节
- Bootstrap 是一个 CSS 框架，提供网格系统 + 组件库 + 工具类 + JS 插件
- 相比纯手写 CSS，开发速度提升明显，适合快速构建响应式页面
- 推荐使用 CDN 方式引入：一个
<link>+ 一个<script>即可开始 - class 命名遵循
{property}{direction}-{size}-{value}模式，易于记忆
📝 作业
- ⭐ 新建一个 HTML 文件，用 CDN 方式引入 Bootstrap 5.3.3，在页面中放一个
<h1>和<p class="lead">，观察默认字体和间距效果。 - ⭐⭐ 参考"动手试"示例，创建一个包含导航栏 + 三张卡片的个人主页，替换文字为你自己的信息。
- ⭐⭐⭐ 在浏览器中打开开发者工具（F12），查看 Bootstrap 的 CSS 是如何作用在元素上的——注意
:root中的 CSS 变量。
下一课： 容器
