把任意一个按钮放入 .btn-group
中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了。
1、单按钮下拉菜单
只要改变一些基本的标记,就能把按钮变成下拉菜单的开关。
<!-- 按钮式下拉菜单 -->
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
点我<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">选项1</a></li>
<li><a href="#">选项2</a></li>
</ul>
</div>
2、分裂式按钮下拉菜单
2.1 向下弹出(默认)
<!-- 按钮式下拉菜单(分裂式按钮下拉菜单) -->
<div class="btn-group">
<button class="btn btn-danger">按钮</button>
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
2.2 向上弹出
<!-- 按钮式下拉菜单(分裂式按钮下拉菜单 向下弹出) -->
<div class="btn-group dropup">
<button class="btn btn-danger">按钮</button>
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
3、按钮式下拉菜单尺寸
按钮式下拉菜单适用所有尺寸的按钮。
<!-- 按钮式下拉菜单(尺寸) -->
<div class="btn-group">
<button class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown">
大尺寸<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">选项1</a></li>
<li><a href="#">选项2</a></li>
</ul>
</div>
<!-- 按钮式下拉菜单(尺寸) -->
<div class="btn-group">
<button class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">
标准尺寸<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">选项1</a></li>
<li><a href="#">选项2</a></li>
</ul>
</div>
<!-- 按钮式下拉菜单(尺寸) -->
<div class="btn-group">
<button class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown">
小尺寸<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">选项1</a></li>
<li><a href="#">选项2</a></li>
</ul>
</div>