选择适合您项目的安装方法开始使用 Bootstrap 5
最简单快捷的方法，适合快速原型开发和学习。
在 HTML 文件的 <head> 部分添加 CSS 链接：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">在 <body> 结束前添加 JavaScript 脚本：
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>适合使用构建工具和模块打包器的项目。
在项目目录中运行以下命令：
npm install bootstrap@5.3.0-alpha1在 JavaScript 文件中导入：
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';或者在 Sass 文件中导入：
// 导入所有 Bootstrap
@import "~bootstrap/scss/bootstrap";
// 或者按需导入
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";适合不需要包管理器的传统项目。
从官方网站下载编译好的文件：
下载后解压并将文件放入项目目录：
your-project/
├── css/
│ ├── bootstrap.min.css
│ └── bootstrap.css
├── js/
│ ├── bootstrap.bundle.min.js
│ └── bootstrap.bundle.js
└── index.html使用其他流行的包管理器安装 Bootstrap 5。
使用 yarn：
yarn add bootstrap@5.3.0-alpha1使用 Composer：
composer require twbs/bootstrap:5.3.0-alpha1使用 NuGet：
Install-Package bootstrap使用以下基本模板开始您的 Bootstrap 5 项目：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 模板</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1 class="text-center my-5">Hello, Bootstrap 5!</h1>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">卡片标题</h5>
<p class="card-text">这是一个使用 Bootstrap 5 的简单卡片示例。</p>
<a href="#" class="btn btn-primary">点击这里</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">卡片标题</h5>
<p class="card-text">这是一个使用 Bootstrap 5 的简单卡片示例。</p>
<a href="#" class="btn btn-primary">点击这里</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">卡片标题</h5>
<p class="card-text">这是一个使用 Bootstrap 5 的简单卡片示例。</p>
<a href="#" class="btn btn-primary">点击这里</a>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>使用容器、行和列创建响应式布局
<div class="container">
<div class="row">
<div class="col-md-6">列1</div>
<div class="col-md-6">列2</div>
</div>
</div>使用实用类快速设置间距、颜色和排版
<div class="p-3 mb-2
bg-primary text-white">
带内边距和背景色的元素
</div>使用预构建组件如按钮、卡片和导航栏
<button class="btn
btn-primary">
主要按钮
</button>