上一小節講解通過添加“divider”可以將下拉菜單分組，為了讓這個分組更明顯，還可以給每個組添加一個頭部（標題）。如下：
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜單 <span class="caret"></span> </button> <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" class="divider"></li> <li role="presentation" class="dropdown-header">第二部分菜單頭部</li> … <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> </ul> </div>
對應的樣式如下：
/*查看bootstrap.css文件第3090行～第3096行*/
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #999;
}
運行效果如下：
我來試試：完成下面任務
編寫代碼完成下拉菜單，效果如下圖：
備注:這一小節沒有正確性驗證，請查看結果窗口與任務所給的結果圖片是否一致，從而判斷輸入代碼是否正確。
參考代碼如下：
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
食物
<span class="caret"></span>
</button>
<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"><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>
<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>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">面條</a></li>
</ul>
</div>
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報