Bootstarp 4 入门下拉菜单 dropdowns

使用Bootstrap下拉插件

切换上下文叠加层以显示链接列表以及更多内容

语法标签

父标签 class 写了相对定位
<div class="dropdown">
    触发按钮事件, data-toggle="dropdown"
     <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
            Dropdown button
    </button>
        显示菜单区域
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
</div>

按钮组

btn-group 本身含有相对定位,所以不需要写.dropdown

<div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </div>

按钮组下增加间距

.dropdown-toggle-split 左右内边距增加了
描述

<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

尺寸

按钮下拉选单可以使用所有尺寸的按钮,包括默认及分割下拉按钮。

下单菜单方向

  • 默认自动切换上下菜单
  • 向右 dropright
<div class="btn-group dropright">
            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropright
            </button>
            <div class="dropdown-menu" x-placement="right-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(108px, 0px, 0px);">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </div>
  • 向左 dropleft

下拉项目设置

  • 添加选中 .active
  • 禁用 .disabled
  • 头部dropdown-header
  • 分隔线 <div class="dropdown-divider"></div>
  • 下拉选项,data-offsetdata-reference 来改变下拉选单的位置。

    菜单对齐

    默认情况下,下拉菜单会自动从其父级的顶部和左侧100%定位。 添加.dropdown-menu-right.dropdown-menu 中可右键对齐下拉菜单。

  • 左边对齐 dropdown-menu-left,并可设置自适应尺寸 lg,xl,sm
  • 右边对齐dropdown-menu-right

通过JS

$('.dropdown-toggle').dropdown()

data-toggle="dropdown" still required
无论是通过 JavaScript 调用你的下拉清单或使用 data-api, data-toggle="dropdown" 都需要在下拉选单的触发器元素中显示。

选项

Name Type Default Description
offset number | string | function 0 下拉菜单相对于目标的偏移量
flip boolean true 如果参考元素重叠,则允许下拉菜单翻转
boundary string | element 'scrollParent' 下拉菜单的溢出约束边界。 接受 'viewport', 'window', 'scrollParent', HTMLElement引用的值(仅限JavaScript)
reference string | element 'toggle' 下拉菜单的参考元素。接受的值 'toggle','parent' 或一个HTMLElement参考
display string 'dynamic' 默认情况下,我们使用Popper.js进行动态定位。使用禁用此功能static
popperConfig null | object null 要更改Bootstrap的默认Popper.js配置

方法

方法 描述
$().dropdown('toggle') 切换给定导航栏或选项卡式导航的下拉菜单。
$().dropdown('show') 显示给定导航栏或选项卡式导航的下拉菜单。
$().dropdown('hide') 隐藏给定导航栏或选项卡式导航的下拉菜单。
$().dropdown('update') 更新元素的下拉菜单的位置。
$().dropdown('dispose') 销毁元素的下拉菜单。

回调函数

事件 描述
show.bs.dropdown 调用show实例方法时,将立即触发此事件。
shown.bs.dropdown 当下拉列表对用户可见时将触发此事件(将等待CSS转换完成)​​。
hide.bs.dropdown 调用hide实例方法后,立即触发此事件。
hidden.bs.dropdown 当下拉菜单完成对用户的隐藏操作时,将触发此事件(将等待CSS转换完成)​​。
如果你觉得本站帮助到您,麻烦您帮点个小广告支持下本站,感谢不尽。

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。

公告通知

关于网站广告,由于需要营运成本,所以增加了广告联盟。
如果你觉得本站帮助到您,麻烦您帮点个小广告,感谢不尽。

空气

空气

热卖技术,喜欢新东西。

年度VIP 魔童降世
查看更多

最新视频课程

Laravel 消息通知使用

Laravel 的 PhpSpreadsheet 包入门

ace.js 打造一款属于你的 Web 编辑器,入门文档。

wap2App 入门讲解,100%速成,全面为你讲解。

Laravel Permission 中文文档

Laravel 设置请求头 header 参数

Laravel 实现 RBAC 权限管理功能 Permission 包操作

解释 OAuth 2.0 认证 和使用场景说明

KongQi Laravel Admin2.0 文档安装

KongQi Laravel admin2.0 layui admin 版本序言

黑白课堂社区使用如何购买元宝和开通 VIP

易语言入门拖入文件导入到超级列表框表格内

易语言入门易语言定时任务模块

Visual Studio Code 入门和使用教程安装下载

易语言入门TAB 标签页制作

黑白课堂社区使用社区规范说明

钻级赞助商