logoOutUI

⌘ K
  • 指南
  • 组件
  • 工具类
  • 其他
v5.3.x
  • 组件总览
  • 通用
    • Color 色彩
    • Icon 图标
    • Button 按钮
    • Text 文本
    • Link 链接
    • Typography 排版
  • 布局
    • Grid 栅格
    • Layout 布局
    • Stack 堆栈
  • 表单
    • Input 输入框
    • Select 选择器
    • Radio 单选框
    • Checkbox 复选框
    • Input group 输入组
    • Float label 浮动标签
    • ColorPicker 颜色选择器
    • Slider 滑块
    • Switch 开关
    • Upload 文件上传
    • Form 表单
  • 导航
    • Affix 固钉
    • Breadcrumb 面包屑
    • Dropdown 下拉菜单
    • NavBar 导航栏
    • NavMenu 导航菜单
    • Tabs 标签页
    • Pagination 分页
  • 数据
    • Table 表格
    • Tag 标签
    • Progress 进度条
    • Badge 徽章
    • Avatar 头像
最后更新时间:
Breadcrumb 面包屑NavBar 导航栏
Copyright © 2021-present 粤ICP备2021136339号
‌
‌
‌
‌

Dropdown 下拉菜单

下拉菜单是可切换的,用于显示链接列表等

基础用法



拆分按钮

同样地,创建分离式按钮的下拉菜单与单按钮下拉菜单的标记几乎相同,但增加了.dropdown-toggle-split,以便在下拉菜单周围有适当的间距。

我们使用这个额外的类来减少光标两边25%的水平padding,并去除普通按钮下拉时的margin-left。这些额外的变化使光标保持在分割按钮的中心位置,并在主按钮旁边提供一个尺寸更合适的点击区域。

不同尺寸

按钮下拉可以与各种尺寸的按钮一起使用,包括默认和拆分下拉按钮。

深色下拉菜单

通过添加.dropdown-menu-dark到现有的.dropdown-menu 设置深色下拉菜单

并将其用于导航栏:

方向

通过添加.dropup、.dropend、.dropstart分别设置上拉、向右、向左菜单

菜单选项

可以使用<a> 或 <button>作为菜单选项

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>

可以使用 .dropdown-item-text 创建非交互式下拉项

激活菜单

将.active添加到下拉菜单中的项目,使其成为活动的样式。为了向辅助技术传达活动状态,使用aria-current属性 -- 对当前页面使用页面值,或对一个集合中的当前项目使用true。

禁用菜单

下拉菜单中的项目添加.disabled,设置为禁用样式。

菜单对齐

菜单内容

标题

添加标题到下拉菜单中。

分隔线

用分隔线分隔相关的菜单项。

文本

将自由格式的文本放置在带有文本的下拉菜单中,并使用间距。请注意,您可能需要额外的大小调整样式来限制菜单宽度。

表单

将表单放在下拉菜单中,或将其放入下拉菜单,并使用margin或padding为其提供所需的负空间。


下拉菜单选项

使用data-bs-offset或data-bs-reference来改变下拉菜单的位置。

自动关闭行为

默认情况下,在下拉菜单内部或外部单击时关闭下拉菜单。 您可以使用 autoClose 选项来更改下拉列表的这种行为。

链接
按钮