Description
Bootstrap is different from other frameworks as it has selection of reusable components and jQuery plugins which can be used as per the requirement.One of the important Bootstrap Plug-in is "Button Plug-in".
Description
With Bootstrap plugin, interaction like button states which are controllable can be created or buttons groups with more components like toolbars are added.
Add the class 
To toggle a button when clicked, add the attribute 
data-loading-text = "Loading..." to the button as the attribute to the button element.
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Pagination</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<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>
</body>
</html>
[/html]
Output:
data-toggle = "button" to the button element.
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Pagination</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<button type = "button" class = "btn btn-primary" data-toggle = "button">
Single toggle
</button>
</body>
</html>
[/html]
Output:
Key Points
- Bootstrap has 12 reusable components and jQuery plugins.
- Single toggle and loading state are the classes of button plug-in.