一、css组件——下拉菜单
本章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现。
如需使用下列菜单，只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单：
.dropdown将下拉菜单触发器和下拉菜单包含在其中（下拉菜单父元素）
<h2 class="page-header">下拉菜单的应用</h2>
<div class="dropdown">
<button type="button" class="btn btn-danger" data-toggle="dropdown">
bootstrap课程体系
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#"></a>HTML</li>
<li><a href="#"></a>CSS</li>
<li><a href="#"></a>JS</li>
<li><a href="#"></a>NODE.JS</li>
</ul>
</div>
注意：Bootstrap 下拉菜单（Dropdown）插件：Bootstrap 下拉菜单 这一章讲解了下拉菜单，但是没有涉及到交互部分，本章将具体讲解下拉菜单的交互。使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。
如果您想要单独引用该插件的功能，那么您需要引用 dropdown.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用bootstrap.js 或压缩版的 bootstrap.min.js。
所有的插件依赖于 jQuery。所以必须在插件文件之前引用 jQuery。（也就是说其引用顺序如下：）
<!-- Bootstrap -->
<script src="js/jquery-2.2.4.min.js"></script> //引用在最前面
<link href="css/bootstrap.min.css" rel="stylesheet" >
<script src="js/bootstrap.min.js" rel="stylesheet"></script>
通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。
您可以使用dropdown-header 向下拉菜单的标签区域添加标题。
<h2 class="page-header">下拉菜单的应用</h2>
<div class="dropdown">
<button type="button" class="btn btn-danger" data-toggle="dropdown">
bootstrap课程体系
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-left">
<li class="dropdown-header"><a href="#">下拉菜单标题</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JS</a></li>
<li class="divider"></li>
<li><a href="#">PHP</a></li>
<li><a href="#">MYSQL</a></li>
<li><a href="#">Apache</a></li>
</ul>
</div>
二、css组件——按钮组
按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时，这就显得非常有用。您可以通过 Bootstrap 按钮（Button） 插件 添加可选的 JavaScript 单选框和复选框样式行为。
下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class：
| .btn-group | 该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。（将一组按钮放到一个容器中） |
<div class="btn-group"> <button type="button" class="btn btn-default">Button1</button> <button type="button" class="btn btn-default">Button2</button> </div> |
| .btn-toolbar | 该 class 有助于把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中，一般获得更复杂的组件。 |
<div class="btn-toolbar" role="toolbar"> <div class="btn-group">...</div> <div class="btn-group">...</div> </div> |
| .btn-group-lg, .btn-group-sm, .btn-group-xs | 这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。 |
<div class="btn-group btn-group-lg">...</div> <div class="btn-group btn-group-sm">...</div> <div class="btn-group btn-group-xs">...</div> |
| .btn-group-vertical | 该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。 |
<div class="btn-group-vertical"> ... </div> |
1、.btn-group
<h2 class="page-header">按钮组的应用</h2>
<div class="btn-group">
<button type="button" class="btn btn-warning">按钮 1</button>
<button type="button" class="btn btn-danger">按钮 2</button>
<button type="button" class="btn btn-primary">按钮 3</button>
</div>
从上面两个图可以看出，右边的图是什么加样式的，而左边的图是加了class="btn-group"样式的效果；
2、.btn-toolbar
<h2 class="page-header">按钮组的应用</h2>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-warning">按钮 1</button>
<button type="button" class="btn btn-danger">按钮 2</button>
<button type="button" class="btn btn-primary">按钮 3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning">按钮 4</button>
<button type="button" class="btn btn-success">按钮 5</button>
<button type="button" class="btn btn-default">按钮 6</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger">按钮 7</button>
<button type="button" class="btn btn-default">按钮 8</button>
<button type="button" class="btn btn-success">按钮 9</button>
</div>
</div>
3、.btn-group-lg, .btn-group-sm, .btn-group-xs（整个按钮组的大小）
<h2 class="page-header">按钮组的应用</h2>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-warning">按钮 1</button>
<button type="button" class="btn btn-danger">按钮 2</button>
<button type="button" class="btn btn-primary">按钮 3</button>
</div>
<div class="btn-group btn-group-sm" >
<button type="button" class="btn btn-warning">按钮 4</button>
<button type="button" class="btn btn-success">按钮 5</button>
<button type="button" class="btn btn-default">按钮 6</button>
</div>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-danger">按钮 7</button>
<button type="button" class="btn btn-default">按钮 8</button>
<button type="button" class="btn btn-success">按钮 9</button>
</div>
</div>
4、.btn-group-vertical
<h2 class="page-header">按钮组的应用</h2>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-vertical">
<button type="button" class="btn btn-warning">按钮 1</button>
<button type="button" class="btn btn-danger">按钮 2</button>
<button type="button" class="btn btn-primary">按钮 3</button>
</div>
<div class="btn-group btn-group-vertical" >
<button type="button" class="btn btn-warning">按钮 4</button>
<button type="button" class="btn btn-success">按钮 5</button>
<button type="button" class="btn btn-default">按钮 6</button>
</div>
<div class="btn-group btn-group-vertical">
<button type="button" class="btn btn-danger">按钮 7</button>
<button type="button" class="btn btn-default">按钮 8</button>
<button type="button" class="btn btn-success">按钮 9</button>
</div>
</div>
5、嵌套
您可以在一个按钮组内嵌套另一个按钮组，即，在一个 .btn-group 内嵌套另一个 .btn-group 。当您向让下拉菜单与一系列按钮组合使用时，就会用到这个。
<h2 class="page-header">按钮组的应用</h2>
<div class="btn-group">
<button type="button" class="btn btn-warning">按钮 1</button>
<button type="button" class="btn btn-danger">按钮 2</button>
<div class="btn-group">
<button type="button" class="btn btn-default 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>
三、按钮式的下拉菜单
本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单。如需向按钮添加下拉菜单，只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可。您也可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单。
1、单按钮式的下拉菜单
<h2 class="page-header">按钮组的应用</h2>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
默认
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">功能</a></li>
<li><a href="#">另一个功能</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
</ul>
</div>
<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" role="menu">
<li><a href="#">功能</a></li>
<li><a href="#">另一个功能</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
</ul>
</div>
2、分割的按钮下拉菜单
分割的按钮下拉菜单使用与下拉菜单按钮大致相同的样式，但是对下拉菜单添加了原始的功能。分割按钮的左边是原始的功能，右边是显示下拉菜单的切换。
<h2 class="page-header">分割的按钮下拉菜单</h2>
<div class="btn-group">
<button type="button" class="btn btn-danger">默认</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">切换下拉菜单</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">功能</a></li>
<li><a href="#">另一个功能</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">原始</button>
<button type="button" class="btn btn-primary dropdown-toggle"
data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">切换下拉菜单</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">功能</a></li>
<li><a href="#">另一个功能</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
</ul>
</div>
3、按钮下拉菜单的大小
<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown"> 默认 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">功能</a></li> <li><a href="#">另一个功能</a></li> <li><a href="#">其他</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown"> 原始 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">功能</a></li> <li><a href="#">另一个功能</a></li> <li><a href="#">其他</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle btn-xs" data-toggle="dropdown"> 成功 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">功能</a></li> <li><a href="#">另一个功能</a></li> <li><a href="#">其他</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> </div>
4、按钮上拉菜单
<h2 class="page-header">按钮上拉菜单</h2> <div class="btn-group dropup"> <button type="button" class="btn btn-default dropdown-toggle data-toggle="dropdown"> 默认 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">功能</a></li> <li><a href="#">另一个功能</a></li> <li><a href="#">其他</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> </div> <div class="btn-group dropup"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 原始 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">功能</a></li> <li><a href="#">另一个功能</a></li> <li><a href="#">其他</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> </div> </div>
