Bootstrap 5 下拉列表

基础的下拉列表

下拉菜单是一种可切换菜单，允许用户从预定义列表中选择值：

实例

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    下拉按钮
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">链接 1</a></li>
    <li><a class="dropdown-item" href="#">链接 2</a></li>
    <li><a class="dropdown-item" href="#">链接 3</a></li>
  </ul>
</div>

亲自试一试

例子解释

.dropdown 类指示下拉菜单。

如需打开下拉菜单，请使用设置了 .dropdown-toggle 类和 data-toggle="dropdown" 属性的按钮或链接。

将 .dropdown-menu 类添加到 <div> 元素，可实际构建下拉菜单。然后将 .dropdown-item 类添加到下拉菜单中的每个元素（链接或按钮）。

下拉列表分隔线

.dropdown-divider 类用于通过水平细边框分隔下拉菜单中的链接：

实例

<li><hr class="dropdown-divider"></hr></li>

亲自试一试

下拉列表标题

.dropdown-header 类用于在下拉菜单中添加标题：

实例

<li><h5 class="dropdown-header">Dropdown header 1</h5></li>

亲自试一试

禁用的和活动的项目

请使用 .active 类突出显示特定的下拉项（添加蓝色背景色）。

如需禁用下拉列表中的某个项目，请使用 .disabled 类（在悬停时获得浅灰色文本颜色和 "no-parking-sign" 图标）。

实例

<li><a class="dropdown-item" href="#">普通的</a></li>
<li><a class="dropdown-item active" href="#">活动的</a></li>
<li><a class="dropdown-item disabled" href="#">禁用的</a></li>

亲自试一试

下拉列表位置

您还可以通过将 .dropend 或 .dropstart 类添加到下拉元素，来创建 "dropend" 或 "dropstart" 菜单。请注意，插入符号/箭头是自动添加的：

Dropright

<div class="dropdown dropend">

亲自试一试

Dropleft

<div class="dropdown dropstart">

亲自试一试

下拉列表右对齐

如需右对齐下拉菜单，请将 .dropdown-menu-end 类添加到带有 .dropdown-menu 的元素：

实例

<div class="dropdown-menu dropdown-menu-end">

亲自试一试

上拉列表

如果您希望下拉菜单向上展开而不是向下展开，请将 class="dropdown" 的 <div> 元素更改为 "dropup"：

实例

<div class="dropup">

亲自试一试

下拉文本

.dropdown-item-text 类用于为下拉项添加纯文本，或用于为链接添加默认链接样式。

实例

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">链接 1</a></li>
  <li><a class="dropdown-item" href="#">链接 2</a></li>
  <li><a class="dropdown-item" href="#">链接 3</a></li>
  <li><a class="dropdown-item-text" href="#">文本链接</a></li>
  <li><span class="dropdown-item-text">纯文本</span></li>
</ul>

亲自试一试

组合按钮和下拉列表

实例

<div class="btn-group">
  <button type="button" class="btn btn-primary">华为</button>
  <button type="button" class="btn btn-primary">大疆</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">小米</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">手机</a></li>
      <li><a class="dropdown-item" href="#">平板电脑</a></li>
    </ul>
  </div>
</div>

亲自试一试

垂直组合按钮和下拉列表

实例

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">华为</button>
  <button type="button" class="btn btn-primary">大疆</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">小米</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">手机</a></li>
      <li><a class="dropdown-item" href="#">平板电脑</a></li>
    </ul>
  </div>
</div>

亲自试一试