如何在HTML文件中正确引入Bootstrap v5.1框架

Bootstrap 5.x 版本不再依赖jQuery，和旧版本的引入配置存在差异，你找不到旧教程里的相关script标签属于正常情况，直接使用v5.1的对应引入代码即可

完整引入步骤 #

• 第一步：在HTML的<head>标签内插入CSS引入代码，用来加载Bootstrap的样式规则

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

• 第二步：在HTML的</body>闭合标签之前插入JS引入代码，用来加载Bootstrap的交互功能。如果需要用到下拉菜单、模态框、弹出提示等带交互的组件，选择包含Popper的完整JS包即可，无需单独引入其他依赖

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

最小可用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 5.1 示例</title>
  <!-- 引入Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
  <h1 class="text-center text-primary">Hello Bootstrap 5.1</h1>

  <!-- 引入Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Umi