Bootstrap 框架体系总览

一、Bootstrap 是什么

Bootstrap 是由 Twitter（现为 X）开发并开源的前端 UI 框架。它把常见的 HTML 结构、CSS 样式和 JavaScript 交互封装成可复用的组件与工具类，让开发者能够快速搭建响应式、移动设备优先的网页。

1.1 核心特点

移动设备优先：从 Bootstrap 3 开始，所有样式都围绕移动端优先设计，再通过断点向上扩展。
响应式栅格系统：12 列栅格 + 5 个断点，覆盖手机、平板、笔记本和桌面大屏。
预制组件丰富：导航、按钮、表单、卡片、轮播、模态框等开箱即用。
JavaScript 插件完善：基于原生 JS（BS5 已移除 jQuery 依赖）实现交互组件。
可定制性强：通过 Sass 变量、颜色主题、工具类可以快速定制风格。
浏览器兼容好：Bootstrap 5 支持 Chrome、Firefox、Safari、Edge 等主流浏览器。

1.2 常见版本说明

版本	发布时间	主要特点	jQuery 依赖
Bootstrap 3	2013	移动优先成熟版，使用 float 布局	需要
Bootstrap 4	2018	引入 Flexbox、Sass、卡片组件	需要
Bootstrap 5	2021	移除 jQuery、原生 JS 驱动、更轻量	不需要

本系列以 Bootstrap 4/5 通用知识为主，示例代码会标注版本差异。

二、Bootstrap 知识体系结构

学习 Bootstrap 建议按照以下七大部分循序渐进：

2.1 核心概念与快速开始

需要掌握：

Bootstrap 的下载与引入方式（CDN、npm、本地文件）
HTML 模板结构（viewport、CSS 文件、JS 文件）
容器 .container 与 .container-fluid 的区别
断点系统与响应式设计思想

2.2 栅格系统

需要掌握：

12 列栅格原理
.col、.col-*、.col-sm-*、.col-md-*、.col-lg-*、.col-xl-* 的用法
等宽列、固定宽度列、自动宽度列
列偏移 .offset-* 与 margin 偏移
列排序 .order-*
列嵌套与实战布局

2.3 CSS 样式与排版

需要掌握：

排版：标题、段落、列表、文本颜色与对齐
表格：.table、条纹、边框、响应式表格
表单：表单控件、表单布局、校验样式
按钮：样式、尺寸、状态、按钮组
图片与辅助类：圆角、缩略图、浮动、显示隐藏

2.4 组件系统

常用组件包括：

导航与导航栏（Nav / Navbar）
面包屑与分页
卡片（Card）
轮播（Carousel）
模态框（Modal）
折叠（Collapse）与手风琴
下拉菜单（Dropdown）
徽章、警告框、进度条、列表组

2.5 Flexbox 弹性盒子布局

Bootstrap 4/5 全面采用 Flexbox，需要掌握：

d-flex 与 d-inline-flex
主轴方向：flex-row、flex-column 及反向
对齐方式：justify-content-*、align-items-*、align-self-*
伸缩行为：flex-fill、flex-grow-*、flex-shrink-*、flex-wrap-*
响应式 Flexbox 类

2.6 JavaScript 插件

需要掌握：

弹窗 Modal
轮播 Carousel
折叠 Collapse
下拉菜单 Dropdown
工具提示 Tooltip 与弹出框 Popover
滚动监听 Scrollspy

2.7 实战与定制

使用 Sass 变量定制主题色、间距、字体
通过 Bootstrap 官方主题生成器定制
结合真实项目完成响应式页面
性能优化与按需引入

三、学习路径建议

如果你是 Bootstrap 初学者，建议按以下顺序阅读本系列文章：

Bootstrap 框架体系总览（本文）——建立全局认识
Bootstrap 核心概念与快速开始——学会搭建项目与基础结构
Bootstrap 栅格系统深度解析——掌握响应式布局核心
Bootstrap CSS 样式与排版——学会内容样式化
Bootstrap 组件系统——学会使用现成组件
Bootstrap 弹性盒子布局——深入理解 Flexbox 布局
Bootstrap JavaScript 插件——学会交互组件
Bootstrap 实战与定制——完成综合项目

四、引入 Bootstrap 的三种方式

4.1 通过 CDN 引入（最快上手）

Bootstrap 5：

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 5 页面</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <h1>Hello, Bootstrap!</h1>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

4.2 通过 npm 引入（工程化项目）

1	npm install bootstrap

1
2
3

// main.js
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'

4.3 本地文件引入

下载 Bootstrap 压缩包，解压后将 css/ 和 js/ 文件夹复制到项目中：

1 2	<link rel="stylesheet" href="./css/bootstrap.min.css"> <script src="./js/bootstrap.bundle.min.js"></script>

五、基础 HTML 模板

以下是一个标准的 Bootstrap 页面骨架：

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 基础模板</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1 class="mt-5">欢迎使用 Bootstrap</h1>
    <p class="lead">这是一个响应式前端框架。</p>
    <button class="btn btn-primary">点击我</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

关键点说明：

<meta name="viewport">：必须添加，否则移动设备无法正确缩放。
.container：包裹主内容，提供水平内边距和最大宽度约束。
CSS 放在 <head> 中：确保样式优先加载。
JS 放在页面底部：避免阻塞页面渲染。

六、后续章节导航

章节	标题	核心内容
第1章	核心概念与快速开始	容器、断点、模板结构
第2章	栅格系统深度解析	12列、响应式、偏移、排序、嵌套
第3章	CSS 样式与排版	排版、表格、表单、按钮、辅助类
第4章	组件系统	导航、卡片、轮播、模态框、折叠
第5章	弹性盒子布局	Flexbox 完整类与实战
第6章	JavaScript 插件	弹窗、轮播、折叠、工具提示
第7章	实战与定制	Sass 定制、综合项目