## 小圖標組件
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>
~~~
