如何在Bootstrap中使用.dropdown下拉菜单

本篇文章给大家分享的是有关如何在Bootstrap中使用.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

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

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

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

以上就是如何在Bootstrap中使用.dropdown下拉菜单，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。