📌 第一部分：Bootstrap 概览与定位

1.1 定义与全称

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 于 2011 年创建的开源前端 UI 框架，是全球最流行的 HTML、CSS 和 JavaScript 框架。Bootstrap 的设计目标是 快速构建响应式、移动优先的 Web 界面。

1.2 核心定位

Bootstrap 的核心定位是 前端 UI 的标准化工具包。它提供了：

• 移动优先的响应式网格系统
• 丰富的 UI 组件（按钮、卡片、导航、模态框等）
• 可定制的主题和变量
• 完善的 JavaScript 插件
• 跨浏览器兼容性
• 强大的图标库（Bootstrap Icons）
• 详尽的官方文档

1.3 主要应用领域

• 快速原型开发： 快速搭建界面原型
• 管理后台： 企业管理系统、仪表板
• 营销网站： 产品展示页、落地页
• Web 应用： SaaS 产品界面
• 移动端 Web： 响应式移动网站
• WordPress 主题： 大量 WordPress 主题基于 Bootstrap

1.4 知名案例

• Twitter： Bootstrap 的发源地
• NASA： 部分 Web 界面使用 Bootstrap
• Spotify： 部分页面使用 Bootstrap
• Stack Overflow： 部分页面使用 Bootstrap
• 数百万网站： 全球使用 Bootstrap 的网站

---

📜 第二部分：Bootstrap 的历史与发展演进

2.1 诞生背景（2011年）

Bootstrap 最初是 Twitter 内部的一个工具库，用于统一内部项目的 UI 风格。2011 年 8 月，Bootstrap 正式开源，迅速成为 GitHub 上最受欢迎的项目之一。

2.2 关键版本里程碑

• Bootstrap 1.0（2011年）： 首次开源发布
• Bootstrap 2.0（2012年）： 响应式设计支持
• Bootstrap 3.0（2013年）： 移动优先——完全重写，移动优先设计
• Bootstrap 4.0（2018年）： 重大升级——Sass、Flexbox、卡片
• Bootstrap 5.0（2021年）： 最新版本——移除 jQuery、CSS 自定义属性
• Bootstrap 5.1（2021年）： 暗黑模式支持
• Bootstrap 5.2（2022年）： 更多实用工具
• Bootstrap 5.3（2023年）： 颜色模式增强
• Bootstrap 5.3.3（2024年）： 最新稳定版本

2.3 版本对比

特性	Bootstrap 3	Bootstrap 4	Bootstrap 5
预处理器	Less	Sass	Sass
布局	浮动	Flexbox	Flexbox + CSS Grid
jQuery	✅ 依赖	✅ 依赖	❌ 移除
暗黑模式	❌	❌	✅
IE 支持	IE8+	IE10+	❌ 不支持 IE

---

⚙️ 第三部分：核心特性

3.1 网格系统

<!-- 基础网格 -->
<div class="container">
    <div class="row">
        <div class="col-md-6">
            左侧内容（占 6 列）
        </div>
        <div class="col-md-6">
            右侧内容（占 6 列）
        </div>
    </div>
</div>

<!-- 三列等宽 -->
<div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
</div>

<!-- 响应式断点 -->
<!-- col-（所有设备）col-sm-（小屏以上）col-md-（中屏以上） -->
<!-- col-lg-（大屏以上）col-xl-（超大屏）col-xxl-（特大屏） -->

3.2 常用组件

<!-- 按钮 -->
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-success">成功按钮</button>
<button type="button" class="btn btn-danger">危险按钮</button>
<button type="button" class="btn btn-outline-primary">边框按钮</button>

<!-- 按钮组 -->
<div class="btn-group" role="group">
    <button type="button" class="btn btn-secondary">左</button>
    <button type="button" class="btn btn-secondary">中</button>
    <button type="button" class="btn btn-secondary">右</button>
</div>

<!-- 卡片 -->
<div class="card" style="width: 18rem;">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">卡片内容描述</p>
        <a href="#" class="btn btn-primary">前往</a>
    </div>
</div>

<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">网站名称</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link active" href="#">首页</a></li>
                <li class="nav-item"><a class="nav-link" href="#">关于</a></li>
                <li class="nav-item"><a class="nav-link" href="#">联系</a></li>
            </ul>
        </div>
    </div>
</nav>

<!-- 模态框 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    打开模态框
</button>
<div class="modal fade" id="exampleModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">模态框标题</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                模态框内容
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

3.3 实用工具类

<!-- 间距 -->
<div class="p-3">内边距 3</div>
<div class="m-3">外边距 3</div>
<div class="px-4">水平内边距 4</div>
<div class="my-2">垂直外边距 2</div>

<!-- 文本 -->
<p class="text-center">居中文本</p>
<p class="text-start">左对齐</p>
<p class="text-end">右对齐</p>
<p class="text-uppercase">大写文本</p>
<p class="text-lowercase">小写文本</p>
<p class="text-muted">灰色文本</p>

<!-- 颜色 -->
<div class="text-primary">主要颜色</div>
<div class="text-danger">危险颜色</div>
<div class="bg-success">成功背景色</div>
<div class="bg-warning">警告背景色</div>

<!-- 显示/隐藏 -->
<div class="d-none">隐藏</div>
<div class="d-block">显示为块级</div>
<div class="d-flex">显示为 Flex</div>
<div class="d-md-none">中屏以上隐藏</div>

<!-- Flexbox -->
<div class="d-flex justify-content-between align-items-center">
    <div>左侧</div>
    <div>右侧</div>
</div>

3.4 暗黑模式

<!-- 启用暗黑模式（Bootstrap 5.3+） -->
<html data-bs-theme="dark">

<!-- 自动跟随系统 -->
<html data-bs-theme="dark">

<!-- 使用 JavaScript 切换 -->
<script>
const theme = document.documentElement;
if (theme.getAttribute("data-bs-theme") === "dark") {
    theme.setAttribute("data-bs-theme", "light");
} else {
    theme.setAttribute("data-bs-theme", "dark");
}
</script>

---

⚖️ 第四部分：Bootstrap vs 其他框架

对比项	Bootstrap	Tailwind CSS	Foundation	Bulma
理念	组件优先	实用工具优先	组件优先	CSS 框架
CSS 大小	~30KB	~10KB（按需）	~40KB	~20KB
JavaScript 组件	✅ 丰富	❌ 无（需插件）	✅ 丰富	❌ 无
学习曲线	平缓	中等	中等	平缓
定制性	中等	极高	中等	高
社区大小	最大	快速增长	较大	中等
适用场景	通用项目	定制设计	企业项目	轻量项目

---

🧠 第五部分：学习建议

推荐学习资源

• Bootstrap 官方文档： getbootstrap.com
• Bootstrap 中文文档： bootstrap5.xyz
• Bootstrap Icons： icons.getbootstrap.com
• Bootstrap 主题： themes.getbootstrap.com

---

🎯 总结升华