环境要求
Bootstrap 5 是一个前端框架，不需要任何后端环境。你只需要一个文本编辑器和一个现代浏览器即可开始。
- 支持浏览器：Chrome、Firefox、Safari、Edge 等所有现代浏览器的最新版本
- 不支持：Bootstrap 5 不再支持 IE 11 及以下版本
- 推荐编辑器：VS Code、WebStorm、Sublime Text 等
下载 Bootstrap
Bootstrap 5 提供了多种安装方式，你可以根据项目需求选择最适合的方式。
通过 CDN 引入（推荐）
最快速的方式是通过 CDN 引入 Bootstrap 的 CSS 和 JS 文件，无需安装即可使用。适合快速原型开发和小型项目。
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
添加 integrity 和 crossorigin 属性可以实现子资源完整性校验，确保 CDN 文件未被篡改，建议在生产环境使用。
通过 npm 安装
如果你使用 webpack、Vite、Parcel 或 Rollup 等构建工具，推荐通过 npm 安装，方便版本管理和模块化导入：
npm install [email protected]
// 在 JS 入口文件中引入
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';
如果你需要 Bootstrap Icons，可以同时安装图标库，
npm install bootstrap-icons
import 'bootstrap-icons/font/bootstrap-icons.css';
通过 yarn 安装
如果你使用 yarn 作为包管理器，
yarn add [email protected]
下载编译文件
你也可以直接从 GitHub 下载已编译的 CSS 和 JS 文件，
- 从 GitHub Releases 下载最新的发布包
- 解压后，将
dist/ 目录中的文件复制到你的项目中
- 编译包包含：
bootstrap.min.css、bootstrap.min.js、bootstrap.bundle.min.js 等
基本 HTML 模板
以下是一个标准的 Bootstrap 5 HTML 模板，包含了必要的 meta 标签和资源引用。复制这段代码即可开始你的 Bootstrap 项目。
<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-5">
<h1>你好，Bootstrap 5！</h1>
<p>这是一个基本的 Bootstrap 页面。</p>
<button class="btn btn-primary">点击我</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
使用 Bootstrap Icons
Bootstrap Icons 是 Bootstrap 官方出品的 SVG 图标库，包含超过 2,000 个图标。你可以在 Bootstrap.top 图标页面 浏览和搜索所有图标。
<!-- 引入图标库 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<!-- 使用图标 -->
<i class="bi-heart"></i>
<i class="bi-star text-warning"></i>
<i class="bi-trash text-danger"></i>
使用 Sass
Bootstrap 的源码使用 Sass 编写，你可以通过导入 Sass 源文件来充分利用变量、映射、Mixin 和函数。这是创建自定义主题的最佳方式：
// 自定义变量必须在导入 Bootstrap 之前定义
$primary: #6f42c1;
$secondary: #e83e8c;
$enable-gradients: true;
// 导入 Bootstrap 完整源码
@import "bootstrap/scss/bootstrap";
重要说明
- 视口 meta 标签：
viewport 是必需的，确保移动端正确响应式渲染
- CSS 放在 head：Bootstrap 的 CSS 必须在页面的
<head> 中加载
- JS 放在 body 末尾：Bootstrap 的 JS 放在页面底部可以提升加载性能
- 容器 container：使用
.container 包裹内容实现居中留白布局
- 版本锁定：生产环境中建议锁定 Bootstrap 的确切版本号，避免意外升级导致样式变化
- JS 模块化：如果只需要部分插件，可以单独导入
bootstrap/dist/js/bootstrap.min.js 并按需加载插件
下一步
现在你已经了解了 Bootstrap 5 的基本使用方法，接下来可以：
提示：Bootstrap.top 提供完整的中文文档和示例，所有内容均基于 Bootstrap 5.3.3 版本。