Bootstrap-v3-组件-按钮式下拉菜单

按钮式下拉菜单

把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。

1、单按钮下拉菜单

只要改变一些基本的标记，就能把按钮变成下拉菜单的开关。

 

 

   <!-- 按钮式下拉菜单 -->
   <div class="btn-group">
     <button class="btn btn-primary 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>

2、分裂式按钮下拉菜单

2.1 向下弹出（默认）

 

 

   <!-- 按钮式下拉菜单(分裂式按钮下拉菜单) -->
  <div class="btn-group">
    <button class="btn btn-danger">按钮</button>
    <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>

2.2 向上弹出

 

 

     <!-- 按钮式下拉菜单(分裂式按钮下拉菜单 向下弹出) -->
  <div class="btn-group dropup">
    <button class="btn btn-danger">按钮</button>
    <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>

3、按钮式下拉菜单尺寸

按钮式下拉菜单适用所有尺寸的按钮。

 

 

   <!-- 按钮式下拉菜单(尺寸) -->
   <div class="btn-group">
     <button class="btn btn-primary btn-lg 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 class="btn-group">
     <button class="btn btn-primary btn-sm 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 class="btn-group">
     <button class="btn btn-primary btn-xs 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>