在开始安装 Bootstrap 4 之前，请确保您已具备以下基础知识：
Bootstrap 4 提供了多种安装方式，您可以根据项目需求选择最适合的方法：
最简单快捷的方式，通过内容分发网络引入 Bootstrap，无需下载任何文件。
下载编译后的 CSS 和 JS 文件，直接引入到您的项目中。
通过 npm、yarn 或 Composer 安装 Bootstrap，适合现代前端工作流。
下载 Bootstrap 源码，使用构建工具进行自定义编译。
这是最简单快捷的 Bootstrap 4 安装方法，特别适合快速原型开发和学习。
将以下代码添加到 HTML 文件的 <head> 部分：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
Bootstrap 4 的 JavaScript 插件依赖于 jQuery 和 Popper.js。将以下代码添加到 <body> 的末尾：
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
以下是一个使用 CDN 引入 Bootstrap 4 的完整 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 4 示例</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
</head>
<body>
<h1 class="text-center mt-5">Hello, Bootstrap 4!</h1>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
</body>
</html>
如果您希望离线使用 Bootstrap 或不想依赖 CDN，可以下载编译后的文件。
解压下载的 ZIP 文件，您会看到以下目录结构：
bootstrap-4.6.0-dist/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
│ └── bootstrap.min.js.map
└── ...
将 css 和 js 文件夹复制到您的项目目录中。
在 HTML 文件中引入本地 Bootstrap 文件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 本地示例</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<h1 class="text-center mt-5">Hello, Bootstrap 4!</h1>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
注意：您仍然需要引入 jQuery 和 Popper.js，可以通过 CDN 或下载本地文件。
使用包管理器安装 Bootstrap 是现代前端开发的推荐方式，便于依赖管理和版本控制。
在项目目录中运行以下命令：
npm install bootstrap@4.6.0
安装后，您可以在项目中引入 Bootstrap：
// 在您的 SCSS 文件中引入
@import "~bootstrap/scss/bootstrap";
// 在您的 JavaScript 文件中引入
import 'bootstrap';
在项目目录中运行以下命令：
yarn add bootstrap@4.6.0
对于 PHP 项目，可以使用 Composer 安装：
composer require twbs/bootstrap:4.6.0
这种方法适合需要深度定制 Bootstrap 的高级用户。
首先确保您的系统已安装 Node.js 和 npm，然后克隆 Bootstrap 仓库：
git clone https://github.com/twbs/bootstrap.git
cd bootstrap
npm install
运行以下命令编译 CSS 和 JavaScript：
npm run dist
这将在 dist/ 目录中生成编译后的文件。
要定制 Bootstrap，编辑 scss/_variables.scss 文件中的变量：
// 修改主色调
$primary: #007bff;
$success: #28a745;
// 修改字体
$font-family-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
// 修改边框半径
$border-radius: 0.5rem;
然后重新运行 npm run dist 生成定制版本的 Bootstrap。
安装完成后，您可以通过以下方式验证 Bootstrap 4 是否正常工作：
创建一个简单的 Bootstrap 按钮来测试安装：
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
如果按钮显示为 Bootstrap 样式，说明安装成功。