Bootstrap 上的下拉菜单

Question

我正在尝试使用 Bootstrap 创建下拉列表和项目，但是当我编写列表项目时它没有出现。

见代码：

<div class="dropdown">
    <button class="btn dropdown-toggle" type="button" id="dd-mneus" data-toggle="dropdown">Dropdown<span class="caret"></span>

    </button>
    <ul class="dropdown-menu" role="menu">
      <li role="presentation"><a href="#" role="menuitem" tabindex="-1">List item</a></li>
      <li role="presentation"><a href="#" role="menuitem" tabindex="-1">List item</a></li>
      <li role="presentation"><a href="#" role="menuitem" tabindex="-1">List item</a></li>
      <li role="presentation"><a href="#" role="menuitem" tabindex="-1">List item</a></li>
      <li role="presentation"><a href="#" role="menuitem" tabindex="-1">List item</a></li>

    </ul>

  </div>

Answer 1

我使用 bootstrap 创建选项卡控件，但从未使用它创建下拉列表。那你为什么不试试简单的 asp.net 下拉列表

     <asp:DropDownList ID="yourID" runat="server">

     <asp:ListItem>Item1</asp:ListItem>

     <asp:ListItem>Item2</asp:ListItem>

     <asp:ListItem>Item3</asp:ListItem>  

      </asp:DropDownList>

Answer 2

以下 plunker 显示了带有工作示例的原始代码： http://plnkr.co/edit/10bMstgY9WYSWSjMf1cD?p=preview

问题是 jQuery 没有加载。加载 jQuery 解决了问题，因为 Bootstrap js 依赖于它。

注意jquery ref需要在加载bootstrap js之前加载。

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>

  <body>
    <div class="dropdown">
    <button class="btn dropdown-toggle" type="button" id="dd-mneus" data-toggle="dropdown">Dropdown<span class="caret"></span>

    </button>
    <ul class="dropdown-menu" role="menu">
      <li role="presentation"><a href="#" role="menuitem" tabindex="-1">List item</a></li>
      <li role="presentation"><a href="#" role="menuitem" tabindex="-1">List item</a></li>
      <li role="presentation"><a href="#" role="menuitem" tabindex="-1">List item</a></li>
      <li role="presentation"><a href="#" role="menuitem" tabindex="-1">List item</a></li>
      <li role="presentation"><a href="#" role="menuitem" tabindex="-1">List item</a></li>

    </ul>

  </div>
  </body>

</html>

Bootstrap 上的下拉菜单

Dropdown on Bootstrap

twitter-bootstrap

drop-down-menu