Bootstrap下拉菜单（Dropdowns）和按钮

1.下拉菜单

<div class="dropdown">
   <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
      data-toggle="dropdown">
      主题
      <span class="caret"></span>//设置向下的小三角
   </button>
   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">Java</a>
      </li>
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
      </li>
           <li role="presentation" class="divider"></li>//设置一条分割线
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
      </li>
   </ul>
</div>

2.增加下拉菜单标题

 <li role="presentation" class="dropdown-header">下拉菜单标题</li>

3.按钮组

.btn-group:形成基本的按钮组
.btn-toolbar:把几个按钮组组合在一起
.btn-group-lg,.btn-group-sm,.btn-group-xs:整个按钮组大小的调整
.btn-group-vertical:按钮垂直堆叠显示，而不是水平堆叠显示

//按钮组，三个按钮在一行水平显示
<div class="btn-group">
  <button type="button" class="btn btn-default">按钮 1</button>
  <button type="button" class="btn btn-default">按钮 2</button>
  <button type="button" class="btn btn-default">按钮 3</button>
</div>

//按钮在一行显示，三个为一组
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
  <button type="button" class="btn btn-default">按钮 1</button>
  <button type="button" class="btn btn-default">按钮 2</button>
  <button type="button" class="btn btn-default">按钮 3</button>
 </div>
  <div class="btn-group">
  <button type="button" class="btn btn-default">按钮 4</button>
  <button type="button" class="btn btn-default">按钮 5</button>
  <button type="button" class="btn btn-default">按钮 6</button>
  </div>
 </div>

//按钮嵌套
<div class="btn-group"> //大的按钮组
  <button type="button" class="btn btn-default">按钮 1</button>
  <button type="button" class="btn btn-default">按钮 2</button>

  <div class="btn-group"> //嵌套的小的按钮组
    <button type="button" class="btn btn-default 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>
    </ul>
  </div>
</div>

4.分割的按钮下拉菜单

<div class="btn-group">
   <button type="button" class="btn btn-default">默认</button>//先定义一个普通按钮，显示文字为默认
   <button type="button" class="btn btn-default dropdown-toggle" 
      data-toggle="dropdown">//再定义一个按钮，显示为黑色小三角
      <span class="caret"></span>
      <span class="sr-only">切换下拉菜单</span>
   </button>
   <ul class="dropdown-menu" role="menu">//下拉菜单的内容
      <li><a href="#">功能</a></li>
      <li><a href="#">另一个功能</a></li>
      <li><a href="#">其他</a></li>
      <li class="divider"></li>
      <li><a href="#">分离的链接</a></li>
   </ul>
</div>

5.按钮上拉菜单
在.btn-group容器中添加.dropup