其他分享
首页 > 其他分享> > BootStrap 下拉菜单

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

 

标签:菜单,dropdown,BootStrap,js,使用,组件,下拉菜单
来源: https://www.cnblogs.com/seeding/p/15352527.html