CDN（推荐）
最简单的方式，直接在 HTML 中引入：
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap 5 JS (含 Popper) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Bootstrap Icons (可选) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
npm
通过 npm 安装，适合使用构建工具的项目：
# 安装最新版
npm install bootstrap@latest
# 安装指定版本
npm install [email protected]
# 同时安装 Popper (如不使用 bundle)
npm install bootstrap @popperjs/core
在 JavaScript 中引入：
import 'bootstrap/dist/css/bootstrap.min.css'
import * as bootstrap from 'bootstrap'
Sass 源码
从 GitHub Releases 下载：
GitHub Releases
# 或通过 npm 安装源码
npm install bootstrap@latest --save-dev
入门 HTML 模板
复制以下代码开始你的第一个 Bootstrap 页面：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>我的 Bootstrap 页面</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, Bootstrap!</h1>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
版本列表
| 版本 | 发布日期 | 说明 |
|---|
| Bootstrap 5.3 | 2025 | 最新稳定版，含深色模式、CSS 变量 |
| Bootstrap 5.2 | 2024 | 新增 CSS 变量体系 |
| Bootstrap 5.1 | 2023 | 改进组件、新增 offcanvas |
| Bootstrap 5.0 | 2021 | 移除 jQuery，全新框架 |