Bootstrap是目前全球最受欢迎的前端开源工具库，由Twitter的Mark Otto和Jacob Thornton于2011年创建。经过十余年的发展，它已经从最初的项目管理工具演变为前端开发的事实标准之一。Bootstrap基于HTML5和CSS3，提供了现成可用的HTML元素、CSS样式和JavaScript插件，极大地提高了Web前端开发效率。
2026年，Bootstrap生态迎来了重要里程碑：官方宣布Bootstrap Themes市场正式关闭，团队将更多精力集中在框架核心功能的迭代上。最新稳定版本为v5.3.8，下一个主要版本v5.4.0正在紧锣密鼓地开发中。本文将系统全面地梳理Bootstrap 5的核心知识点，从基础概念到高级特性，从栅格系统到JavaScript插件，帮助读者建立完整的知识体系。
一、Bootstrap概述
1.1 什么是Bootstrap
Bootstrap是一个用于快速开发响应式、移动优先的Web项目的开源前端框架。它包含了CSS和JavaScript设计的模板，用于排版、表单、按钮、导航、表格、模态框、图片轮播等界面组件。
Bootstrap 5的核心特性：
1.2 Bootstrap 5 vs Bootstrap 4：核心变化
Bootstrap 5是该框架历史上最大的一次更新，最显著的变化是彻底移除了jQuery依赖，所有JavaScript组件使用原生ES6+语法重写。
关键升级要点：
所有data-属性改为data-bs-前缀（如data-bs-toggle替代data-toggle）
间距工具类从ml-3改为ms-3、mr-3改为me-3，以支持RTL（从右到左）布局
表单验证样式依赖浏览器原生:valid/:invalid伪类
字体大小工具类改为fs-前缀（fs-1到fs-6）
不再支持IE浏览器
*1.3 环境搭建
通过CDN引入（最快方式）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 快速上手</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 页面内容 -->
<h1>Hello, Bootstrap!</h1>
<!-- Bootstrap JS Bundle（包含Popper） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
通过npm安装：
npm install bootstrap@5.3.8
引入后，Bootstrap的CSS和JavaScript文件位于node_modules/bootstrap/dist/目录下。
二、栅格系统
2.1 栅格系统的工作原理
Bootstrap的栅格系统是响应式布局的核心。它基于12列布局，通过一系列容器、行和列的组合来创建页面布局。
核心工作原理：
容器（Container）：.container（固定宽度）或.container-fluid（全屏宽度）提供对齐和响应式断点
行（Row）：.row创建水平列组，包裹所有列，自动处理负边距
列（Column）：.col-*定义内容的放置位置，每个列都有水平内边距（gutter）
2.2 断点系统
Bootstrap 5定义了6个响应式断点，比v4多了一个xxl断点：
2.3 基本用法
等宽列布局：
<div class="container">
<div class="row">
<div class="col">
等宽列1
</div>
<div class="col">
等宽列2
</div>
<div class="col">
等宽列3
</div>
</div>
</div>
指定列宽：
<div class="container">
<div class="row">
<div class="col-12 col-md-8">主内容区（移动端12列，平板8列）</div>
<div class="col-12 col-md-4">侧边栏（移动端12列，平板4列）</div>
</div>
</div>
列嵌套：
<div class="row">
<div class="col-sm-9">
父级列
<div class="row">
<div class="col-8">嵌套列1（占父级8/12）</div>
<div class="col-4">嵌套列2（占父级4/12）</div>
</div>
</div>
<div class="col-sm-3">侧边栏</div>
</div>
列偏移：
<div class="row">
<div class="col-md-4 offset-md-4">
居中内容（偏移4列，再占4列，实现水平居中）
</div>
</div>
槽宽控制：
使用g-*类控制行内列间距（g-0到g-5），替代了v4的手动margin/padding方式：
<div class="row g-4">
<div class="col-6">间距为1.5rem</div>
<div class="col-6">间距为1.5rem</div>
</div>
