Button 插件（Button Plugin）

按钮在Bootstrap按钮一章中解释。 使用此插件，您可以添加一些交互，例如控制按钮状态，或者为工具栏等更多组件创建按钮组。

如果您想单独包含此插件功能，则需要button.js 。 另外，如Bootstrap插件概述一章所述，您可以包含bootstrap.js或缩小bootstrap.min.js 。

装货状态

要向按钮添加加载状态，只需将data-loading-text = "Loading..."作为属性添加到按钮元素，如以下示例所示 -

<button id = "fat-btn" class = "btn btn-primary" data-loading-text = "Loading..." type = "button"> 
   Loading state 
</button>
<script>
   $(function() { 
      $(".btn").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
            // $(this).button('reset');
         });        
      });
   });  
</script>

当您单击按钮时，输出将如下图所示 -

单切换

要在单个按钮上激活切换（即将按钮的正常状态更改为推动状态，反之亦然），请将data-toggle = "button"作为属性添加到按钮元素，如以下示例所示 -

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

复选框 (Checkbox)

您可以创建一组复选框，并通过简单地将数据属性data-toggle = "buttons"到btn-group.来添加切换到它btn-group.

<div class = "btn-group" data-toggle = "buttons">
   <label class = "btn btn-primary">
      <input type = "checkbox"> Option 1
   </label>
   <label class = "btn btn-primary">
      <input type = "checkbox"> Option 2
   </label>
   <label class = "btn btn-primary">
      <input type = "checkbox"> Option 3
   </label>
</div>

Radio

类似地，您可以通过简单地将数据属性data-toggle = "buttons"到btn-group来创建一组无线电输入并添加切换到它。

<div class = "btn-group" data-toggle = "buttons">
   <label class = "btn btn-primary">
      <input type = "radio" name =" options" id = "option1"> Option 1
   </label>
   <label class = "btn btn-primary">
      <input type = "radio" name = "options" id = "option2"> Option 2
   </label>
   <label class = "btn btn-primary">
      <input type = "radio" name = "options" id = "option3"> Option 3
   </label>
</div>	

用法 (Usage)

您可以via JavaScript启用按钮插件，如下所示 -

$('.btn').button()

选项 (Options)

There are no options.

方法 (Methods)

下面给出了一些有用的按钮插件方法 -

$().button('toggle')

$().button('loading')

$().button('reset')

$().button(string)

例子 (Example)

以下示例演示了使用上述方法 -

<h2>Click on each of the buttons to see the effects of methods</h2>
<h4>Example to demonstrate .button('toggle') method</h4>
<div id = "myButtons1" class = "bs-example">
   <button type = "button" class = "btn btn-primary">Primary</button>
</div>
<h4>Example to demonstrate  .button('loading') method</h4>
<div id = "myButtons2" class = "bs-example">
   <button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
      Primary
   </button>
</div>
<h4>Example to demonstrate .button('reset') method</h4>
<div id = "myButtons3" class = "bs-example">
   <button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
      Primary
   </button>
</div>
<h4>Example to demonstrate  .button(string) method</h4>
<button type = "button" class = "btn btn-primary" id = "myButton4" 
   data-complete-text = "Loading finished">
   Click Me
</button>
<script type = "text/javascript">
   $(function () {
      $("#myButtons1 .btn").click(function(){
         $(this).button('toggle');
      });
   });
   $(function() { 
      $("#myButtons2 .btn").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
         });        
      });
   });   
   $(function() { 
      $("#myButtons3 .btn").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
            $(this).button('reset');
         });        
      });
   });  
   $(function() { 
      $("#myButton4").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
            $(this).button('complete');
         });        
      });
   }); 
</script>