Bootstrap教程按钮式下拉菜单

单按钮下拉菜单

实例:

  1. <!-- Single button -->
  2. <div class="btn-group">
  3.   <button type="button" class="btn btn-Default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  4.     Action <span class="caret"></span>
  5.   </button>
  6.   <ul class="dropdown-menu">
  7.     <li><a href="#">Action</a></li>
  8.     <li><a href="#">Another action</a></li>
  9.     <li><a href="#">Something else here</a></li>
  10.     <li role="separator" class="divider"></li>
  11.     <li><a href="#">Separated link</a></li>
  12.   </ul>
  13. </div>

分裂式单按钮下拉菜单

实例:

  1. <!-- Single button -->
  2. <div class="btn-group">
  3.   <button type="button" class="btn btn-danger">Action</button>
  4.   <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  5.     <span class="caret"></span>
  6.     <span class="sr-only">Toggle Dropdown</span>
  7.   </button>
  8.   <ul class="dropdown-menu">
  9.     <li><a href="#">Action</a></li>
  10.     <li><a href="#">Another action</a></li>
  11.     <li><a href="#">Something else here</a></li>
  12.     <li role="separator" class="divider"></li>
  13.     <li><a href="#">Separated link</a></li>
  14.   </ul>
  15. </div>

向上弹出菜单按钮

实例:

  1.    <div class="btn-group dropup">
  2.       <button type="button" class="btn btn-default dropdown-toggle"  data-toggle="dropdown">  默认 <span class="caret"></span></button>
  3.       <ul class="dropdown-menu" role="menu">
  4.          <li><a href="#">功能</a></li>
  5.          <li><a href="#">另一个功能</a></li>
  6.          <li><a href="#">其他</a></li>
  7.          <li class="divider"></li>
  8.          <li><a href="#">分离的链接</a></li>
  9.       </ul>
  10.    </div>
  11.    <div class="btn-group dropup">
  12.       <button type="button" class="btn btn-primary dropdown-toggle"  data-toggle="dropdown">  原始 <span class="caret"></span>      </button>
  13.       <ul class="dropdown-menu" role="menu">
  14.          <li><a href="#">功能</a></li>
  15.          <li><a href="#">另一个功能</a></li>
  16.          <li><a href="#">其他</a></li>
  17.          <li class="divider"></li>
  18.          <li><a href="#">分离的链接</a></li>
  19.       </ul>
  20.    </div>

发布日期:

所属分类: BootStrap, 前端 标签: