Bootstrap 下拉菜單

1.下拉菜單基本介紹

下拉菜單是能夠切換的，是以列表格式顯示連接上下文。

基本格式：

<div class="dropdown">
    <!--觸發器-->
    <button class="btn 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>
        <li><a href="#">選項3</a></li>
        <li><a href="#">選項4</a></li>
    </ul>
</div>    

顯示：

2.選項

右對齊（pull-right/dropdown-menu-right）：

在下拉菜單.dropdown-menu 中添加類 pull-right 來設置菜單右對齊。

例如：

分割線（divider）：

在列表<ul>中添加<li class="divider"></li>.便可在下拉菜單中添加選項分割線。例如：

<ul class="dropdown-menu">
        <li><a href="#">選項1</a></li>
        <li><a href="#">選項2</a></li>
        <li><a href="#">選項3</a></li>
        <li class="divider"></li>    
        <li><a href="#">選項4</a></li>
    </ul>

顯示以下：

標題（dropdown-header）：

在列表<ul>中添加<li class="dropdown-header"></li>.便可在下拉菜單中添加選項標題。例如：

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="dropdown-header">河南省</li>
    <li role="presentation">
        <a role="menuitem" tabindex="-1" href="#">鄭州</a>
    </li>
    <li role="presentation">
        <a role="menuitem" tabindex="-1" href="#">安陽</a>
    </li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="dropdown-header">陝西省</li>
    <li role="presentation">
        <a role="menuitem" tabindex="-1" href="#">西安</a>
    </li>
    <li role="presentation">
        <a role="menuitem" tabindex="-1" href="#">渭南</a>
    </li>
</ul>

顯示：

禁用（disabled）：

經過在<li>中添加類 .disabled 來設置下拉菜單中某一項禁用。例如：

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="dropdownMenu2">
        web<span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">HTML</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">CSS</a>
        </li>
        <li role="presentation"  class="disabled" >
            <a role="menuitem" tabindex="-1" href="#">javascript</a>
        </li><li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">禁用disabled</a>
        </li>
    </ul>
</div>

顯示以下，鼠標懸浮在javascript時，出現禁用標記：

向上彈出下拉菜單（dropup）：

 把<div class="dropdown">換成<div class="dropup">便可。

顯示結果：