mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-18 12:39:41 +03:00
Merge branch 'master' into derp
Conflicts: Gruntfile.js dist/css/bootstrap-theme.css.map dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css dist/fonts/glyphicons-halflings-regular.svg docs/_includes/components/badges.html docs/_includes/components/input-groups.html docs/_includes/components/pagination.html docs/_includes/css/forms.html docs/_includes/footer.html docs/_includes/getting-started/browser-device-support.html docs/_includes/getting-started/grunt.html docs/_includes/home-nav.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/modal.html docs/_includes/js/popovers.html docs/_includes/js/tooltips.html docs/_includes/nav/getting-started.html docs/_includes/nav/javascript.html docs/assets/css/docs.min.css docs/assets/css/src/docs.css docs/assets/js/customize.min.js docs/assets/js/raw-files.min.js docs/browser-bugs.html docs/dist/css/bootstrap-theme.css.map docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/dist/fonts/glyphicons-halflings-regular.svg fonts/glyphicons-halflings-regular.svg less/_button-group.less less/_jumbotron.less less/_variables.less less/mixins/vendor-prefixes.less less/panels.less less/thumbnails.less package.json
This commit is contained in:
Mark Otto
+50
-100
@@ -3,111 +3,88 @@ layout: page
|
||||
title: Buttons
|
||||
---
|
||||
|
||||
|
||||
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
|
||||
|
||||
## Uses
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<h4>Cross-browser compatibility</h4>
|
||||
<p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists form control states (disabledness and checkedness) across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p>
|
||||
</div>
|
||||
|
||||
#### Stateful
|
||||
## Stateful
|
||||
|
||||
Add `data-loading-text="Loading..."` to use a loading state on a button.
|
||||
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<h4>Use whichever state you like!</h4>
|
||||
<p>For the sake of this demonstration, we are using <code>data-loading-text</code> and <code>$().button('loading')</code>, but that's not the only state you can use. <a href="#buttons-methods">See more on this below in the <code>$().button(string)</code> documentation</a>.</p>
|
||||
</div>
|
||||
|
||||
{% example html %}
|
||||
<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
|
||||
<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
|
||||
Loading state
|
||||
</button>
|
||||
<script>
|
||||
$('#loading-example-btn').click(function () {
|
||||
var btn = $(this)
|
||||
btn.button('loading')
|
||||
$.ajax(...).always(function () {
|
||||
btn.button('reset')
|
||||
});
|
||||
});
|
||||
$('#myButton').on('click', function () {
|
||||
var $btn = $(this).button('loading')
|
||||
// business logic...
|
||||
$btn.button('reset')
|
||||
})
|
||||
</script>
|
||||
{% endexample %}
|
||||
|
||||
#### Single toggle
|
||||
### 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">
|
||||
<button type="button" class="btn btn-primary" data-toggle="button" autocomplete="off">
|
||||
Single toggle
|
||||
</button>
|
||||
{% endexample %}
|
||||
|
||||
#### Checkbox
|
||||
## Checkbox and radio
|
||||
|
||||
Add `data-toggle="buttons"` to a group of checkboxes for checkbox style toggling on btn-group.
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Pre-checked options need <code>.active</code></h4>
|
||||
<p>For pre-checked options, you must add the <code>.active</code> class to the input's <code>label</code> yourself.</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Visual checked state only updated on click</h4>
|
||||
<p>If the checked state of a checkbox button is updated without firing a <code>click</code> event on the button (e.g. via <code><input type="reset"></code> or via setting the <code>checked</code> property of the input), you will need to toggle the <code>.active</code> class on the input's <code>label</code> yourself.</p>
|
||||
</div>
|
||||
|
||||
{% example html %}
|
||||
<div class="btn-group" data-toggle="buttons">
|
||||
<label class="btn btn-primary active">
|
||||
<input type="checkbox" autocomplete="off" checked> Option 1 (pre-checked)
|
||||
</label>
|
||||
<label class="btn btn-primary">
|
||||
<input type="checkbox" autocomplete="off"> Option 2
|
||||
</label>
|
||||
<label class="btn btn-primary">
|
||||
<input type="checkbox" autocomplete="off"> Option 3
|
||||
</label>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
#### Radio
|
||||
|
||||
Add `data-toggle="buttons"` to a group of radio inputs for radio style toggling on btn-group.
|
||||
Add `data-toggle="buttons"` to a `.btn-group` containing checkbox or radio inputs to enable toggling in their respective styles.
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Preselected options need <code>.active</code></h4>
|
||||
<p>For preselected options, you must add the <code>.active</code> class to the input's <code>label</code> yourself.</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Visual checked state only updated on click</h4>
|
||||
<p>If the checked state of a checkbox button is updated without firing a <code>click</code> event on the button (e.g. via <code><input type="reset"></code> or via setting the <code>checked</code> property of the input), you will need to toggle the <code>.active</code> class on the input's <code>label</code> yourself.</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
{% example html %}
|
||||
<div class="bs-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> Option 1 (preselected)
|
||||
<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"> Option 2
|
||||
<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"> Option 3
|
||||
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
|
||||
</label>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
Enable buttons via JavaScript:
|
||||
|
||||
{% highlight js %}
|
||||
$('.btn').button()
|
||||
{% endhighlight %}
|
||||
|
||||
### Markup
|
||||
|
||||
Data attributes are integral to the button plugin. Check out the example code below for the various markup types.
|
||||
|
||||
### Options
|
||||
|
||||
*None.*
|
||||
{% endexample %}
|
||||
|
||||
### Methods
|
||||
|
||||
@@ -115,48 +92,21 @@ Data attributes are integral to the button plugin. Check out the example code be
|
||||
|
||||
Toggles push state. Gives the button the appearance that it has been activated.
|
||||
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<h4>Auto toggling</h4>
|
||||
<p>You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<button type="button" class="btn btn-primary" data-toggle="button">...</button>
|
||||
{% endhighlight %}
|
||||
|
||||
#### $().button('loading')</h4>
|
||||
|
||||
Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute `data-loading-text`.
|
||||
|
||||
{% highlight html %}
|
||||
<button id="loading-example-btn" type="button" class="btn btn-primary" data-loading-text="loading stuff...">...</button>
|
||||
<script>
|
||||
$('#loading-example-btn').click(function () {
|
||||
var btn = $(this)
|
||||
btn.button('loading')
|
||||
$.ajax(...).always(function () {
|
||||
btn.button('reset')
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<h4>Cross-browser compatibility</h4>
|
||||
<p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists form control states (disabledness and checkedness) across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p>
|
||||
</div>
|
||||
|
||||
#### $().button('reset')
|
||||
|
||||
Resets button state - swaps text to original text.
|
||||
Resets button state—swaps text to original text.
|
||||
|
||||
#### $().button(string)
|
||||
|
||||
Resets button state - swaps text to any data defined text state.
|
||||
Swaps text to any data defined text state.
|
||||
|
||||
{% highlight html %}
|
||||
<button type="button" class="btn btn-primary" data-complete-text="finished!" >...</button>
|
||||
<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
|
||||
...
|
||||
</button>
|
||||
<script>
|
||||
$('.btn').button('complete')
|
||||
$('#myStateButton').on('click', function () {
|
||||
$(this).button('complete') // button text will be "finished!"
|
||||
})
|
||||
</script>
|
||||
{% endhighlight %}
|
||||
|
||||
Reference in New Issue
Block a user