要成功，就要长期等待而不焦躁，态度从容却保持敏锐，不怕挫折且充满希望。早安！减少蜗居时间，亲近大自然。
1、单按钮下拉菜单
基础的下拉菜单最外层是.dropdown的div
现在只需要改成.btnd-group的div就可以实现单按钮的下拉菜单
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a rel="nofollow noopener noreferrer" href="#">Action</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">Another action</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a rel="nofollow noopener noreferrer" href="#">Separated link</a></li>
</ul>
</div>
2、分裂式按钮下拉菜单
分裂式按钮下拉菜单，就是按钮和图表分离开
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a rel="nofollow noopener noreferrer" href="#">Action</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">Another action</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a rel="nofollow noopener noreferrer" href="#">Separated link</a></li>
</ul>
</div>
3、尺寸
在button上添加.btn-lg.btn-sm.btn-xs可以控制按钮大小
<div class="btn-group"> <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> Large button <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> ... </ul> </div>
4、向上弹出式菜单
只需要在最外层的div上添加一个.dropup就可以实现向上弹出的菜单
<div class="btn-group dropup">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a rel="nofollow noopener noreferrer" href="#">Action</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">Another action</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a rel="nofollow noopener noreferrer" href="#">Separated link</a></li>
</ul>
</div>
以上所述是小编给大家介绍的bootstrap组件之按钮式下拉菜单，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
以上就是bootstrap组件之按钮式下拉菜单小结。前尘如故地唯美白雪，芳时明月，空悲切，终离别。更多关于bootstrap组件之按钮式下拉菜单小结请关注haodaima.com其它相关文章！
