Bootstrap下拉選單中使用 dropdown-header 來顯示選單標題,和上一篇說道的分割線一樣
<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" 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> <div class="dropdown"> <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"> 選擇運動 </button> <ul class="dropdown-menu"> <li class="dropdown-header">第一部分標題</li> <li><a href="javascript:void(0)">足球</a></li> <li><a href="javascript:void(0)">籃球</a></li> <li><a href="javascript:void(0)">乒乓球</a></li> <li class="divider"></li> <li class="dropdown-header">蔬菜</li> <li><a href="javascript:void(0)">足球</a></li> <li><a href="javascript:void(0)">籃球</a></li> <li><a href="javascript:void(0)">乒乓球</a></li> </ul> </div>