Bootstrap button


Bootstrap Button plug-in

Button (Button) was introduced in the Bootstrap button chapter. With the Button plug-in, you can add some interactions, such as controlling button states, or create button groups for other components (such as toolbars).

If you want to reference the function of this plug-in separately, then you need to reference button.js. Alternatively, as mentioned in the Bootstrap plugin overview chapter, you can reference bootstrap.js or the minified version of bootstrap.min.js.

Loading State

To add a loading state to a button, simply add data-loading-text="Loading..." to the button element as its Properties are enough, as shown in the following example:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮（Button）插件加载状态</title>
  <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

Run Instance»

Click "Run Instance" Button View Online Example

Single Switch

If you need to activate the switch of a single button (that is, change the normal state of the button to the pressed state, and vice versa), just add to the button element data-toggle="button" can be used as its attribute, as shown in the following example:

Example

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮（Button）插件单个切换</title>
  <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<button type="button" class="btn btn-primary" 
   data-toggle="button"> 单个切换
</button>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Checkbox

You can create a checkbox group and pass Add the data attribute data-toggle="buttons" to btn-group to add a toggle for the checkbox group.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮（Button）插件复选框</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

Radio Buttons (Radio)

Similarly, you can create a radio button group and add the data attribute data-toggle="buttons to btn-group " to add a toggle for the radio button group.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮（Button）插件单选按钮</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

Usage

You can enable the button (Button) plug-in through JavaScript as follows:

$('.btn').button( )

Options

No options.

Methods

The following are some useful methods in Button plug-ins:

MethodsDescriptionInstance
button('toggle') Switch the pressed state. Gives the button the appearance of being activated. You can enable automatic toggling of a button using the data-toggle attribute. 
$().button('toggle')
.button('loading')When loading, the button is disabled and the text changes to the button element's data-loading-text The value of the attribute. 
$().button('loading')
.button('reset')Reset the button state and restore the text content to the original content. This method is useful when you want to return a button to its original state. 
$().button('reset')
.button(string)The string in this method refers to any string declared by the user. Using this method, reset the button state and add new content. 
$().button(string)

Example

The following example demonstrates the usage of the above method:

Example

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮（Button）插件方法</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<h2>点击每个按钮查看方法效果</h2>
<h4>演示 .button('toggle') 方法</h4>
<div id="myButtons1" class="bs-example">
   <button type="button" class="btn btn-primary">原始</button>
</div>

<h4>演示 .button('loading') 方法</h4>
<div id="myButtons2" class="bs-example">
   <button type="button" class="btn btn-primary" 
      data-loading-text="Loading...">原始
   </button>
</div>

<h4>演示 .button('reset') 方法</h4>
<div id="myButtons3" class="bs-example">
   <button type="button" class="btn btn-primary" 
      data-loading-text="Loading...">原始
   </button>
</div>

<h4>演示 .button(string) 方法</h4>
<button type="button" class="btn btn-primary" id="myButton4" 
   data-complete-text="Loading finished">请点击我
</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> 


</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance