Bootstrap5 卡片组件

Bootstrap 5 下拉菜单

使用Bootstrap 5的下拉菜单组件，创建灵活的用户导航和交互界面。

基本下拉菜单 下拉菜单变体

Bootstrap 5 下拉菜单组件

Bootstrap 5 下拉菜单是灵活的交互组件，用于显示可折叠的内容列表。

下拉菜单组件的主要特点：

  • 多种触发方式 - 点击、悬停等多种触发方式
  • 灵活的方向 - 上下左右多个展开方向
  • 丰富的内容 - 支持链接、表单、文本等内容
  • 响应式设计 - 自动适应不同屏幕尺寸
  • JavaScript控制 - 支持动态显示和隐藏
下拉菜单示例

基本下拉菜单

按钮下拉菜单

使用按钮触发下拉菜单。

链接下拉菜单

使用链接触发下拉菜单。

<!-- 按钮下拉菜单 -->
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    下拉菜单按钮
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">操作</a></li>
    <li><a class="dropdown-item" href="#">另一个操作</a></li>
    <li><a class="dropdown-item" href="#">其他操作</a></li>
  </ul>
</div>

<!-- 链接下拉菜单 -->
<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    链接下拉菜单
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">操作</a></li>
    <li><a class="dropdown-item" href="#">另一个操作</a></li>
    <li><a class="dropdown-item" href="#">其他操作</a></li>
  </ul>
</div>

不同样式的下拉菜单

下拉菜单方向

右侧展开

使用 .dropend 类创建向右展开的下拉菜单。

左侧展开

使用 .dropstart 类创建向左展开的下拉菜单。

<!-- 向上展开 -->
<div class="dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    向上展开下拉菜单
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">操作</a></li>
    <li><a class="dropdown-item" href="#">另一个操作</a></li>
    <li><a class="dropdown-item" href="#">其他操作</a></li>
  </ul>
</div>

<!-- 向右展开 -->
<div class="dropend">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    向右展开
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">操作</a></li>
    <li><a class="dropdown-item" href="#">另一个操作</a></li>
    <li><a class="dropdown-item" href="#">其他操作</a></li>
  </ul>
</div>

<!-- 向左展开 -->
<div class="dropstart">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    向左展开
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">操作</a></li>
    <li><a class="dropdown-item" href="#">另一个操作</a></li>
    <li><a class="dropdown-item" href="#">其他操作</a></li>
  </ul>
</div>

方向组合

在同一页面中使用不同方向的下拉菜单。

下拉菜单内容

带图标的下拉菜单

在下拉菜单项中添加图标。

带标题的下拉菜单

在下拉菜单中添加标题和分隔符。

<!-- 带图标的下拉菜单 -->
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    带图标菜单
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item dropdown-item-with-icon" href="#">
      <i class="bi bi-pencil"></i> 编辑
    </a></li>
    <li><a class="dropdown-item dropdown-item-with-icon" href="#">
      <i class="bi bi-trash"></i> 删除
    </a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item dropdown-item-with-icon" href="#">
      <i class="bi bi-download"></i> 下载
    </a></li>
  </ul>
</div>

<!-- 带标题的下拉菜单 -->
<div class="dropdown">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    带标题菜单
  </button>
  <ul class="dropdown-menu">
    <li><h6 class="dropdown-header">用户操作</h6></li>
    <li><a class="dropdown-item" href="#">个人资料</a></li>
    <li><a class="dropdown-item" href="#">设置</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><h6 class="dropdown-header">系统操作</h6></li>
    <li><a class="dropdown-item" href="#">帮助</a></li>
    <li><a class="dropdown-item" href="#">关于</a></li>
  </ul>
</div>

禁用的菜单项

使用 .disabled 类禁用下拉菜单项。

导航栏中的下拉菜单

在导航栏中使用下拉菜单创建多级导航。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">网站名称</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">首页</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            产品
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">产品 A</a></li>
            <li><a class="dropdown-item" href="#">产品 B</a></li>
            <li><a class="dropdown-item" href="#">产品 C</a></li>
          </ul>
        </li>
        <!-- 更多导航项 -->
      </ul>
    </div>
  </div>
</nav>

高级下拉菜单

巨型菜单 (Mega Menu)

创建包含丰富内容的大型下拉菜单。

产品类别
品牌
特色产品
热销产品

查看我们最受欢迎的产品

立即查看
限时优惠
限时折扣! 所有商品享受8折优惠

自定义样式下拉菜单

使用自定义CSS创建独特的下拉菜单样式。

交互下拉菜单演示

动态下拉菜单生成器

自定义创建下拉菜单。

JavaScript 控制

使用JavaScript控制下拉菜单的显示和隐藏。

下拉菜单使用最佳实践

用户体验
  • 保持菜单项简洁明了
  • 使用合理的分组和分隔符
  • 为重要操作提供明确的视觉指示
  • 确保菜单在不同设备上易于操作
内容组织
  • 根据功能或类别对菜单项进行分组
  • 使用标题和分隔符提高可读性
  • 为相关操作提供视觉关联
  • 避免在菜单中放置过多内容
可访问性
  • 为所有下拉菜单提供适当的ARIA属性
  • 确保键盘导航正常工作
  • 为屏幕阅读器用户提供清晰的导航指示
  • 考虑使用视觉隐藏的文本提供额外信息
响应式设计
  • 在不同屏幕尺寸上测试下拉菜单
  • 确保菜单在小屏幕上仍然可用
  • 考虑在小屏幕上使用全宽菜单
  • 使用合适的断点调整菜单布局

掌握下拉菜单后，下一步学习导航组件

下拉菜单是导航系统的重要元素，接下来可以学习如何使用完整的导航组件创建复杂的网站导航结构。

学习导航组件 查看所有组件
上一章: 卡片 下一章: 折叠