如何创建 Bootstrap 下拉列表？

Question

我的代码似乎有什么问题...我是 bootstrap 的新手，我遵循了网站上关于如何创建 bootstrap 下拉菜单的所有说明，但仍然存在我的下拉列表中没有显示任何下拉项目

我的代码：

//Calling Bootstrap CSS and Javascript

  <link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="screen" >
  <link rel="stylesheet" href="css/bootstrap-responsive.min.css" type="text/css" media="screen" >
  <link rel="stylesheet" href="css/bootstrap-responsive.css" type="text/css" media="screen" >
  <script src="js/bootstrap.js"></script>
  <script src="js/bootstrap.min.js"></script>


 <script>
 $('.dropdown-toggle').dropdown()
 </script>

<div class="btn-group">
  <button type="button"  class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

感谢您的帮助

Answer 1

缺少第一个 jQuery。

其次，您在呈现 DOM 之前调用 $('.dropdown-toggle').dropdown()。

此外，您应该只加载 1 个文件。 bootstrap.css 或 bootstrap.min.css。加载两者只是浪费资源。

JSFiddle

$('.dropdown-toggle').dropdown()

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"></link>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

如何创建 Bootstrap 下拉列表？

How to Create a Bootstrap Dropdown?

drop-down-menu

bootstrapping