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,图片截图粘贴拖拽都可以自动上传。