第十九谈：下拉菜单

本节课我们来开始学习 Bootstrap 的提供的下拉菜单组件。

一．下拉菜单

1. 下拉菜单组件依赖于 Popper.js，而 Bootstrap 组件包里没有这个文件；
2. 但组件包里 bootstrap.bundle.js 已经包含了这个组件功能，使用这个即可；
3. 只要将将 bootstrap.bundle.js 替代掉 bootstrap.js 即可；
4. 使用.dropdown 等系列样式，来构建下拉菜单效果；

      <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
              下拉菜单
          </button>
          <div class="dropdown-menu">
              <a href="#" class="dropdown-item">菜单 1</a>
              <a href="#" class="dropdown-item">菜单 2</a>
              <a href="#" class="dropdown-item">菜单 3</a>
          </div>
      </div>

5. 使用.dropdown-divider 给菜单项目之间增加一条分割线；

      <a href="#" class="dropdown-item">菜单 3</a>
      <div class="dropdown-divider"></div>
      <a href="#" class="dropdown-item">菜单 3</a>

6. 使用.dropdown-toggle-split 实现分裂式按钮下拉菜单；

      <div class="dropdown btn-group">
          <button class="btn btn-secondary">下拉菜单</button>
          <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
          <div class="dropdown-menu">
              ...
          </div>
      </div>

7. 支持使用.btn-lg 等系列将下拉按钮设置大小；

      <button class="btn btn-lg btn-secondary">下拉菜单</button>

8. 使用.dropup 可以将下拉菜单向上展开，会根据上下区域调整；

      <div class="dropdown btn-group dropup">

9. 使用.dropright、dropleft 可以将下拉菜单向右、向左展开；

      <div class="dropdown btn-group dropright">

10. 使用.active 设置首选项，使用 disabled；

      <a href="#" class="dropdown-item active">菜单 2</a>
      <a href="#" class="dropdown-item disabled">菜单 3</a>

11. 使用.dropdown-menu-right 可以设置菜单向右对齐；

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