一段时间以来，我一直在试图弄清楚如何在本地正确引用jQuery和Bootstrap。注意到我的导航栏下拉菜单不起作用。无法弄清楚原因并决定粘贴 jQuery 和 Bootstrap 的 CDN 链接，它的工作方式与预期一样：
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-theme.css" rel="stylesheet" />
<script type = "text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type = "text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script type = "text/javascript" src="js/bootstrap.min.js"></script>
<script type = "text/javascript" src="js/script.js"></script>
</head>
<body>
<nav class="navbar navbar-default bg-primary">
<div class="container-fluid">
<!--logo-->
<div class="navbar-header">
<a href="index.html" class="navbar-brand">WebsiteBrand</a>
</div>
<!--navbar items-->
<div>
<ul class="nav navbar-nav" >
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<!--dropdown-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>这是我的头文件。这与我放置CDN链接的地方相同。对不起，如果这是一个愚蠢的问题，但是在环顾了这么长时间之后，我决定问。
文件链接和标记的排序应该是
<head>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-theme.css" rel="stylesheet" />
<script type = "text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type = "text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script type = "text/javascript" src="js/bootstrap.min.js"></script>
<script type = "text/javascript" src="js/script.js"></script>
</head>
您错过了bootstrap.min.js.js文本
考虑文件夹结构如下
- 索引.html
css文件夹- 引导.css
- 引导主题.css
js文件夹- jquery-3.2.1.min.js
- 引导程序.min.js
- 脚本.js
在更新问题时更新答案
引导程序 v3
这是解决方案 https://jsfiddle.net/9zgddjjf/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default bg-primary">
<div class="container-fluid">
<!--logo-->
<div class="navbar-header">
<a href="index.html" class="navbar-brand">WebsiteBrand</a>
</div>
<!--navbar items-->
<div>
<ul class="nav navbar-nav" >
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<!--dropdown-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>引导程序 v4
在这里，您可以找到解决方案 https://jsfiddle.net/9zgddjjf/2/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a href="index.html" class="navbar-brand">WebsiteBrand</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Page 1
<span class="caret"></span></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Page 1-1</a>
<a class="dropdown-item" href="#">Page 1-2</a>
<a class="dropdown-item" href="#">Page 1-3</a>
</div>
</li>
</ul>
</div>
</nav>