Bootstrap 带有下拉菜单

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 you will need to use jQuery。

您必须在 Bootstraps 脚本之前包含jQuery 。最好的是，您将这两个脚本都包含在页面底部，就在结束 </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 带有下拉菜单

Bootstrap with dropdown menu

twitter-bootstrap

menu

dropdown