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>
