Bootstrap 3 - SPLessons

Bootstrap Plug-in

Chapter 40

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Bootstrap Plug-in

Bootstrap Plug-in

shape 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”.

Button Plug-in

shape Description

With Bootstrap plugin, interaction like button states which are controllable can be created or buttons groups with more components like toolbars are added.

Loading State

Add the class data-loading-text = "Loading..." to the button as the attribute to the button element.

<!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>

Output:

Single toggle

To toggle a button when clicked, add the attribute data-toggle = "button" to the button element.

<!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>

Output:

Summary

shape Key Points

  • Bootstrap has 12 reusable components and jQuery plugins.
  • Single toggle and loading state are the classes of button plug-in.