Bootstrap下拉菜单,就是点击一个元素或按钮,触发隐藏的列表显示出来。
//基本格式
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
按钮和菜单需要包裹在.dropdown的容器里,而作为被点击的元素按钮需要设置data-toggle="dropdown"才能有效。对于菜单部分,设置class="dropdown-menu"才能自动隐藏并添加固定样式。设置class="caret"表示箭头,可上可下。
//设置向上触发
<div class="dropup">
//菜单项居右对齐,默认值是dropdown-menu-left
<ul class="dropdown-menu dropdown-menu-right">
//设置菜单的标题,不要加超链接
<li class="dropdown-header">网站导航</li>
//设置菜单的分割线
<li class="divider"></li>
//设置菜单的禁用项
<li class="disabled"><a href="#">产品</a></li>
//让菜单默认显示
<div class="dropdown open">