mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-10 03:46:13 +01:00
466d36e541
- Replaces manual use of .bd-callout with {% callout [type] %}
- Rearranged some callouts for proximity to others
- Turned long lists of callouts--like those on tooltips, plugings, etc--into a list because holy shit that's overwhelming
125 lines
3.8 KiB
Markdown
125 lines
3.8 KiB
Markdown
---
|
|
layout: page
|
|
title: Buttons
|
|
---
|
|
|
|
|
|
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
|
|
|
|
{% callout danger %}
|
|
#### Cross-browser compatibility
|
|
|
|
[Firefox persists form control states (disabledness and checkedness) across page loads](https://github.com/twbs/bootstrap/issues/793). A workaround for this is to use `autocomplete="off"`. See [Mozilla bug #654072](https://bugzilla.mozilla.org/show_bug.cgi?id=654072).
|
|
{% endcallout %}
|
|
|
|
|
|
## Stateful
|
|
|
|
Add `data-loading-text="Loading..."` to use a loading state on a button.
|
|
|
|
{% callout info %}
|
|
#### Use whichever state you like!
|
|
|
|
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. [See more on this below in the `$().button(string)` documentation](#buttons-methods).
|
|
{% endcallout %}
|
|
|
|
{% 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 activate toggling on a single button.
|
|
|
|
{% example html %}
|
|
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
|
|
Single toggle
|
|
</button>
|
|
{% endexample %}
|
|
|
|
{% callout warning %}
|
|
#### Pre-toggled buttons need `.active` and `aria-pressed="true"`
|
|
|
|
For pre-toggled buttons, you must add the `.active` class and the `aria-pressed="true"` attribute to the `button` yourself.
|
|
{% endcallout %}
|
|
|
|
## Checkbox and radio
|
|
|
|
Add `data-toggle="buttons"` to a `.btn-group` containing checkbox or radio inputs to enable toggling in their respective styles.
|
|
|
|
{% callout warning %}
|
|
#### Preselected options need `.active`
|
|
|
|
For preselected options, you must add the `.active` class to the input's `label` yourself.
|
|
{% endcallout %}
|
|
|
|
{% callout warning %}
|
|
#### Visual checked state only updated on click
|
|
|
|
If the checked state of a checkbox button is updated without firing a `click` event on the button (e.g. via `<input type="reset">` or via setting the `checked` property of the input), you will need to toggle the `.active` class on the input's `label` yourself.
|
|
{% endcallout %}
|
|
|
|
{% example html %}
|
|
<div class="bd-example">
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<label class="btn btn-primary active">
|
|
<input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
|
|
</label>
|
|
<label class="btn btn-primary">
|
|
<input type="checkbox" autocomplete="off"> Checkbox 2
|
|
</label>
|
|
<label class="btn btn-primary">
|
|
<input type="checkbox" autocomplete="off"> Checkbox 3
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{% endexample %}
|
|
|
|
{% example html %}
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<label class="btn btn-primary active">
|
|
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
|
|
</label>
|
|
<label class="btn btn-primary">
|
|
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
|
|
</label>
|
|
<label class="btn btn-primary">
|
|
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
|
|
</label>
|
|
</div>
|
|
{% endexample %}
|
|
|
|
### Methods
|
|
|
|
#### $().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.
|
|
|
|
#### $().button(string)
|
|
|
|
Swaps text to any data defined text state.
|
|
|
|
{% highlight html %}
|
|
<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
|
|
...
|
|
</button>
|
|
<script>
|
|
$('#myStateButton').on('click', function () {
|
|
$(this).button('complete') // button text will be "finished!"
|
|
})
|
|
</script>
|
|
{% endhighlight %}
|