资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

如何在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下拉菜单
    URL标题:http://cdkjz.cn/article/gpdgdd.html
    返回首页 了解更多建站资讯
    多年建站经验

    多一份参考,总有益处

    联系快上网,免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈,可以通过以下方式与我们联系

    大客户专线   成都:13518219792   座机:028-86922220