如何不使用CDN，用本地Bootstrap 3.3.7-dist实现HTML下拉列表？已遇异常

我帮你检查了代码，发现了几个关键问题，先给你修复后的完整可用代码，再一步步拆解排查思路：

修复后的完整代码 #

<!doctype html>
<html lang="en">
<head>
    <title>Title</title>
    <!-- Bootstrap 3 的meta标签不需要shrink-to-fit=no，这是Bootstrap 4的专属属性 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 必须先加载jQuery，Bootstrap的JS组件完全依赖它 -->
    <script src="js/jquery.min.js"></script>
    <!-- 加载Bootstrap核心样式 -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <!-- 注意文件名拼写：是bootstrap.js，不是bootsrap.js（少了一个字母t） -->
    <script src="js/bootstrap.js"></script>
</head>
<body>
    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
            Dropdown Example <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
        </ul>
    </div>
</body>
</html>

问题排查与验证步骤 #

• 检查文件名拼写：你代码里的Bootstrap JS文件名写成了bootsrap.js，正确应该是bootstrap.js（少了一个字母t），这会直接导致JS文件加载失败，下拉的交互逻辑完全无法生效。
• 确认资源路径正确性：确保js/jquery.min.js、css/bootstrap.css、js/bootstrap.js这些路径和你本地bootstrap-3.3.7-dist文件夹的实际结构完全匹配。比如如果你的HTML文件放在压缩包外，可能需要写成./bootstrap-3.3.7-dist/js/jquery.min.js这类相对路径。
• 验证jQuery加载顺序：Bootstrap的JS组件依赖jQuery，所以必须先加载jQuery，再加载Bootstrap JS，你当前的顺序是对的，但如果顺序反了，会直接导致所有Bootstrap交互组件失效。
• 查看浏览器控制台错误：按下F12打开开发者工具，切换到Console标签页，看看有没有404错误（提示资源找不到）或者JS报错。比如文件名拼写错误会出现404，jQuery没加载会出现$ is not defined的报错，这是快速定位问题的核心方法。
• 确认Bootstrap版本匹配：你用的是Bootstrap 3.3.7，代码里的下拉结构（.dropdown容器、带data-toggle="dropdown"的按钮、.dropdown-menu列表）完全符合3.x版本的规范，所以结构本身没问题。

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