下拉菜单

使用Bootstrap下拉插件切换上下文叠加以显示链接列表等。

例子

Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative;. Dropdowns can be triggered from <a> or <button> elements to better fit your potential needs.

单键下拉菜单

Any single .btn can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either <button> elements:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    下拉按钮
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">行动</a>
    <a class="dropdown-item" href="#">另一个动作</a>
    <a class="dropdown-item" href="#">还有别的什么</a>
  </div>
</div>

与 <a> 分子:

<div class="dropdown show">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    下拉链接
  </a>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">行动</a>
    <a class="dropdown-item" href="#">另一个动作</a>
    <a class="dropdown-item" href="#">还有别的什么</a>
  </div>
</div>

最好的部分是你也可以使用任何按钮变体:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">行动</a>
    <a class="dropdown-item" href="#">另一个动作</a>
    <a class="dropdown-item" href="#">还有别的什么</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">分开的链接</a>
  </div>
</div>

拆分按钮下拉菜单

类似地，创建分割按钮下拉列表，其标记与单个按钮下拉列表几乎相同，但添加了“.dropdown-toggle-split”以在下拉插入符号周围留出适当的间距。

我们使用这个额外的类来减少插入符号两侧的水平“填充”，并删除为常规按钮下拉添加的“margin-left”。这些额外的更改使插入符号在分割按钮中居中，并在主按钮旁边提供更合适尺寸的命中区域。

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">行动</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">切换下拉列表</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">行动</a>
    <a class="dropdown-item" href="#">另一个动作</a>
    <a class="dropdown-item" href="#">还有别的什么</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">分开的链接</a>
  </div>
</div>

降落变化

通过将.dropup添加到父元素来触发元素上方的下拉菜单。

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">放弃</button>
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">切换下拉列表</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
      分裂掉落
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">切换下拉列表</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

如果您想查看更多示例和属性，请查看官方 Bootstrap Documentation.