一、下拉菜單
用于顯示鏈接列表的可切換、有上下文的菜單。下拉菜單的 JavaScript 插件讓它具有了交互性。
1、實例
將下拉菜單觸發(fā)器和下拉菜單都包裹在 .dropdown 里，或者另一個聲明了 position: relative; 的元素。然后加入組成菜單的 HTML 代碼。
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
aria-haspopup :true表示點擊的時候會出現(xiàn)菜單或是浮動元素； false表示沒有pop-up效果。
aria-expanded:表示展開狀態(tài)。默認為undefined, 表示當前展開狀態(tài)未知。其它可選值：true表示元素是展開的；false表示元素不是展開的
aria-labelledby：當想要的標簽文本已在其他元素中存在時，可以使用aria-labelledby，并將其值為所有讀取的元素的id。如下：
當ul獲取到焦點時，屏幕閱讀器是會讀：“選擇您的職位”
data-toggle: 表示什么事件類型發(fā)生
二、按鈕式下拉菜單
把任意一個按鈕放入 .btn-group 中，然后加入適當?shù)牟藛螛撕?，就可以讓按鈕作為菜單的觸發(fā)器了。
1、單按鈕下拉菜單
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
鼠標指向時，顯示背景顏色。
2、分裂式下拉菜單
只是多一個分開的按鈕。
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>?
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
可以看到分成了左右兩個按鈕。
三、面板
某些時候你可能需要將某些 DOM 內(nèi)容放到一個盒子里。對于這種情況，可以試試面板組件。
1、基本實例
默認的 .panel 組件所做的只是設(shè)置基本的邊框（border）和內(nèi)補（padding）來包含內(nèi)容。
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
顯示效果：
2、帶標題的面板
通過 .panel-heading 可以很簡單地為面板加入一個標題容器。你也可以通過添加設(shè)置了 .panel-title 類的 <h1>-<h6> 標簽，添加一個預(yù)定義樣式的標題。不過，<h1>-<h6> 標簽的字體大小將被 .panel-heading 的樣式所覆蓋。
為了給鏈接設(shè)置合適的顏色，務(wù)必將鏈接放到帶有 .panel-title 類的標題標簽內(nèi)。
