Bootstrap的按钮插件(bootstrap-button.js)实际上是为用户提供了一种控制按钮状态的方法，通过状态的不同起到提示作用。这种状态包括按钮的显示文字和背景。针对这俩种状态Bootstrap分别提供了创建的方式及配套的一组操作方法。

下面分别给予说明。

引入文件

<link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-button.js"></script>

"显示文字"控制

该方式中有俩个核心需要把握，一个是如何设置文字，一个是如何控制文字的显示和隐藏。对于设置文字，Bootstrap提供了俩个标记：

data-loading-text 

data-complete-text 

前者一般用于等待后台处理中的状态，如：正在登陆...、正在加载...等等。后者一般用于后台处理结束时的状态，如：登陆成功、加载完毕(当然这种情况可能不存在)。

针对这俩个标记分别提供了俩个命名，用于将标记内容显示：

$().button('loading')

$().button('complete')

下面做个典型的登录例子：

Html代码

<button class="btn btn-primary" data-complete-text="登陆成功" data-loading-text="正在登陆..."  >登陆</button>

<script type="text/javascript">
$(".btn").on("click", function(){//为按钮绑定click事件
       var self = this;
       $(self).button('loading');//正在登陆中，显示data-loading-text 标记内容
	   
	   function doFinished(){
           $(self).button('complete');//登陆成功后，显示data-complete-text标记内容
       }
	   setTimeout(doFinished,"3000");//启动一个定时器，模拟登陆过程
   }
)

</script>

"背景"控制

背景有激活和非激活状态，用不同的背景表示。使用标记：

data-toggle="button" 

只要在按钮上加上此标记即可，点击按钮时就会在俩种背景下切换。例子：

<button class="btn btn-primary" data-toggle="button">单独开关</button>

另外，Bootstrap提供了个命令，通过此命名可用js控制背景的切换，如下：

$().button('toggle')

例子：

Html代码

<button class="btn btn-primary" data-toggle="button">单独开关</button>
<br/>
<a href="javascript:void(0)"  onClick="_switch()">切换</a>

<script type="text/javascript">
function _switch(){    
    $(".btn").button('toggle');
}
</script>

组合按钮应用

Bootstrap还提供了类似于checkbox组和radio组的效果，背景的激活和非激活状态类似于checkbox、radio的选中和非选中。

实例：

Html代码

<!-- checkbox组效果 -->
<div class="btn-group" data-toggle="buttons-checkbox">
  <button class="btn btn-primary">左</button>
  <button class="btn btn-primary">中</button>
  <button class="btn btn-primary">右</button>
</div>
 
<!-- radio组效果 -->
<div class="btn-group" data-toggle="buttons-radio">
  <button class="btn btn-primary">左</button>
  <button class="btn btn-primary">中</button>
  <button class="btn btn-primary">右</button>
</div>