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

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

下拉菜单.dropdown具体用法

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

.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将触发器和下拉菜单关联起来

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