如何在Bootstrap中使用.dropdown下拉菜单-创新互联

本篇文章给大家分享的是有关如何在Bootstrap中使用.dropdown下拉菜单，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

成都创新互联公司-专业网站定制、快速模板网站建设、高性价比黄岛网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式黄岛网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖黄岛地区。费用合理售后完善，十多年实体公司更值得信赖。

下拉菜单.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下拉菜单，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。