一、下拉菜单：
用于显示链接列表的可切换、有上下文的菜单
.dropdown 菜单用于指定下拉菜单，下拉菜单都包裹在 .dropdown 或者 .dropup 里。
.dropdown-menu 类用于实际下拉菜单的创建。
.dropdown-header 类用于在下拉菜单中添加标题
.divider 下拉菜单中的分割线
.disabled 下拉菜单中的禁用项
<div class="dropdown"><button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">下拉菜单<span class="caret"></span></button><ul class="dropdown-menu" aria-labelledby="dropdownMenu1"><li class="dropdown-header">标题1</li><li><a href="#">菜单1</a></li><li><a href="#">菜单2</a></li><li role="separator" class="divider"></li><li class="dropdown-header">标题2</li><li><a href="#">菜单3</a></li><li><a href="#">菜单4</a></li></ul></div>
三角符号：
<span class="caret"></span>
二、按钮组
允许把一组按钮放在同一行里
.btn-group 该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。
.btn-group-vertical 该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。
调整整个按钮组的大小：.btn-group-lg, .btn-group-sm, .btn-group-xs
调整单个按钮的大小：.btn-sm, .btn-lg, .btn-xs
单个按钮宽度100%占满父容器：.btn-block
<div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-default">Left</button><button type="button" class="btn btn-danger">Middle</button><button type="button" class="btn btn-primary">Right</button></div>
<div class="btn-group-vertical btn-group-xs" role="group" aria-label="..."><button type="button" class="btn btn-default">Left</button><button type="button" class="btn btn-danger">Middle</button><button type="button" class="btn btn-primary">Right</button></div>
三、下拉菜单与按钮使用
1）单按钮下拉菜单：见下拉菜单
2）分裂式按钮下拉菜单
<div class="btn-group"><button type="button" class="btn btn-primary">按钮1</button><button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button><ul class="dropdown-menu"><li class="dropdown-header">标题1</li><li><a href="#">菜单1</a></li><li><a href="#">菜单2</a></li><li role="separator" class="divider"></li><li class="dropdown-header">标题2</li><li><a href="#">菜单3</a></li><li><a href="#">菜单4</a></li></ul></div>
三、下拉菜单（Dropdown）插件
下拉菜单，没有涉及到交互部分，使用下拉菜单（Dropdown）插件，可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。
注意：data-toggle="dropdown" 必须要有
通过 JavaScript 调用下拉菜单切换 ：
$('.dropdown-toggle').dropdown()
小需求：在一的基础上添加鼠标放上去与离开时切换显示或隐藏下拉菜单
<div class="dropdown" ><button class="btn btn-success dropdown-toggle" type="button" id="ddbtn" data-toggle="dropdown">下拉菜单<span class="caret"></span></button><ul class="dropdown-menu" id="ddmenu" style="margin-top: -1px;"><li class="dropdown-header">标题1</li><li><a href="#">菜单1</a></li><li><a href="#">菜单2</a></li><li role="separator" class="divider"></li><li class="dropdown-header">标题2</li><li><a href="#">菜单3</a></li><li><a href="#">菜单4</a></li></ul></div>
$(function () {$("#ddbtn").mouseenter(function () {$(this).dropdown("toggle");}).mouseleave(function () {$(this).dropdown("toggle");});$("#ddmenu").mouseenter(function () {$("#ddbtn").dropdown("toggle");}).mouseleave(function () {$("#ddbtn").dropdown("toggle");});});
自己写一遍，加深存在感，详情参考官方文档：/components/#dropdowns
