move all JS buttons docs to regular buttons docs page, rewrite the callouts and some docs verbage
This commit is contained in:
Mark Otto
parent
0156f9a237
commit
8b93787fd2
|
|
@ -41,8 +41,18 @@
|
|||
- title: Print
|
||||
- title: Test cases
|
||||
|
||||
- title: Content
|
||||
- title: Components
|
||||
pages:
|
||||
- title: Reboot
|
||||
sections:
|
||||
- title: Approach
|
||||
- title: Page defaults
|
||||
- title: Headings and paragraphs
|
||||
- title: Lists
|
||||
- title: Preformatted text
|
||||
- title: Tables
|
||||
- title: Forms
|
||||
- title: Misc elements
|
||||
- title: Typography
|
||||
sections:
|
||||
# - title: Scale
|
||||
|
|
@ -67,22 +77,20 @@
|
|||
- title: Sample output
|
||||
- title: Tables
|
||||
- title: Forms
|
||||
|
||||
- title: Components
|
||||
pages:
|
||||
- title: Reboot
|
||||
sections:
|
||||
- title: Approach
|
||||
- title: Page defaults
|
||||
- title: Headings and paragraphs
|
||||
- title: Lists
|
||||
- title: Preformatted text
|
||||
- title: Tables
|
||||
- title: Forms
|
||||
- title: Misc elements
|
||||
- title: Jumbotron
|
||||
- title: Page header
|
||||
- title: Buttons
|
||||
sections:
|
||||
- title: Examples
|
||||
- title: Button tags
|
||||
- title: Sizes
|
||||
- title: Active state
|
||||
- title: Disabled state
|
||||
# - title: JavaScript behavior
|
||||
- title: Custom states
|
||||
- title: Single toggle
|
||||
- title: Checkbox and radio
|
||||
- title: Methods
|
||||
- title: Custom forms
|
||||
sections:
|
||||
- title: Checkboxes and radios
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -56,7 +56,6 @@
|
|||
.bd-content {
|
||||
> h2 {
|
||||
margin-top: 3rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
> h3 {
|
||||
|
|
|
|||
|
|
@ -16,10 +16,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-sidebar .navbar-toggle .icon-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.bd-sidebar .navbar-header {
|
||||
float: none;
|
||||
margin-right: -15px;
|
||||
|
|
@ -32,16 +28,14 @@
|
|||
|
||||
@media (min-width: 992px) {
|
||||
.bd-docs {
|
||||
padding-left: 240px;
|
||||
margin-left: 240px;
|
||||
}
|
||||
.bd-sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 100; // Ensure scrolling always works in Safari
|
||||
width: 240px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid #eee;
|
||||
// @include gradient-vertical(#29262f, #322f38);
|
||||
|
|
|
|||
|
|
@ -126,3 +126,99 @@ 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.
|
||||
{% endcallout %}
|
||||
|
||||
## JavaScript behavior
|
||||
|
||||
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
|
||||
|
||||
### Custom 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)`.
|
||||
|
||||
**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>`.
|
||||
|
||||
{% example html %}
|
||||
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
|
||||
Single toggle
|
||||
</button>
|
||||
{% endexample %}
|
||||
|
||||
### Checkbox and radio
|
||||
|
||||
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.
|
||||
|
||||
The checked state for these buttons is **only updated via `click` event** on the button. If you use another method to update the input—e.g., with `<input type="reset">` or by manually applying the input's `checked` property—you'll need to toggle `.active` on the `<label>` manually.
|
||||
|
||||
Note that pre-checked buttons require you to manually add the `.active` class to the input's `<label>`.
|
||||
|
||||
{% 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 %}
|
||||
|
|
|
|||
|
|
@ -1,124 +0,0 @@
|
|||
---
|
||||
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 %}
|
||||
Loading…
Reference in New Issue