Playing with Buttons in Bootstrap

How to set text, delay action and customize the behavior of Bootstrap buttons?

<script>
    $(document).ready(function () {
        $(".btn").click(function () {
            $(this).button('loading');
        });
    });
</script>
</head>
<body>
        <h2>Bootstrap button</h2>
        <button type="button" class="btn btn-primary" data-loading-text="hai">click</button>
        <button type="button" class="btn btn-success" data-loading-text="bye">Close</button>
</body>

In the above code snippet we have defined the loading button, we have taken button with class value as btn btn-success and btn btn-primary and data-loading-text with value as hai and bye and in the script function we have juery function $(".btn") which calls the function of the button in the body function and .button('loading') loads the button when the button is clicked

output

Toggle button

We can create button toggle using javascript

<script>
    $(document).ready(function () {
        $(".btn").click(function () {
            $(this).button('toggle');
        });
    });
</script>
</head>
<body>
        <h2>Bootstrap button</h2>
        <button type="button" class="btn btn-primary">click</button>
        <button type="button" class="btn btn-success">Close</button>
</body>

Toggle button

In the above code snippet we have defined the toggle button, we have taken button with class value as btn btn-success and btn btn-primary and in the script function we have juery function $(".btn") which calls the function of the button in the body function and .button('toggle') toggles the button when the button is clicked

output

Reset button

Reset button with javascript is used change the button to original text

 <script>
        $("document").ready(function () {
            $('.btn').click(function () {
                $(this).button("loading").delay(500).queue(function () {
                    $(this).button("reset");
                    $(this).dequeue();
                });
            });
        });
    </script>
</head>
<body>
    <h2>Reset button</h2>
       <button type="button" class="btn btn-primary">Open</button>
       <button type="button" class="btn btn-success">Close</button>
</body>

Reset button

In the above code snippet we have defined the reset button, we have taken two button with class value as btn-primary and btn-success with button value as open and close
In the next step we have taken script function to define the reset button and we have taken as $(.btn) as click function which defines the button in the body function, in the next line we have $(this).button(loading) which loads the button and , delay(500).queue(function) defines the time of the function,after creating that we have button(reset) to reset the button, in the last step we have $(this).dequeue(); to load the button and reset button

output

String button

It is used to enter the text in the button for example we have $(this).button(string value), we can declare any value in the string value in this , $(this).button("bootstrap") and we need to add the data-bootstrap-text in the button and define the value for that value

 <script>
        $("document").ready(function () {
            $('.btn').click(function () {
                $(this).button("loading").delay(500).queue(function () {
                    $(this).button('bootstrap');
                    $(this).dequeue();
                });
            });
        });
    </script>
</head>
<body>
    <h2>String button</h2>
       <button type="button" class="btn btn-primary" data-bootstrap-text="Load complete">Open</button>
</body>

String button

In the above code snippet we have defined the string button, we have taken the button with class value btn -primary , data-bootstrap-text value as Load-complete
In the next line we have the screipt function we have the $('.btn') to call the button and we have the button ("loading") function with delay(500) and in the next line we have the function of the string button as button('bootstrap') which is used to call the value in the button as data-bootstrap-text value as Load-Complete

output