rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-11 08:54:23 +01:00
Code Issues Actions Packages Releases Activity

tweak buttons docs

Browse Source
This commit is contained in:
Mark Otto 2015-08-10 00:05:40 -07:00
parent 743717fbce
commit 58e03cd4bf
1 changed files with 9 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
docs/components/buttons.md
View File

@ -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.
{% example html %}
<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
Loading state
</button>
<script>
$('#myButton').on('click', function () {
var $btn = $(this).button('loading')
// business logic...
$btn.button('reset')
})
</script>
{% endexample %}
#### Single toggle
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
</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
### Methods ### Methods
#### $().button('toggle') | Method | Description |
| --- | --- |
| `$().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(string)` | Swaps text to any data defined text state. |
Toggles push state. Gives the button the appearance that it has been activated. ### Custom state example
#### $().button('reset')
Resets button state—swaps text to original text. **This method is asynchronous and returns before the resetting has actually completed.**
#### $().button(string)
Swaps text to any data defined text state.
{% highlight html %} {% highlight html %}
<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off"> <button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">