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