使用 Bootstrap 很容易，因为我们只需要包含一些 Bootstrap JS 和 CSS 文件。
有两种常见的方法可以将 Bootstrap 文件包含到 HTML 中。
第一种简单的方法是使用 Bootstrap CDN 文件，第二种方法是在本地下载文件。
使用 Bootstrap CDN
Bootstrap CDN（内容分发网络- Content Delivery Network）是一个公共内容交付网络，允许用户从其服务器远程加载 CSS、JavaScript 和图像。
这意味着 Bootstrap JS 和 CSS 文件已经可以在线获得。
我们只需要在 HTML 文件的 <head>标签中包含这些文件的 URL。
CSS : 这里是最新的 CSS 文件的链接，需要粘贴到 HTML 文档的 <head>中。
<!-- CSS only --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossoroirn="anonymous">
JS : 这里是需要粘贴在结束标签前的 JavaScript 文件的链接。
Bootstrap 需要包含 jQuery 和 Pooper JS 库来实现模态和工具提示等功能。
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossoroirn="anonymous"></script>
注意：要正确启用功能，这些 javascript 文件必须以正确的顺序包含，例如：首先包含 jQuery，然后是 Popper.js，然后是 Bootstrap JS 或者任何其他 JavaScript 插件。
必需的 HTML 元标记：
我们需要使用来设置最新的 HTML 标准，需要 utf-8来支持各种语言和元 viewport（见下文）以获得正确的响应式布局。
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
下载 Bootstrap 文件到本地
如果我们想在本地包含 Bootstrap 文件，我们可以直接从 getbootstrap.com 轻松下载 CSS 文件和 JS 文件，并将它们包含在上述相同位置。
使用 Bootstrap 创建第一个网页：
现在我们将使用 Bootstrap 创建我们的第一个网页。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Bootstrap 教程 </title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossoroirn="anonymous">
</head>
<body>
<div class="container">
<h1>OnitRoad Bootstrap 教程 </h1>
<p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。 </p>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossoroirn="anonymous"></script>
</body>
</html>
在此示例中，我们已将 Bootstrap 文件和所需的元标记包含到 HTML 中。
在这里，我们使用了 Bootstrap 类，例如：container 类，它基本上是一个响应宽度的容器。