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

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

下拉菜单.dropdown具体用法

.dropdown

.dropdown　包裹层

.dropdown-toggle 下拉菜单触发器

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

.dropdown-menu  下拉菜单

具体实例：

Dropdown

• Action
• Another action
• Something else here
• Separated link

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

Dropdown

• Action
• Another action
• Something else here
• Separated link

.dropup   向上弹出菜单

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

Dropup

• Action
• Another action
• Something else here
• Separated link

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

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

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

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

Dropup

• Action
• Another action
• Something else here
• Separated link

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

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

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

...

Dropdown header

...

3、分割线：     .divider

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

...

...

4、禁用菜单：disabled

为下拉菜单中的

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

• Regular link
• Disabled link
• Another link

注意：

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

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

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