Bootstrap 环境安装
要使用 Bootstrap，只需要把它「接入」你的网页即可，不需要安装编译器或服务器。Bootstrap 提供了多种接入方式：CDN 引用最简单，适合快速上手与在线示例；本地文件适合离线开发；npm 适合配合构建工具的大型项目。本节逐一介绍。
接入方式一览
| 方式 | 适用场景 | 复杂度 |
|---|---|---|
| CDN 引用 | 快速开始、写 demo | 最低 |
| 本地文件 | 离线或内网环境 | 低 |
| npm 安装 | 配合 webpack/Vite 等构建工具 | 中 |
方式一：通过 CDN 引入
CDN（内容分发网络）会把 Bootstrap 文件缓存到离用户最近的服务器，加载快且无需下载。把 CSS 放进 <head>、JS 放到 </body> 前即可：
<!-- 引入 Bootstrap 5：head 中放 CSS，body 末尾放 JS 包 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap 演示</title>
</head>
<body>
<h1>CDN 接入成功</h1>
<!-- 弹窗等交互依赖此 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
显示效果：页面能正常使用全部 Bootstrap 样式，且 bootstrap.bundle.min.js 已包含弹窗、下拉等所需插件，无需再单独引入 jQuery 或 Popper。
方式二：本地文件
去 https://example.com 的下载页面获取编译好的 bootstrap.min.css 与 bootstrap.bundle.min.js，放入项目目录（例如 css/、js/），再用相对路径引入：
<!-- 本地引入：路径换成你项目里的实际位置 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.bundle.min.js"></script>
显示效果：与 CDN 完全一致，但页面可在无网络环境下打开；缺点是需要自己留意版本升级。
方式三：npm 安装
若项目使用打包工具，可用 npm 把 Bootstrap 作为依赖安装，再在 JS 中 import：
npm install bootstrap@5.3.3
// 在入口 JS 中引入（需配合打包工具使用）
import 'bootstrap/dist/css/bootstrap.min.css';
import * as bootstrap from 'bootstrap';
执行后即可在组件代码里调用 new bootstrap.Modal(...) 等 API，样式与脚本统一交给构建流程管理。
验证环境是否就绪
打开页面按 F12 进入开发者工具，检查「网络」面板中 bootstrap 的 CSS 与 JS 是否返回 200；再确认标题字体、按钮圆角等样式是否生效。若都正常，说明环境已就绪，可以开始写 Bootstrap 页面了。
小结
无论 CDN、本地文件还是 npm，核心都是「引入 CSS 与 JS 两个文件」。初学者推荐 CDN 方式，先跑起来再逐步深入。