The button is used for creating button control which defines clickable action. The buttons are integral part of HTML which selects the elements that are of type button. The buttons are used for various purposes such as submit button, reset button etc on a web page. It is often used with form element, can be also used as standalone control. The Bootstrap allows enhancing functionality of button. We can create group of buttons or button states for components like toolbars.
also read:
The following examples demonstrate use of different techniques used for implementing the buttons in Bootstrap. If you have any questions about bootstrap button plugin, please write it in the comments section.
Bootstrap Stateful Button
We can set normal state of a button to a loading state by using the value of data-loading-text attribute. The following is an example:
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(function(){
$(".btn").click(function(){
$(this).button('loading').delay(1000).queue(function(){
$(this).button('reset');
});
});
});
</script>
</head>
<body>
<div class="container">
<h2>Stateful Button</h2>
<button type="button" class="btn btn-warning" data-loading-text="Loading...">Load Data</button>
</div>
</body>
</html>
As shown in the above script, we have used attribute called data-loading-text=”Loading…” to load the data on the webpage. When we click on the button, the click method occurs and it starts loading the data by showing the text “Loading…” . When it reaches to the 1000ms, it resets the button.
Bootstrap Single Toggle Button
We can create single toggling on the button, by simple using data-toggle=”button” attribute which activates toggling from normal state to push state and vice versa. The following is an example:
<!DOCTYPE html> <head> <title>Bootstrap Example</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Single Toggle Button</h2><br> <button type="button" class="btn btn-info" data-toggle="button">Toggle Button</button> <button type="button" class="btn btn-success" data-toggle="button">Toggle Button</button> <button type="button" class="btn btn-warning" data-toggle="button">Toggle Button</button> <button type="button" class="btn btn-danger" data-toggle="button">Toggle Button</button> </div> </body> </html>
Bootstrap Buttons Checkbox
The checkboxes are alternatively referred to as selection boxes, which are commonly used when more than one option may need to be selected. We can create group of checkboxes, by simply adding data-toggle=”buttons” to the .btn-group class within the div element as shown in the following example:
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Buttons Checkbox</h2><br>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success">
<input type="checkbox">Checkbox-One
</label>
<label class="btn btn-success">
<input type="checkbox">Checkbox-Two
</label>
<label class="btn btn-success">
<input type="checkbox">Checkbox-Three
</label>
</div>
</div>
</body>
</html>
Bootstrap Buttons Radio
A radio button is a round circle represents choices in a common option list which are used when only one option is selectable. We can create group of radio inputs, by simply adding data-toggle=”buttons” to the .btn-group class within the div element as shown in the following example:
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Buttons Radio</h2><br>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-warning">
<input type="radio" name="options" id="myoption1">Radio-One
</label>
<label class="btn btn-warning">
<input type="radio" name="options" id="myoption2">Radio-Two
</label>
<label class="btn btn-warning">
<input type="radio" name="options" id="myoption3">Radio-Three
</label>
</div>
</div>
</body>
</html>
Bootstrap Buttons via JavaScript
It’s possible to enable the buttons by using the JavaScript method $(selector).button() . The following is an example:
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).button('loading').delay(500).queue(function(){
$(this).button('reset');
});
});
});
</script>
</head>
<body>
<div class="container">
<h2>Buttons via JavaScript</h2><br>
<div class="tabbale">
<ul class="nav nav-tabs">
<li class="active"><a href="#mydiv" data-toggle="tab" data-loading-text="Loading...">Tab 1</a></li>
<li><a href="#mydiv1" data-toggle="tab" data-loading-text="Loading...">Tab 2</a></li>
<li><a href="#mydiv2" data-toggle="tab" data-loading-text="Loading...">Tab 3</a></li>
</ul>
<div class="tab-content">
<div id="mydiv" class="tab-pane active fade in">
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain textHTML documents are also called web pages. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.</p>
</div>
<div id="mydiv1" class="tab-pane fade">
<p>CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. Styles define how to display HTML elements. External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.</p>
</div>
<div id="mydiv2" class="tab-pane fade">
<p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world. All modern HTML pages are using JavaScript. The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements. JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap Buttons Methods
Following table shows Bootstrap’s button methods:
| Method | Description |
|---|---|
| $().button(‘toggle’) | It toggles push state of the button which makes the button appear like it has been activated. |
| $().button(‘loading’) | It sets button state to loading. i.e. when loading, the button is disabled and swaps the text to loading text. |
| $().button(‘reset’) | It resets the button state and swaps text to original text. |
| $().button(string) | It resets the button state by swapping text to any data defined text state. |
The following is an example:
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$("#toggle-demo .btn").click(function(){
$(this).button('toggle');
});
});
$(function() {
$("#load-demo .btn").click(function(){
$(this).button('loading').delay(1000).queue(function() {
});
});
});
$(function() {
$("#reset-demo .btn").click(function(){
$(this).button('loading').delay(1000).queue(function() {
$(this).button('reset');
});
});
});
$(function() {
$("#string-demo").click(function(){
$(this).button('loading').delay(1000).queue(function() {
$(this).button('complete');
});
});
});
</script>
</head>
<body>
<div class="container">
<h2>Click on each of the buttons to see the effects of methods</h2>
<h4>$().button('toggle')Method</h4>
<div id="toggle-demo">
<button type="button" class="btn btn-warning">Primary</button>
</div><br>
<h4>$().button('loading')Method</h4>
<div id="load-demo">
<button type="button" class="btn btn-warning"
data-loading-text="Loading data...">Primary
</button>
</div><br>
<h4>$().button('reset')Method</h4>
<div id="reset-demo">
<button type="button" class="btn btn-warning"
data-loading-text="Loading data...">Primary
</button>
</div><br>
<h4>$().button(string)Method</h4>
<button type="button" class="btn btn-warning" id="string-demo"
data-complete-text="Loading completed">Click Me
</button>
</div>
</body>
</html>
The above script defines button methods which are specified in the above table. The first method, button(‘toggle’) which gives the button the appearance that it has been activated. It uses toggle-demo id to change its state when we click on the button. The second method, .button(‘loading’) sets the button state to loading. It uses load-demo id which swaps the button text to loading text when button is clicked. The third method, .button(‘reset’) resets button state by swapping text to original text and uses reset-demo id to resets the button. The last method, .button(string) swaps the text with the string specified by the user by using the string-demo id.
Leave a Reply