blob: 2a8e4ccd180c057c3d7368c1bfd59ee003b5e7ad (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
---
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 %}
|
