好资源导航 » 文章资讯 » Bootstrap 下拉菜单.dropdown的具体使用方法

Bootstrap 下拉菜单.dropdown的具体使用方法

2023-09-22 13:37:05 56

本章将具体讲解下拉菜单的交互。使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。

下拉菜单.dropdown具体用法

.dropdown<下拉菜单触发器button+下拉菜单ul>

.dropdown包裹层

.dropdown-toggle下拉菜单触发器

data-toggle="dropdown 自定义属性可以与js关联起来

.dropdown-menu 下拉菜单

具体实例：



Dropdown



Action
Anotheraction
Somethingelsehere

Separatedlink

如果你想让菜单默认是打开状态，需要添加一个.open的类



Dropdown



Action
Anotheraction
Somethingelsehere

Separatedlink

.dropup 向上弹出菜单

通过为下拉菜单的父元素设置.dropup类，可以让菜单向上弹出（默认是向下弹出的）



Dropup



Action
Anotheraction
Somethingelsehere

Separatedlink

1、对齐方式：默认左对齐

右对齐：给.dropdown-menu添加.dropdown-menu-right类就可以

注意：它是以父级的位置来对齐的

怎么样让下拉菜单以下拉菜单触发器的右端对齐呢？那就需要给下拉菜单触发器button添加一个.btnblock的类



Dropup



Action
Anotheraction
Somethingelsehere

Separatedlink

2、下拉菜单的标题 dropdown-header

在任何下拉菜单中均可通过添加标题来标明一组动作。

如果想让下拉菜单的标题居中，就需要添加一个.text-center的类


...
Dropdownheader
...

3、分割线： .divider

为下拉菜单添加一条分割线，用于将多个链接分组。


...

...

4、禁用菜单：disabled

为下拉菜单中的

元素添加.disabled类，从而禁用相应的菜单项。


Regularlink
Disabledlink

Anotherlink

注意：

aria-haspopup="true"aria-expanded="true" 为需要借助屏幕阅读器的特殊人群设置的

id="dropdownMenu1"aria-labelledby="dropdownMenu1" 通过id将触发器和下拉菜单关联起来

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。