## 小图标组件
Bootstrap 提供了免费的 263 个小图标（数了n次）。
**部分图标**
可以使用`<i>`或`<span>`标签来配合使用，具体如下：
**使用小图标**
~~~html
<span class="glyphicon glyphicon-lock"></span>
<i class="glyphicon glyphicon-lock"></i>
~~~
**也可以结合按钮**
~~~html
<button class="btn btn-primary btn-xs">
<span class="glyphicon glyphicon-lock"></span>
</button>
~~~
## 下拉菜单组件
下拉菜单，就是点击一个元素或按钮，触发隐藏的列表显示出来。
**基本格式**
~~~html
<div class="dropdown open">
<button class="btn btn-default" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu ">
<li class="dropdown-header">下拉标题</li>
<li><a href="#">首页</a></li>
<li class="divider">
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></li>
<li class="disabled"><a href="#">关于</a></li>
</ul>
</div>
~~~
按钮和菜单需要包裹在`.dropdown` 的容器里，而作为被点击的元素按钮需要设置`data-toggle="dropdown"`才能有效。对于菜单部分，设置 `class="dropdown-menu"`才能自动隐藏并添加固定样式。设置 `class="caret"`表示箭头，可上可下。
**设置向上触发**
~~~html
<div class=”dropup”>
~~~
**菜单项居右对齐，默认值是`dropdown-menu-left`**
~~~html
<ul class="dropdown-menu dropdown-menu-right">
~~~
**设置菜单的标题，不要加超链接**
~~~html
<li class="dropdown-header">下拉标题</li>
~~~
**设置菜单的分割线**
~~~html
<li class="divider"></li>
~~~
**设置菜单的禁用项**
~~~html
<li class="disabled"><a href="#">关于</a></li>
~~~
**让菜单默认显示**
~~~html
<div class="dropdown open">
~~~
## 按钮组组件
按钮组就是多个按钮集成在一个容器里形成独有的效果。
**基本格式**
~~~html
<div class="btn-group">
<button class="btn btn-default">左 </button>
<button class="btn btn-default">中 </button>
<button class="btn btn-default">右 </button>
</div>
~~~
**将多个按钮组整合起来便于管理**
~~~html
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default">左 </button>
<button class="btn btn-default">中 </button>
<button class="btn btn-default">右 </button>
</div>
<div class="btn-group">
<button class="btn btn-default">左 </button>
<button class="btn btn-default">中 </button>
<button class="btn btn-default">右 </button>
</div>
<div class="btn-group">
<button class="btn btn-default">左 </button>
<button class="btn btn-default">中 </button>
<button class="btn btn-default">右 </button>
</div>
</div>
~~~
**嵌套一个分组，比如下拉菜单**
~~~html
<div class="btn-group">
<button class="btn btn-default">左 </button>
<button class="btn btn-default">中 </button>
<button class="btn btn-default">右 </button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">下拉标题</li>
<li><a href="#">首页</a></li>
<li class="divider">
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></li>
<li class="disabled"><a href="#"> 关于</a></li>
</ul>
</div>
</div>
~~~
**设置按钮组垂直排列**
~~~html
<div class="btn-group-vertical"></div>
~~~
**如果需要使用`<button>`标签，则需要对每个按钮进行群组**
~~~html
<div class="btn-group-justified">
<div class="btn-group">
<button class="btn btn-default">左</button>
</div>
<div class="btn-group">
<button class="btn btn-default">左</button>
</div>
<div class="btn-group">
<button class="btn btn-default">左</button>
</div>
</div>
~~~
