上一小節(jié)講解通過(guò)添加“divider”可以將下拉菜單分組，為了讓這個(gè)分組更明顯，還可以給每個(gè)組添加一個(gè)頭部（標(biāo)題）。如下：
<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="#">下拉菜單項(xiàng)</a></li> … <li role="presentation" class="divider"></li> <li role="presentation" class="dropdown-header">第二部分菜單頭部</li> … <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li> </ul> </div>
對(duì)應(yīng)的樣式如下：
/*查看bootstrap.css文件第3090行～第3096行*/
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #999;
}
運(yùn)行效果如下：
我來(lái)試試：完成下面任務(wù)
編寫(xiě)代碼完成下拉菜單，效果如下圖：
備注:這一小節(jié)沒(méi)有正確性驗(yàn)證，請(qǐng)查看結(jié)果窗口與任務(wù)所給的結(jié)果圖片是否一致，從而判斷輸入代碼是否正確。
參考代碼如下：
<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="#">蘋(píng)果</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>
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
打開(kāi)微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書(shū)簽
舉報(bào)