Question

如何使用Bootstrap创建下拉选项？

当前导航菜单如下：

<div class="container">
  <div class="header">
    <ul class="nav nav-pills pull-right">
      <li class="active"><a href="index.php">Home</a></li>
      <li><a href="chat.php">Chat</a></li>
      <li><a href="#">Forum</a></li>
      <li><a href="members.php">Members</a></li>>
      <li><a href="about.php">About</a></li>
      <li><a href="help.php">Help</a></li>
    </ul>
    <h3 class="text-muted">Site</h3>
  </div>

我尝试过类似的事情：

<div class="container">
  <div class="header">
    <ul class="nav nav-pills pull-right">
      <li class="active"><a href="index.php">Home</a></li>
      <li><a href="chat.php">Chat</a></li>
      <li><a href="#">Forum</a></li>
      <li><a href="members.php">Members</a></li>
      **<div class="dropdown">
      <li><a href="dropdown.php">Drop down</a></li>
      </div>**
      <li><a href="about.php">About</a></li>
      <li><a href="help.php">Help</a></li>
    </ul>
    <h3 class="text-muted">Site</h3>
  </div>

这不适用于下拉。

Answer 1

<div class="dropdown">
  <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

请参阅：http://getbootstrap.com/components/#dropdowns

http://getbootstrap.com/components/#btn-dropdowns

http://getbootstrap.com/components/#navbar

使用Bootstrap创建下拉列表

1 个答案: