开发者学堂课程【前端开发框架Bootstrap使用教程：Bootstrap 组件_按钮式下拉菜单】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/360/detail/4241
Bootstrap 组件_按钮式下拉菜单
目录：
一、按钮式下拉菜单
二、单按钮下拉菜单
三、分裂式按钮下拉菜单
四、尺寸
五、向上弹出式菜单
一、按钮式下拉菜单
把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了。
插件依赖
按钮式下拉菜单依赖下拉菜单插件, 因此需要将此插件包含在你所使用的 Bootstrap 版本中。
二、单按钮下拉菜单
只要改变一些基本的标记,就能把按钮变成下拉菜单的开关。
实例：
<!-- Single button-->
<div class="btn-group">
<button type= "button" class-"btn btn- default dropdowm- toggle"data-toggle="dropdoun" aria-haspopup="true" aria-expanded="false">
Action (span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" >Actiont</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>
三、分裂式按钮下拉菜单
相似地,分裂式按钮下拉菜单也需要同样的改变一些标记 ,但只是多一个分开的按钮。
实例：
<!-- Single button-->
<div class="btn-group">
<button type= "button" class-"btn btn- default dropdowm- toggle"data-toggle="dropdoun" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class=" sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#" >Actiont</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>
四、尺寸
按钮式下拉菜单适用所有尺寸的按钮。
实例：
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-1g dropdown-toggle" type="button" data- toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown- menu" >
…
</ul>
</div>
<!-- Small button group -->
<div class-"btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type-"button" data- toggle= "dropdown" aria-haspopup="true" aria- expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
…
</ul>
</div>
<！-- Extra small button group -->
<div class-"btn-group">
<button class-"btn btn-default btn-xs dropdown-toggle" type="button" data- toggle="dropdown" aria-haspopup=" true" aria-expanded="false">
Extra 5nal1 button <span class-"caret"></spans
</button>
<ul class="dropdowt-menu">
<！-- Dropdown menu links -->
</u1>
</d1v>
五、向上弹出式菜单
给父元素添加.dropup 类就能使触发的下拉菜单朝上方打开。
实例：
<div class="btn-group dropup">
<button type="button" class="btn btn-default" >Dropup</button>
<button type= "button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class=" sr-only">Toggle Dropdown</span>
</button>
<ul classa=" dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
