189 8069 5689

如何在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
    • 
 

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

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


    当前标题：如何在Bootstrap中使用.dropdown下拉菜单
    标题链接：http://cdxtjz.cn/article/gpdgdd.html

    其他资讯