Bootstrap button
description
Bootstrap Button (Button) JavaScript widget that allows you to strengthen the function of the button. You can control the state of the button, you can create a button group of components, such as toolbars.
What is required
You must reference jquery.js and bootstrap-button.js - two JavaScript files. They are located in the docs / assets / js folder.
How to use it
You can not write any JavaScript marked only by use of the plug-in, you can enable the button using JavaScript.
Examples
The first example demonstrates how to use the button without JavaScript plugin.
Examples
<Div class = "row">
<Div class = "span8">
<H2> Bootstrap button JavaScript widget instance </ h2>
<H3> Control Status </ h3>
<P> <button id = "fat-btn" data-loading-text = "loading ..." class = "btn btn-primary"> Loading State </ button> </ p>
<H3> item switches </ h3>
<P> <button class = "btn btn-primary" data-toggle = "button"> Single Toggle </ button> </ p>
<H3> check box </ h3>
<P> <div class = "btn-group" data-toggle = "buttons-checkbox">
<Button class = "btn btn-primary"> Left </ button>
<Button class = "btn btn-primary"> Middle </ button>
<Button class = "btn btn-primary"> Right </ button>
</ Div> </ p>
<H3> checkbox </ h3>
<P> <div class = "btn-group" data-toggle = "buttons-radio">
<Button class = "btn btn-primary"> Left </ button>
<Button class = "btn btn-primary"> Middle </ button>
<Button class = "btn btn-primary"> Right </ button>
</ Div> </ p>
</ Div>
</ Div>
</ Div>
<-! Except 'Control state', other buttons require only jquery.js and bootstrap-button.js JavaScript files ->
<Script type = "text / javascript" src = "/ twitter-bootstrap / twitter-bootstrap-v2 / docs / assets / js / jquery.js"> </ script>
<Script src = "/ twitter-bootstrap / twitter-bootstrap-v2 / docs / assets / js / assets / js / bootstrap-transition.js"> </ script>
<Script src = "/ twitter-bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-alert.js"> </ script>
<Script src = "/ twitter-bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-modal.js"> </ script>
<Script src = "/ twitter-bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-dropdown.js"> </ script>
<Script src = "/ twitter-bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-scrollspy.js"> </ script>
<Script src = "/ twitter-bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-tab.js"> </ script>
<Script src = "/ twitter-bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-tooltip.js"> </ script>
<Script src = "/ twitter-bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-popover.js"> </ script>
<Script src = "/ twitter-bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-button.js"> </ script>
<Script src = "/ twitter-bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-carousel.js"> </ script>
<Script src = "/ twitter-bootstrap / twitter-bootstrap-v2 / docs / assets / js / bootstrap-typeahead.js"> </ script>
<Script src = "/ twitter-bootstrap / twitter-bootstrap-v2 / docs / assets / js / application.js"> </ script>
View online examples
Button is enabled through javascript
To enable the button through JavaScript, please use the following JavaScript code, where '.nav-tabs' is a class that contains the buttons div.
$ ( '. Nav-tabs'). Button ()
method
The plug-in has some methods. We will now be discussed by the usage code.
$ (). Button ( 'toggle')
<Button class = "btn" data-toggle = "button"> ... </ button>
The method of switching the button state. It gives the appearance of button states and has been activated. Using the 'data-toggle = "button"' button automatically switches to the active state.
$ (). Button ( 'loading')
<Button class = "btn" data-loading-text = "loading stuff ..."> ... </ button>
The state method Settings button loading - coming home button is disabled and the text is switched to loading. You can define loading text on the button element by using the 'data-loading-text' property.
If you use the Firefox browser, you will find that, after the page loads, disabled does not automatically released, please use the 'autocomplete = "off"' to avoid this problem.
$ (). Button ( 'reset')
The method reset button status, and button text back to the original value.
$ (). Button (string)
<Button class = "btn" data-loading-text = "loading stuff ..."> ... </ button>
The method reset button status, text and reset buttons on the value passed.
<Button class = "btn" data-complete-text = "finished!"> ... </ Button> <Script> $ ( '. Btn'). Button ( 'complete') </ Script>
Click here to download the tutorial to use all the HTML, CSS, JS and image files.