当前位置：首页 > 文章列表 > 文章 > 前端 > Bootstrap5引入方式：CDN和本地下载详解

Bootstrap5引入方式：CDN和本地下载详解

2026-05-11 15:09:51 0浏览收藏

本文深入解析了在 index.html 中正确引入 Bootstrap 框架的两大主流方式——CDN 引入与本地引入，不仅提供开箱即用的代码示例，更直击开发者常踩的“样式不生效”“JS 组件失灵”“移动端布局错乱”等真实痛点，系统揭示了加载顺序（CSS → Popper → bootstrap.bundle.min.js）、viewport 元标签缺失、路径书写错误、版本失效风险等极易被忽视却决定成败的关键细节，帮你避开从入门到上线全过程中的隐形陷阱。

index.html中如何引入Bootstrap框架？

index.html 中引入 Bootstrap，最直接有效的方式是通过 CDN，但必须注意加载顺序、依赖项和移动端适配——否则样式不生效、组件点击无反应、手机端布局错乱都是常见结果。

CDN 引入要按顺序加 script，不能只加 CSS

Bootstrap 的 JavaScript 组件（如 dropdown、modal、collapse）依赖 Popper 和（旧版）jQuery。Bootstrap 5+ 已移除 jQuery 依赖，但仍强依赖 @popperjs/core。所以哪怕你只用 CSS 类（比如 btn btn-primary），只要后续要启用 JS 插件，就必须按顺序引入：

• 先加引入 CSS（放在）
• 再在底部依次引入：popper.min.js → bootstrap.bundle.min.js（含 Popper）
• 不要用 bootstrap.min.js 单独文件，它不含 Popper，会报 ReferenceError: Popper is not defined

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">菜单</button>
    <ul class="dropdown-menu"><li><a class="dropdown-item">选项</a></li></ul>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>