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 可以将下拉菜单向上展开，会根据上下区域调整；

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">