Bootstrap - 教程
Bootstrap 作为全球最受欢迎的前端组件库，始终是开发者快速搭建高质量Web项目的首选工具，Bootstrap 是一套开源的 HTML、CSS 和 JavaScript 工具集，核心定位是 响应式布局、移动设备优先 的Web开发框架。而 Bootstrap5 作为其最新稳定版本，在保留核心优势的基础上，进行了全面升级——更快的样式渲染、更简洁的代码结构、更强大的原生JavaScript支持，让前端开发效率大幅提升。
Bootstrap5 作为现代前端开发的“效率神器”，其核心价值在于：降低响应式开发门槛、统一开发规范、大幅缩短开发周期。无论是个人项目、企业官网还是大型Web应用，都能通过Bootstrap5快速搭建出美观、兼容的前端界面。
如果你是前端新手，建议先掌握HTML/CSS/JS基础，再通过本文的实例动手实践，很快就能上手；如果你是资深开发者，Bootstrap5的自定义能力和高效工具集，能让你从重复的CSS编写中解放出来，聚焦核心业务逻辑。
一、基础布局：容器与网格系统
1. 容器（Container）
核心说明：容器是布局的基础，用于包裹页面内容，提供响应式固定宽度或全屏宽度。
container：固定宽度，随屏幕尺寸变化（移动端全屏，桌面端固定宽度）container-fluid：全屏宽度，占满整个视口
代码示例：
<!-- 固定宽度容器 -->
<div class="container bg-light p-3 border">
<h3>固定宽度容器</h3>
<p>随屏幕尺寸自适应固定宽度（移动端自动全屏）</p>
</div>
<!-- 全屏宽度容器 -->
<div class="container-fluid bg-primary text-white p-3 mt-3">
<h3>全屏宽度容器</h3>
<p>占满整个视口宽度，无左右边距</p>
</div>2. 网格系统（Grid）
核心说明：基于 12 列布局，支持响应式断点（xs、sm、md、lg、xl、xxl），可快速实现复杂布局。
- 核心结构：
container→row→col-* - 响应式前缀：
col-[断点]-[列数]（如col-md-6表示中等屏幕及以上占 6 列）
代码示例（响应式 2-1 列布局）：
<div class="container mt-4">
<div class="row">
<!-- 移动端占12列，中等屏幕及以上占6列 -->
<div class="col-12 col-md-6 bg-success text-white p-3">
左侧区域（移动端全屏，桌面端半屏）
</div>
<!-- 移动端占12列，中等屏幕及以上占6列 -->
<div class="col-12 col-md-6 bg-danger text-white p-3">
右侧区域（移动端全屏，桌面端半屏）
</div>
</div>
<!-- 不等分列 + 偏移 -->
<div class="row mt-3">
<div class="col-8 col-lg-4 bg-warning p-3">占8列（大屏占4列）</div>
<div class="col-4 col-lg-4 offset-lg-4 bg-info text-white p-3">占4列（大屏占4列，偏移4列）</div>
</div>
</div>关键知识点：
- 列数总和不超过 12，超过则自动换行；
offset-[断点]-[列数]：实现列偏移；row-cols-[数量]：快速设置一行的列数（如row-cols-3表示一行 3 列）。
二、排版与颜色系统
1. 文字排版
核心说明：内置标题、段落、文本对齐、字号等样式，无需自定义 CSS。
代码示例：
<div class="container mt-4">
<!-- 标题（h1-h6 自带样式，也可使用 .h1-.h6 类） -->
<h1>h1 标题（默认最大）</h1>
<h2>h2 标题</h2>
<p class="h3">用 .h3 类实现 h3 样式的段落</p>
<!-- 文本样式 -->
<p class="lead">这是引导文本（比普通段落更大更粗）</p>
<p>普通文本 - 内置行高和间距，可读性更佳</p>
<!-- 文本对齐 -->
<p class="text-start">左对齐（默认）</p>
<p class="text-center">居中对齐</p>
<p class="text-end">右对齐</p>
<!-- 文本换行与截断 -->
<p class="text-wrap" style="width: 150px;">强制换行（即使内容超长也不截断）</p>
<p class="text-nowrap bg-light" style="width: 150px; overflow: hidden;">文本不换行（超长部分隐藏）</p>
<p class="text-truncate bg-light" style="width: 150px;">文本截断（超长部分显示...）</p>
</div>2. 颜色系统
核心说明：提供文本颜色、背景颜色、边框颜色，支持主题色和状态色（成功、警告、危险等）。
代码示例：
<div class="container mt-4">
<!-- 文本颜色 -->
<p class="text-primary">主色调文本（蓝色）</p>
<p class="text-success">成功色文本（绿色）</p>
<p class="text-warning">警告色文本（黄色）</p>
<p class="text-danger">危险色文本（红色）</p>
<p class="text-muted">次要文本（灰色，用于辅助说明）</p>
<!-- 背景颜色 -->
<div class="bg-primary text-white p-2 mt-2">主色调背景</div>
<div class="bg-success text-white p-2 mt-2">成功色背景</div>
<div class="bg-warning text-dark p-2 mt-2">警告色背景（深色文字更清晰）</div>
<!-- 边框颜色 -->
<div class="border border-primary p-2 mt-3">蓝色边框</div>
<div class="border border-danger rounded p-2 mt-2">红色边框 + 圆角</div>
</div>三、组件：表格、图像与形状
1. 表格
核心说明：内置表格样式、条纹、hover 效果、响应式表格等，支持自定义颜色和边框。
代码示例（带样式的响应式表格）：
<div class="container mt-4">
<h3>响应式表格（移动端可横向滚动）</h3>
<div class="table-responsive">
<table class="table table-striped table-hover table-bordered">
<thead class="table-dark">
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>职位</th>
<th>部门</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>25</td>
<td>前端开发</td>
<td>技术部</td>
</tr>
<tr class="table-success">
<td>2</td>
<td>李四</td>
<td>30</td>
<td>后端开发</td>
<td>技术部</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>28</td>
<td>产品经理</td>
<td>产品部</td>
</tr>
</tbody>
</table>
</div>
</div>关键类说明：
table-striped：条纹表格；table-hover：hover 时高亮；table-bordered：带边框；table-responsive：响应式表格（移动端横向滚动）；table-[颜色]：设置表头或行的背景色（如table-dark、table-success）。
2. 图像与形状
核心说明：快速设置图片响应式、圆角、阴影、形状等样式，无需自定义 CSS。
代码示例：
<div class="container mt-4">
<!-- 响应式图片（自动适应容器宽度） -->
<img src="https://picsum.photos/800/400" class="img-fluid rounded shadow-sm" alt="响应式图片">
<!-- 圆形图片 + 边框 -->
<img src="https://picsum.photos/300/300" class="rounded-circle border border-3 border-primary mt-3" style="width: 150px;" alt="圆形图片">
<!-- 缩略图样式 -->
<img src="https://picsum.photos/200/200" class="img-thumbnail mt-3" alt="缩略图">
<!-- 图片对齐 -->
<div class="text-center mt-3">
<img src="https://picsum.photos/200/150" class="img-fluid d-inline-block" alt="居中图片">
</div>
</div>关键类说明：
img-fluid：响应式图片（max-width: 100%，height: auto）；rounded：圆角图片（rounded-0无圆角，rounded-pill胶囊形）；rounded-circle：圆形图片（需确保图片为正方形）；img-thumbnail：缩略图样式（带边框和内边距）；shadow-[sm/md/lg]：设置阴影效果。
四、交互组件：按钮、按钮组与提示框
1. 按钮（Buttons）
核心说明：内置多种样式、尺寸、状态的按钮，支持图标按钮和链接伪装按钮。
代码示例：
<div class="container mt-4">
<!-- 基础按钮样式 -->
<button class="btn btn-primary">主按钮</button>
<button class="btn btn-success">成功按钮</button>
<button class="btn btn-warning">警告按钮</button>
<button class="btn btn-danger">危险按钮</button>
<button class="btn btn-outline-dark">边框按钮</button>
<!-- 按钮尺寸 -->
<button class="btn btn-primary btn-sm mt-2">小按钮</button>
<button class="btn btn-primary mt-2">默认尺寸</button>
<button class="btn btn-primary btn-lg mt-2">大按钮</button>
<!-- 状态按钮 -->
<button class="btn btn-primary mt-2" disabled>禁用按钮</button>
<button class="btn btn-primary mt-2 active">激活状态</button>
<!-- 链接伪装按钮 -->
<a href="#" class="btn btn-info mt-2">链接按钮（无跳转）</a>
<!-- 图标按钮（需引入Font Awesome） -->
<button class="btn btn-dark mt-2">
<i class="bi bi-search"></i> 搜索（需引入Bootstrap Icons）
</button>
</div>关键说明：
- 核心类：
btn+ 样式类（btn-[主题色]）； - 尺寸类：
btn-sm（小）、btn-lg（大）； - 禁用状态：直接添加
disabled属性； - 图标支持：需引入 Bootstrap Icons 或 Font Awesome（如
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">）。
2. 按钮组（Button Groups）
核心说明：将多个按钮组合成一个整体，支持水平/垂直排列、尺寸统一。
代码示例：
<div class="container mt-4">
<!-- 水平按钮组 -->
<div class="btn-group" role="group" aria-label="水平按钮组">
<button class="btn btn-primary">左</button>
<button class="btn btn-secondary">中</button>
<button class="btn btn-primary">右</button>
</div>
<!-- 垂直按钮组 -->
<div class="btn-group-vertical mt-3" role="group" aria-label="垂直按钮组">
<button class="btn btn-success">上</button>
<button class="btn btn-success">中</button>
<button class="btn btn-success">下</button>
</div>
<!-- 带下拉菜单的按钮组 -->
<div class="btn-group mt-3">
<button class="btn btn-warning">操作</button>
<button class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">下拉菜单</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">编辑</a></li>
<li><a class="dropdown-item" href="#">删除</a></li>
<li><a class="dropdown-item" href="#">查看</a></li>
</ul>
</div>
</div>3. 提示框（Tooltips）
核心说明：鼠标悬浮时显示提示信息，需通过 Bootstrap JS 初始化（依赖 bootstrap.bundle.min.js）。
代码示例：
<div class="container mt-4">
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-title="这是提示框内容" data-bs-placement="top">
上方提示框
</button>
<button type="button" class="btn btn-secondary ms-3" data-bs-toggle="tooltip" data-bs-title="右侧提示信息" data-bs-placement="right">
右侧提示框
</button>
</div>
<!-- 必须引入Bootstrap JS（含Popper.js，提示框依赖） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 初始化所有提示框
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>关键属性：
data-bs-toggle="tooltip"：标记为提示框组件；data-bs-title：提示框内容；data-bs-placement：提示框位置（top/bottom/left/right）。
五、进度与列表组件
1. 进度条（Progress）
核心说明：展示任务完成进度，支持动态更新、多段进度、条纹和动画效果。
代码示例：
<div class="container mt-4">
<!-- 基础进度条 -->
<div class="progress mb-3" style="height: 20px;">
<div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div>
</div>
<!-- 带颜色的进度条 -->
<div class="progress mb-3" style="height: 20px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">成功（75%）</div>
</div>
<!-- 条纹进度条 -->
<div class="progress mb-3" style="height: 20px;">
<div class="progress-bar bg-warning progress-bar-striped" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">条纹（50%）</div>
</div>
<!-- 动画条纹进度条 -->
<div class="progress mb-3" style="height: 20px;">
<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">动画条纹（80%）</div>
</div>
<!-- 多段进度条 -->
<div class="progress" style="height: 20px;">
<div class="progress-bar bg-primary" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%</div>
<div class="progress-bar bg-info" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
<div class="progress-bar bg-secondary" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div>
</div>
</div>2. 列表（List Groups）
核心说明：用于展示系列项目（如导航、通知），支持激活状态、徽章、链接列表等。
代码示例：
<div class="container mt-4">
<!-- 基础列表组 -->
<ul class="list-group mb-3" style="width: 200px;">
<li class="list-group-item">首页</li>
<li class="list-group-item active" aria-current="true">博客</li>
<li class="list-group-item">项目</li>
<li class="list-group-item disabled">联系我（禁用）</li>
</ul>
<!-- 链接列表组 -->
<div class="list-group mb-3" style="width: 200px;">
<a href="#" class="list-group-item list-group-item-action">链接1</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary"> primary 链接</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger"> danger 链接</a>
</div>
<!-- 带徽章的列表组 -->
<ul class="list-group" style="width: 200px;">
<li class="list-group-item d-flex justify-content-between align-items-center">
未读消息
<span class="badge bg-primary rounded-pill">5</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
待办任务
<span class="badge bg-danger rounded-pill">3</span>
</li>
</ul>
</div>六、高级组件：卡片、折叠、下拉菜单与轮播
1. 卡片（Cards）
核心说明：Bootstrap5 最常用的组件之一，用于展示内容块（如文章、产品），支持图片、标题、文本、按钮等组合。
代码示例：
<div class="container mt-4">
<div class="card" style="width: 18rem;">
<!-- 卡片图片 -->
<img src="https://picsum.photos/300/200" class="card-img-top" alt="卡片图片">
<!-- 卡片内容 -->
<div class="card-body">
<h5 class="card-title">卡片标题</h5>
<h6 class="card-subtitle mb-2 text-muted">卡片副标题</h6>
<p class="card-text">这是卡片的主要内容，用于展示简洁的描述信息，支持换行和文本样式。</p>
<a href="#" class="card-link">查看详情</a>
<a href="#" class="card-link text-danger">编辑</a>
</div>
<!-- 卡片底部 -->
<div class="card-footer text-muted">
发布时间：2024-05-20
</div>
</div>
</div>关键结构：
card：卡片容器；card-img-top：卡片顶部图片；card-body：卡片内容区域（标题、文本、按钮）；card-footer：卡片底部（辅助信息）。
2. 折叠（Collapse）
核心说明：点击触发内容显示/隐藏，常用于折叠面板、详情展开等场景。
代码示例：
<div class="container mt-4">
<!-- 折叠触发按钮 -->
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
点击展开/隐藏内容
</button>
<!-- 折叠内容 -->
<div class="collapse mt-2" id="collapseExample">
<div class="card card-body">
这是折叠后的内容，支持任意HTML结构（文本、图片、表格等）。Bootstrap5 的折叠组件基于原生JS实现，无需额外依赖，动画流畅。
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>关键属性：
- 触发元素：
data-bs-toggle="collapse"+data-bs-target="#目标ID"； - 折叠内容：
class="collapse"+ 唯一ID。
3. 下拉菜单（Dropdowns）
核心说明：点击按钮显示下拉选项，支持分组、分隔线、禁用选项等。
代码示例：
<div class="container mt-4">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
下拉菜单
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">选项1</a></li>
<li><a class="dropdown-item" href="#">选项2</a></li>
<li><a class="dropdown-item disabled" href="#">禁用选项</a></li>
<li><hr class="dropdown-divider"></li> <!-- 分隔线 -->
<li><a class="dropdown-item" href="#">分组选项</a></li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>4. 轮播（Carousel）
核心说明：用于展示多张图片或内容的轮播组件，支持自动播放、手动切换、指示器等。
代码示例：
<div class="container mt-4">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
<!-- 轮播指示器 -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<!-- 轮播内容 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/1200/400?random=1" class="d-block w-100" alt="轮播图1">
<div class="carousel-caption d-none d-md-block">
<h5>第一张轮播图标题</h5>
<p>轮播图描述信息1</p>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1200/400?random=2" class="d-block w-100" alt="轮播图2">
<div class="carousel-caption d-none d-md-block">
<h5>第二张轮播图标题</h5>
<p>轮播图描述信息2</p>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1200/400?random=3" class="d-block w-100" alt="轮播图3">
<div class="carousel-caption d-none d-md-block">
<h5>第三张轮播图标题</h5>
<p>轮播图描述信息3</p>
</div>
</div>
</div>
<!-- 轮播控制按钮 -->
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">上一张</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">下一张</span>
</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>关键属性：
data-bs-ride="true"：页面加载后自动播放；carousel-item active：默认显示的轮播项（必须有一个active）；d-none d-md-block：轮播标题仅在中等屏幕及以上显示。
七、导航与表单
1. 导航栏（Navbar）
核心说明：响应式导航组件，支持桌面端横向导航、移动端折叠菜单，是网站顶部导航的首选。
代码示例（响应式导航栏）：
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<!-- 品牌Logo -->
<a class="navbar-brand" href="#">MyBlog</a>
<!-- 移动端折叠按钮 -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- 导航菜单 -->
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto"> <!-- ms-auto 右对齐 -->
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
更多
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">关于我</a></li>
<li><a class="dropdown-item" href="#">联系我</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>关键类说明：
navbar-expand-lg：中等屏幕及以上展开导航，移动端折叠；ms-auto：导航菜单右对齐；navbar-dark bg-dark：深色导航栏（可替换为bg-primary等主题色）。
2. 表单（Forms）
核心说明：内置表单样式、验证、布局，支持输入框、下拉选择、复选框、文件上传等常用元素。
代码示例（带验证的表单）：
<div class="container mt-4">
<form class="row g-3 needs-validation" novalidate style="max-width: 600px;">
<!-- 用户名 -->
<div class="col-md-6">
<label for="username" class="form-label">用户名</label>
<input type="text" class="form-control" id="username" required>
<div class="invalid-feedback">请输入用户名</div>
</div>
<!-- 邮箱 -->
<div class="col-md-6">
<label for="email" class="form-label">邮箱</label>
<input type="email" class="form-control" id="email" required>
<div class="invalid-feedback">请输入有效的邮箱地址</div>
</div>
<!-- 密码 -->
<div class="col-md-12">
<label for="password" class="form-label">密码</label>
<input type="password" class="form-control" id="password" minlength="6" required>
<div class="invalid-feedback">密码长度不少于6位</div>
</div>
<!-- 下拉选择 -->
<div class="col-md-6">
<label for="category" class="form-label">博客分类</label>
<select class="form-select" id="category" required>
<option value="">请选择</option>
<option value="1">前端开发</option>
<option value="2">后端开发</option>
<option value="3">生活分享</option>
</select>
<div class="invalid-feedback">请选择分类</div>
</div>
<!-- 复选框 -->
<div class="col-md-6">
<div class="form-check mt-4">
<input class="form-check-input" type="checkbox" id="agree" required>
<label class="form-check-label" for="agree">
同意用户协议
</label>
<div class="invalid-feedback">请勾选用户协议</div>
</div>
</div>
<!-- 文件上传 -->
<div class="col-md-12">
<label for="file" class="form-label">上传头像</label>
<input class="form-control" type="file" id="file" accept="image/*">
</div>
<!-- 提交按钮 -->
<div class="col-12">
<button class="btn btn-primary" type="submit">提交表单</button>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 表单验证逻辑
(function () {
'use strict'
const forms = document.querySelectorAll('.needs-validation')
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script>关键说明：
form-control：统一表单元素样式（输入框、下拉框等）；needs-validation+novalidate：启用自定义验证；invalid-feedback：验证失败时显示的提示信息；row g-3：表单网格布局，g-3为列间距。
八、核心依赖与资源引入
所有示例均基于 CDN 引入 Bootstrap5 资源，无需本地配置，直接复制到 HTML 文件即可运行：
<!-- Bootstrap5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap5 JS（含Popper.js，支持下拉菜单、提示框等组件） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 可选：Bootstrap Icons（图标支持） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">附上官方资源：
- Bootstrap5 官方文档：https://getbootstrap.com/docs/5.3/getting-started/introduction/
- 菜鸟教程 Bootstrap5 详细教程：https://www.runoob.com/bootstrap5/bootstrap5-tutorial.html
浙公网安备 33010602011771号