Question

我正在使用bootstrap为下拉菜单编写一个简单的代码，代码似乎很好。但是，当我点击插入符号时，它不会扩展。我不确定出了什么问题。有人可以帮我弄这个吗？谢谢你的帮助。

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>thenewboston</title>
		<meta charset="utf-8">
		<meta name="viewpoint" content="width=device-width, initial-scale=1">
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
		
		<!-- Optional theme -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
		
		<!-- Latest compiled and minified JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	</head>
	
	<body>
		<nav class="navbar navbar-inverse">
			<div class="container-fluid">
				
				<!-- Logo -->
				<div class="navbar-header">
					<a href="navbar.html" class="navbar-brand">ABE TECHNOLOGY</a>
				</div>
				
				<!-- Menu Items -->
				<div>
					<ul class="nav navbar-nav">
						<li class="active"><a href="#">Home</a></li>
						<li><a href="#">About</a></li>
						<li><a href="#">Contact</a></li>
						
						<!-- drop down menu -->
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">My Profile <span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="#">Friends</a></li>
								<li><a href="#">Photos</a></li>
								<li><a href="#">Settings</a></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</nav>
	</body>
</html>

Answer 1

那是因为你没有加载jQuery插件!!

您需要加载此脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

Answer 2

对于Bootstraps javascript components，您需要使用jQuery。

您必须在之前包含jQuery Bootstraps脚本。最好的是，您在页面底部包含两个脚本，就在结束</body>标记之前：

[...your html...]  <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> </body> </html>

带下拉菜单的Bootstrap

2 个答案: