Bootstrap 组件 - 按钮组与下拉按钮（Button Groups & Button Dropdowns）

按钮组（Button Groups）
 
单个按钮组
用.btn-group封装多个带.btn的<button>
[html]  
<div class="btn-group">  
  <button class="btn">1</button>  
  <button class="btn">2</button>  
  <button class="btn">3</button>  
</div>  
 
多个按钮组
将多个<div class="btn-group">放进<div class="btn-易做图">中。
[html] 
<div class="btn-易做图">  
  <div class="btn-group">  
    ...  
  </div>  
  <div class="btn-group">  
    ...  
  </div>  
</div>  
 
垂直按钮组
向.btn-group添加.btn-group-vertical。
[html]  
<div class="btn-group btn-group-vertical">  
  ...  
</div>  
 
下拉按钮（Button Dropdowns）
 
例子
[html]  
<div class="btn-group">  
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">  
    Action  
    <span class="caret"></span>  
  </a>  
  <ul class="dropdown-menu">  
    <!-- dropdown menu links -->  
  </ul>  
</div>  
 
控制大小
同样使用.btn-large、.btn-small、.btn-mini控制大小。
 
分割的下拉按钮
[html]  
<div class="btn-group">  
  <button class="btn">Action</button>  
  <button class="btn dropdown-toggle" data-toggle="dropdown">  
    <span class="caret"></span>  
  </button>  
  <ul class="dropdown-menu">  
    <!-- dropdown menu links -->  
  </ul>  www.zzzyk.com
</div>  
 
向上出现的菜单
[html]  
<div class="btn-group dropup">  
  <button class="btn">Dropup</button>  
  <button class="btn dropdown-toggle" data-toggle="dropdown">  
    <span class="caret"></span>  
  </button>  
  <ul class="dropdown-menu">  
    <!-- dropdown menu links -->  
  </ul>  
</div>  

补充：Web开发 , 其他 ,

上一个：WEB项目启动加载的实现方式整理
下一个：Bootstrap 组件 - 下拉菜单（Dropdowns）