Bootstrap笔记10

按钮式下拉菜单

1.单按钮下拉菜单

只需要简单地在一个 .btn-group 容器中放置按钮和下拉菜单即可

<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" role="menu">
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
  
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div>   

2.分裂式按钮下拉菜单

分割的按钮下拉菜单使用与下拉菜单按钮大致相同的样式，但是对下拉菜单添加了原始的功能。分割按钮的左边是原始的功能，右边是显示下拉菜单的切换。

<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>
 
   </button>
   <ul class="dropdown-menu" role="menu">
     <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
  
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
   </ul>
</div>

3.按钮大小

.btn-lg——大
不写——默认
.btn-sm——小
.btn-xs——更小

4.向上弹出式菜单

菜单也可以往上拉伸的，只需要简单地向父 .btn-group 容器添加 .dropup 即可

<div class="btn-group dropup">

</div>