Bootstrap #

什么是 Bootstrap？ #

Bootstrap 是全球最流行的前端 UI 框架，由 Twitter 公司开发并开源。它提供了一套响应式、移动设备优先的 CSS 和 JavaScript 组件，帮助开发者快速构建现代化的网站和 Web 应用。

核心特点 #

特点 说明
响应式设计 自适应各种屏幕尺寸，从手机到桌面端
移动优先 以移动设备为基准，逐步增强桌面体验
丰富的组件 内置数十个常用 UI 组件
强大的栅格系统 灵活的 12 列栅格布局系统
Sass 支持 使用 Sass 变量和 Mixin 轻松定制
完善的文档 详尽的官方文档和示例代码

文档结构 #

本指南按以下结构组织，循序渐进地帮助你掌握 Bootstrap：

1. 入门基础 #

主题 描述 文档链接
Bootstrap 简介 了解 Bootstrap 的历史、特点和优势 intro.md
快速开始 安装、引入和创建第一个页面 getting-started.md

2. 核心概念 #

主题 描述 文档链接
栅格系统 响应式布局的核心：12列栅格系统 grid-system.md
排版 标题、段落、列表等文本样式 typography.md
颜色系统 主题色、背景色、文本颜色 colors.md

3. 基础组件 #

主题 描述 文档链接
按钮 各种样式和尺寸的按钮组件 buttons.md
表单 输入框、选择框、表单布局 forms.md
导航栏 响应式导航栏组件 navbar.md
卡片 内容展示卡片组件 cards.md

4. 进阶组件 #

主题 描述 文档链接
模态框 弹窗对话框组件 modal.md
轮播图 图片轮播组件 carousel.md
下拉菜单 下拉选择和导航菜单 dropdown.md
标签页 选项卡切换组件 tabs.md

5. 工具与实用类 #

主题 描述 文档链接
工具类 间距、边框、显示等实用类 utilities.md
Flexbox Flex 布局工具类 flex.md
间距系统 Margin 和 Padding 工具类 spacing.md

6. 高级定制 #

主题 描述 文档链接
自定义主题 使用 Sass 变量定制主题 customization.md
高级用法 扩展组件、性能优化 advanced.md

学习路径 #

入门阶段（Bootstrap 新手） #

  1. 了解 Bootstrap 的基本概念和优势
  2. 学习如何引入 Bootstrap
  3. 掌握栅格系统的使用
  4. 了解响应式断点
  5. 创建第一个响应式页面

进阶阶段（Bootstrap 熟练） #

  1. 掌握常用组件的使用
  2. 学习表单和导航栏
  3. 理解颜色系统和排版
  4. 使用工具类快速调整样式
  5. 构建完整的页面布局

高级阶段（Bootstrap 专家） #

  1. 深入理解栅格系统原理
  2. 掌握所有组件的高级用法
  3. 学习 JavaScript 插件的 API
  4. 自定义主题和样式
  5. 性能优化和最佳实践

大师阶段（Bootstrap 大师） #

  1. 构建企业级 UI 组件库
  2. 开发自定义 Bootstrap 主题
  3. 与其他框架深度集成
  4. 贡献开源社区
  5. 持续关注最新版本特性

Bootstrap 版本对比 #

特性 Bootstrap 5 Bootstrap 4 Bootstrap 3
发布年份 2021 2018 2013
依赖 jQuery 否 是 是
CSS 预处理器 Sass Sass Less/Sass
栅格系统 6 层断点 5 层断点 4 层断点
Flexbox 完全支持 支持 不支持
CSS Grid 支持 有限 不支持
RTL 支持 是 否 否
图标库 Bootstrap Icons 无内置 Glyphicons

本指南基于 Bootstrap 5 编写，推荐使用最新版本以获得最佳体验。

快速开始示例 #

html 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 示例</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container">
      <a class="navbar-brand" href="#">我的网站</a>
    </div>
  </nav>

  <div class="container mt-5">
    <div class="row">
      <div class="col-md-8">
        <h1>欢迎来到 Bootstrap</h1>
        <p class="lead">构建响应式、移动优先的网站</p>
        <button class="btn btn-primary">开始使用</button>
      </div>
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">卡片标题</h5>
            <p class="card-text">卡片内容示例</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Bootstrap vs 其他框架 #

特性 Bootstrap Tailwind CSS Material UI Ant Design
类型 组件框架 原子化 CSS React 组件库 React 组件库
学习曲线 低 中 中 中
定制性 中 高 高 高
文件大小 中 可变 大 大
设计风格 经典 无预设 Material 企业级
适用场景 通用 通用 React 项目 React 项目

资源推荐 #

贡献指南 #

欢迎对本指南进行贡献！如果你发现错误或有改进建议，请联系我们。

更新日志 #

  • 2026-03-28：创建初始版本，包含完整的 Bootstrap 学习大纲

继续探索本指南，逐步掌握 Bootstrap 技术，从新手成长为前端开发专家！

最后更新：2026-03-28