Bootstrap中的下拉菜单组件

xiaoxiao2021-02-28  14

Bootstrap中的下拉菜单组件是经常在开发阶段中遇到的,点击一下显示下拉菜单,不需要写JS代码,只用几个css就可以解决,当然你还要引用以下的文件:

如果您想要单独引用该插件的功能,那么您需要引用 dropdown.js。或者您可以引用 bootstrap.js 或压缩版的bootstrap.min.js

<div class="container"> <h3>组件---下拉菜单 <span class="caret"></span> </h3> <!--dropdown只是相对定位relation,为子元素做准备--> <div class="dropdown"> <!--a为触发元素--> <a data-toggle="dropdown" href="#" class="btn btn-default"> 产品大全<span class="glyphicon glyphicon-menu-down"></span> </a> <!--隐藏元素是绝对定位--> <ul class="dropdown-menu"> <li class="dropdown-header">家电</li> <li><a href="#">电视</a></li> <li><a href="#">洗衣机</a></li> <li><a href="#">冰箱</a></li> <li class="dropdown-header">母婴</li> <li class="divider"></li> <li><a href="#">止尿裤</a></li> <li><a href="#">尿不湿</a></li> </ul> </div> <h3>提示:divider----分割线 dropdown-header----下拉列表的列表头 </h3> </div>

 

转载请注明原文地址: https://www.6miu.com/read-1649984.html

最新回复(0)