mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-18 10:52:19 +01:00
move all JS buttons docs to regular buttons docs page, rewrite the callouts and some docs verbage
This commit is contained in:
parent
0156f9a237
commit
8b93787fd2
@ -41,8 +41,18 @@
|
|||||||
- title: Print
|
- title: Print
|
||||||
- title: Test cases
|
- title: Test cases
|
||||||
|
|
||||||
- title: Content
|
- title: Components
|
||||||
pages:
|
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
|
- title: Typography
|
||||||
sections:
|
sections:
|
||||||
# - title: Scale
|
# - title: Scale
|
||||||
@ -67,22 +77,20 @@
|
|||||||
- title: Sample output
|
- title: Sample output
|
||||||
- title: Tables
|
- title: Tables
|
||||||
- title: Forms
|
- 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: Jumbotron
|
||||||
- title: Page header
|
- title: Page header
|
||||||
- title: Buttons
|
- 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
|
- title: Custom forms
|
||||||
sections:
|
sections:
|
||||||
- title: Checkboxes and radios
|
- title: Checkboxes and radios
|
||||||
|
2
docs/assets/css/docs.min.css
vendored
2
docs/assets/css/docs.min.css
vendored
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 {
|
.bd-content {
|
||||||
> h2 {
|
> h2 {
|
||||||
margin-top: 3rem;
|
margin-top: 3rem;
|
||||||
font-weight: normal;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
> h3 {
|
> h3 {
|
||||||
|
@ -16,10 +16,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-sidebar .navbar-toggle .icon-bar {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-sidebar .navbar-header {
|
.bd-sidebar .navbar-header {
|
||||||
float: none;
|
float: none;
|
||||||
margin-right: -15px;
|
margin-right: -15px;
|
||||||
@ -32,16 +28,14 @@
|
|||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
.bd-docs {
|
.bd-docs {
|
||||||
padding-left: 240px;
|
margin-left: 240px;
|
||||||
}
|
}
|
||||||
.bd-sidebar {
|
.bd-sidebar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 100; // Ensure scrolling always works in Safari
|
|
||||||
width: 240px;
|
width: 240px;
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
border-right: 1px solid #eee;
|
border-right: 1px solid #eee;
|
||||||
// @include gradient-vertical(#29262f, #322f38);
|
// @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.
|
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
|
||||||
|
|
||||||
|
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…
x
Reference in New Issue
Block a user