Bootstrap按钮式下拉菜单
把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了。
单按钮下拉菜单
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" 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>
</ul>
</div>
分裂式按钮下拉菜单
相似地,分裂式按钮下拉菜单也需要同样的改变一些标记,但只是多一个分开的按钮。
<div class="btn-group">
<button type="button" class="btn btn-success">广东</button>
<button type="button" class="btn btn-success dropdown-toggle" 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>
</ul>
</div>
尺寸
使用btn-lg,btn-sm,btn-xs等类来修饰;
<!-- lager Button -->
<div class="btn-group">
<button type="button" class="btn btn-success btn-lg dropdown-toggle" 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>
</ul>
</div>
<!-- small button -->
<div class="btn-group">
<button type="button" class="btn btn-success btn-sm dropdown-toggle" 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>
</ul>
</div>
<!-- extra small button -->
<div class="btn-group ">
<button type="button" class="btn btn-success btn-xs dropdown-toggle" 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>
</ul>
</div>
向上弹出式菜单
<div class="btn-group dropup">
<button type="button" class="btn btn-success">广东</button>
<button type="button" class="btn btn-success dropdown-toggle" 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>
</ul>
</div>