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

按钮组（Button Groups）

单个按钮组

用.btn-group封装多个带.btn的<button>

[html] view plain copy

1. <div class="btn-group">  
2.   <button class="btn">1</button>  
3.   <button class="btn">2</button>  
4.   <button class="btn">3</button>  
5. </div>  

多个按钮组

将多个<div class="btn-group">放进<div class="btn-toolbar">中。

[html] view plain copy

1. <div class="btn-toolbar">  
2.   <div class="btn-group">  
3.     ...  
4.   </div>  
5.   <div class="btn-group">  
6.     ...  
7.   </div>  
8. </div>  

垂直按钮组

向.btn-group添加.btn-group-vertical。

[html] view plain copy

1. <div class="btn-group btn-group-vertical">  
2.   ...  
3. </div>  

下拉按钮（Button Dropdowns）

例子

[html] view plain copy

1. <div class="btn-group">  
2.   <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">  
3.     Action  
4.     <span class="caret"></span>  
5.   </a>  
6.   <ul class="dropdown-menu">  
7.     <!-- dropdown menu links -->  
8.   </ul>  
9. </div>  

控制大小

同样使用.btn-large、.btn-small、.btn-mini控制大小。

分割的下拉按钮

[html] view plain copy

1. <div class="btn-group">  
2.   <button class="btn">Action</button>  
3.   <button class="btn dropdown-toggle" data-toggle="dropdown">  
4.     <span class="caret"></span>  
5.   </button>  
6.   <ul class="dropdown-menu">  
7.     <!-- dropdown menu links -->  
8.   </ul>  
9. </div>  

向上出现的菜单

[html] view plain copy

1. <div class="btn-group dropup">  
2.   <button class="btn">Dropup</button>  
3.   <button class="btn dropdown-toggle" data-toggle="dropdown">  
4.     <span class="caret"></span>  
5.   </button>  
6.   <ul class="dropdown-menu">  
7.     <!-- dropdown menu links -->  
8.   </ul>  
9. </div>  

JavaScript

例子

加载状态。添加data-loading-text="Loading..."。

[html] view plain copy

1. <button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>  

开关状态。添加data-toggle="button"。

[html] view plain copy

1. <button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>  

复选框。在btn-group后添加data-toggle="buttons-checkbox"。

[html] view plain copy

1. <div class="btn-group" data-toggle="buttons-checkbox">  
2.   <button type="button" class="btn btn-primary">Left</button>  
3.   <button type="button" class="btn btn-primary">Middle</button>  
4.   <button type="button" class="btn btn-primary">Right</button>  
5. </div>  

单选。在btn-group后添加data-toggle="buttons-radio"。

[html] view plain copy

1. <div class="btn-group" data-toggle="buttons-radio">  
2.   <button type="button" class="btn btn-primary">Left</button>  
3.   <button type="button" class="btn btn-primary">Middle</button>  
4.   <button type="button" class="btn btn-primary">Right</button>  
5. </div>  

用法

JavaScript代码触发开关状态。

[javascript] view plain copy

1. $().button("toggle")  

也可添加data-toggle属性自动触发。

[html] view plain copy

1. <button type="button" class="btn" data-toggle="button" >…</button>  

使用JavaScript代码触发加载状态，同时按钮显示data-loading-text属性指定的值。

[javascript] view plain copy

1. $().button("loading")  

[html] view plain copy

1. <button type="button" class="btn" data-loading-text="loading stuff..." >...</button>  

注意：Firefox在页面载入时会保持按钮无效状态。变通方案是在按钮上应用autocomplete="off"。

使用JavaScript代码重置按钮状态。

[javascript] view plain copy

1. $().button("reset")  

重置按钮状态，并将按钮文字变成指定的文字。下例的complete仅为例子，可以替换。

[html] view plain copy

1. <button class="btn" data-complete-text="finished!" >...</button>  
2. <script>  
3.   $('.btn').button('complete')  
4. </script>