@@ -136,32 +136,11 @@ This class uses `pointer-events: none` to try to disable the link functionality
...
@@ -136,32 +136,11 @@ This class uses `pointer-events: none` to try to disable the link functionality
While button classes can be used on `<a>` and `<button>` elements, only `<button>` elements are supported within our nav and navbar components.
While button classes can be used on `<a>` and `<button>` elements, only `<button>` elements are supported within our nav and navbar components.
{% endcallout %}
{% endcallout %}
## JavaScript behavior
## Button plugin
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
### Custom states
### Toggle states
Use JavaScript to change the text and "state" of a particular button. For the sake of this demonstration, we are using `data-loading-text` and `$().button('loading')`, but that's not the only state you can use. [Custom strings of text](#buttons-methods) can also be used with `$().button(string)`.
**This feature is deprecated since v3.3.5 and will be removed in v4.**
**Heads up!** You'll likely need to work around Firefox's [persisted form control states across page loads bug](https://github.com/twbs/bootstrap/issues/793)(e.g., disabled and checked states) with `autocomplete="off"`. See [Mozilla bug #654072](https://bugzilla.mozilla.org/show_bug.cgi?id=654072) for details.
Add `data-toggle="button"` to toggle a button's `active` state. If you're pre-toggling a button, you must manually add the `.active` class **and**`aria-pressed="true"` to the `<button>`.
Add `data-toggle="button"` to toggle a button's `active` state. If you're pre-toggling a button, you must manually add the `.active` class **and**`aria-pressed="true"` to the `<button>`.
...
@@ -171,7 +150,7 @@ Add `data-toggle="button"` to toggle a button's `active` state. If you're pre-to
...
@@ -171,7 +150,7 @@ Add `data-toggle="button"` to toggle a button's `active` state. If you're pre-to
</button>
</button>
{% endexample %}
{% endexample %}
### Checkbox and radio
### Checkbox and radio buttons
Bootstrap's `.button` styles can be applied to other elements, such as `<label>`s, to provide checkbox or radio style button toggling. Add `data-toggle="buttons"` to a `.btn-group` containing those modified buttons to enable toggling in their respective styles.
Bootstrap's `.button` styles can be applied to other elements, such as `<label>`s, to provide checkbox or radio style button toggling. Add `data-toggle="buttons"` to a `.btn-group` containing those modified buttons to enable toggling in their respective styles.
...
@@ -209,17 +188,13 @@ Note that pre-checked buttons require you to manually add the `.active` class to
...
@@ -209,17 +188,13 @@ Note that pre-checked buttons require you to manually add the `.active` class to
### Methods
### Methods
#### $().button('toggle')
| Method | Description |
| --- | --- |
Toggles push state. Gives the button the appearance that it has been activated.
| `$().button('toggle')` |Toggles push state. Gives the button the appearance that it has been activated. |
| `$().button('reset')` | Resets button state—swaps text to original text. **This method is asynchronous and returns before the resetting has actually completed.** |
#### $().button('reset')
| `$().button(string)` | Swaps text to any data defined text state. |
Resets button state—swaps text to original text. **This method is asynchronous and returns before the resetting has actually completed.**