Bootstrap4 下拉菜单

下拉菜单组件的重要性

下拉菜单是Bootstrap 4中重要的交互组件，用于：

  • 节省屏幕空间，组织大量选项
  • 提供清晰的导航结构
  • 增强表单的可用性
  • 创建复杂的交互界面

基本下拉菜单

Bootstrap 4 提供了简单易用的下拉菜单组件，使用 .dropdown 类创建下拉菜单容器。

基本下拉菜单示例
动作 另一个动作 其他内容
动作 另一个动作 其他内容
动作 另一个动作 其他内容
<!-- 基本下拉菜单 -->
<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>

<!-- 主要下拉菜单 -->
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    主要下拉菜单
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
    <a class="dropdown-item" href="#">动作</a>
    <a class="dropdown-item" href="#">另一个动作</a>
    <a class="dropdown-item" href="#">其他内容</a>
  </div>
</div>

下拉菜单变体

Bootstrap 4 提供了多种下拉菜单变体，包括分割按钮、不同方向等。

下拉菜单变体示例

分割按钮下拉菜单

动作 另一个动作
分离的链接

不同方向的下拉菜单

动作 另一个动作 其他内容

不同大小的下拉菜单

动作 另一个动作 其他内容
动作 另一个动作 其他内容
<!-- 分割按钮下拉菜单 -->
<div class="btn-group">
  <button type="button" class="btn btn-primary">主要操作</button>
  <button type="button" class="btn btn-primary 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>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">分离的链接</a>
  </div>
</div>

<!-- 右侧下拉菜单 -->
<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    右侧下拉
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <a class="dropdown-item" href="#">动作</a>
    <a class="dropdown-item" href="#">另一个动作</a>
    <a class="dropdown-item" href="#">其他内容</a>
  </div>
</div>

下拉菜单内容

下拉菜单可以包含多种类型的内容，包括标题、分割线、表单等。

下拉菜单内容示例

带标题和分割线的下拉菜单

下拉菜单标题
动作 另一个动作
分离的链接

带表单的下拉菜单

新用户? 注册 忘记密码?

带禁用项目的下拉菜单

常规项目 激活项目 禁用项目 另一个常规项目
<!-- 带标题和分割线的下拉菜单 -->
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    带内容的下拉菜单
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu4">
    <h6 class="dropdown-header">下拉菜单标题</h6>
    <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>

<!-- 带表单的下拉菜单 -->
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    带表单的下拉菜单
  </button>
  <div class="dropdown-menu p-4" style="width: 300px;">
    <form>
      <div class="form-group">
        <label for="exampleDropdownFormEmail">邮箱地址</label>
        <input type="email" class="form-control" id="exampleDropdownFormEmail" placeholder="email@example.com">
      </div>
      <div class="form-group">
        <label for="exampleDropdownFormPassword">密码</label>
        <input type="password" class="form-control" id="exampleDropdownFormPassword" placeholder="密码">
      </div>
      <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">记住我</label>
      </div>
      <button type="submit" class="btn btn-primary">登录</button>
    </form>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">新用户? 注册</a>
    <a class="dropdown-item" href="#">忘记密码?</a>
  </div>
</div>

下拉菜单方向

Bootstrap 4 提供了多种下拉菜单方向，包括向上、向左、向右等。

下拉菜单方向示例

向上展开的下拉菜单

动作 另一个动作 其他内容

向右展开的下拉菜单

动作 另一个动作 其他内容

向左展开的下拉菜单

动作 另一个动作 其他内容
<!-- 向上展开的下拉菜单 -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    向上展开
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">动作</a>
    <a class="dropdown-item" href="#">另一个动作</a>
    <a class="dropdown-item" href="#">其他内容</a>
  </div>
</div>

<!-- 向右展开的下拉菜单 -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    向右展开
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">动作</a>
    <a class="dropdown-item" href="#">另一个动作</a>
    <a class="dropdown-item" href="#">其他内容</a>
  </div>
</div>

<!-- 向左展开的下拉菜单 -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    向左展开
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">动作</a>
    <a class="dropdown-item" href="#">另一个动作</a>
    <a class="dropdown-item" href="#">其他内容</a>
  </div>
</div>

自定义下拉菜单样式

通过自定义CSS，您可以创建独特的下拉菜单样式，以适应您的设计需求。

自定义下拉菜单样式示例

自定义样式下拉菜单

首页 个人资料 设置
退出

导航栏中的下拉菜单

<!-- 自定义样式下拉菜单 -->
<style>
.custom-dropdown .dropdown-menu {
  border: none;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.custom-dropdown .dropdown-item {
  transition: all 0.2s;
}

.custom-dropdown .dropdown-item:hover {
  background-color: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
}
</style>

<div class="dropdown custom-dropdown">
  <button class="btn btn-outline-primary dropdown-toggle" type="button" id="customDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    自定义样式
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#"><i class="fas fa-home mr-2"></i>首页</a>
    <a class="dropdown-item" href="#"><i class="fas fa-user mr-2"></i>个人资料</a>
    <a class="dropdown-item" href="#"><i class="fas fa-cog mr-2"></i>设置</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt mr-2"></i>退出</a>
  </div>
</div>

<!-- 导航栏中的下拉菜单 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">导航栏</a>
  <ul class="navbar-nav">
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        下拉菜单
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">动作</a>
        <a class="dropdown-item" href="#">另一个动作</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">其他内容</a>
      </div>
    </li>
  </ul>
</nav>

JavaScript方法

Bootstrap 4 的下拉菜单组件提供了JavaScript API，可以通过编程方式控制下拉菜单。

JavaScript方法示例

通过JavaScript控制下拉菜单

动作 另一个动作 其他内容
<!-- HTML -->
<div class="btn-group">
  <button id="jsDropdownButton" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    JavaScript控制
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">动作</a>
    <a class="dropdown-item" href="#">另一个动作</a>
    <a class="dropdown-item" href="#">其他内容</a>
  </div>
</div>
<div class="mt-2">
  <button id="showDropdown" class="btn btn-primary mr-2">显示下拉菜单</button>
  <button id="hideDropdown" class="btn btn-secondary mr-2">隐藏下拉菜单</button>
  <button id="toggleDropdown" class="btn btn-info">切换下拉菜单</button>
</div>

<!-- JavaScript -->
<script>
// 显示下拉菜单
document.getElementById('showDropdown').addEventListener('click', function() {
  $('#jsDropdownButton').dropdown('show');
});

// 隐藏下拉菜单
document.getElementById('hideDropdown').addEventListener('click', function() {
  $('#jsDropdownButton').dropdown('hide');
});

// 切换下拉菜单
document.getElementById('toggleDropdown').addEventListener('click', function() {
  $('#jsDropdownButton').dropdown('toggle');
});
</script>

最佳实践

使用下拉菜单组件的建议
  • 保持简洁 - 避免在下拉菜单中放置过多选项
  • 合理分组 - 使用标题和分割线对相关选项进行分组
  • 考虑可访问性 - 使用适当的ARIA属性，确保屏幕阅读器用户可以理解下拉菜单结构
  • 响应式设计 - 确保下拉菜单在不同设备上都能良好显示
  • 提供清晰的视觉反馈 - 为下拉菜单添加适当的悬停和焦点状态

学习完成！

您已经学会了Bootstrap 4中的下拉菜单组件使用方法。现在可以尝试在自己的项目中使用这些技术了。

继续学习下一章：Bootstrap 4 组件

上一章:Bootstrap4 卡片 下一章:Bootstrap4 折叠