Question

您好我是使用bootstrap的新手，而且我正在尝试创建下拉引导程序并且它无法正常工作。

这是我的HTML

<!DOCTYPE html>
<html>
<head>
 <title>Sample</title>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
  <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" id="ddButton" data-toggle="dropdown">Button</button>
        <ul class="dropdown-menu" role="menu">
              <li><a href="#">HTML</a></li>
              <li><a href="#">CSS</a></li>
              <li><a href="#">JavaScript</a></li>
        </ul>
   </div>
</body>
</html>

我使用w3school.com作为参考。

Answer 1

Bootstrap的JavaScript需要jQuery 1.9.1或更高版本，但低于版本4。你的jquery版本是1.6.2 所以将其更新为recent one.

Answer 2

从控制台：

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

更新 jQuery

3.x摘录：

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

2.x摘录：

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

1.x片段：

no-null-keyword

Answer 3

在您的项目中添加脚本和Css 。更多信息了解Boostrap DropDown W3schools Tutorial

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

参见示例

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

 <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" id="ddButton" data-toggle="dropdown">Button</button>
        <ul class="dropdown-menu" role="menu">
              <li><a href="#">HTML</a></li>
              <li><a href="#">CSS</a></li>
              <li><a href="#">JavaScript</a></li>
        </ul>
   </div>
</body>
</html>

＆＃13;

Answer 4

你错过了包含引导程序的CSS。试试这个。您包含的路径可能是错误的。请验证。

＆＃13;

bootstrap.min.js

＆＃13;

Bootstrap w3school教程下拉不起作用

4 个答案: