如何在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://bzwzjz.com/article/gpdgdd.html

    其他资讯

    Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
    友情链接: 成都定制网站建设 成都网站建设 成都网站制作 企业手机网站建设 成都网站建设 手机网站制作 成都网站建设 泸州网站建设 网站设计 手机网站建设 成都网站设计 成都网站制作 外贸营销网站建设 网站建设 成都网站制作 成都做网站建设公司 重庆手机网站建设 定制网站建设 高端网站设计推广 温江网站设计 企业网站建设 企业网站设计