本篇文章给大家分享的是有关如何在Bootstrap中使用.dropdown下拉菜单,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
成都创新互联公司专注于柯桥网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供柯桥营销型网站建设,柯桥网站制作、柯桥网页设计、柯桥网站官网定制、重庆小程序开发公司服务,打造柯桥网络公司原创品牌,更为您提供柯桥网站排名全网营销落地服务。
下拉菜单.dropdown具体用法
.dropdown <下拉菜单触发器button+下拉菜单ul>
.dropdown 包裹层
.dropdown-toggle 下拉菜单触发器
data-toggle="dropdown 自定义属性 可以与js关联起来
.dropdown-menu 下拉菜单
具体实例:
如果你想让菜单默认是打开状态,需要添加一个.open的类
.dropup 向上弹出菜单
通过为下拉菜单的父元素设置 .dropup 类,可以让菜单向上弹出(默认是向下弹出的)
1、对齐方式:默认左对齐
右对齐:给.dropdown-menu添加.dropdown-menu-right类就可以
注意:它是以父级的位置来对齐的
怎么样让下拉菜单以下拉菜单触发器的右端对齐呢?那就需要给下拉菜单触发器button添加一个.btn block的类
2、下拉菜单的标题 dropdown-header
在任何下拉菜单中均可通过添加标题来标明一组动作。
如果想让下拉菜单的标题居中,就需要添加一个.text-center的类
3、分割线: .divider
为下拉菜单添加一条分割线,用于将多个链接分组。
4、禁用菜单:disabled
为下拉菜单中的
注意:
aria-haspopup="true" aria-expanded="true" 为需要借助屏幕阅读器的特殊人群设置的
id="dropdownMenu1" aria-labelledby="dropdownMenu1" 通过id将触发器和下拉菜单关联起来
以上就是如何在Bootstrap中使用.dropdown下拉菜单,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。