diff options
| author | Mark Otto <[email protected]> | 2014-08-02 18:30:59 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-08-02 18:30:59 -0700 |
| commit | 089d434895fbe901d838e4dfb29cdb5941c47ab6 (patch) | |
| tree | dac25fa32c4420bfb3b1199c61898f04b71eaebe /docs/javascript/buttons.md | |
| parent | f200c39657c5011e12bace716c59b2242d48c077 (diff) | |
| parent | 033f1654b07f7764a54e5b290e5cf36f688b95a3 (diff) | |
| download | bootstrap-089d434895fbe901d838e4dfb29cdb5941c47ab6.tar.xz bootstrap-089d434895fbe901d838e4dfb29cdb5941c47ab6.zip | |
Merge branch 'master' into derp
Conflicts:
_config.yml
dist/css/bootstrap-theme.css.map
dist/css/bootstrap.css
dist/css/bootstrap.css.map
dist/css/bootstrap.min.css
docs/_includes/components/glyphicons.html
docs/_includes/css/forms.html
docs/_includes/css/tables.html
docs/_includes/getting-started/browser-device-support.html
docs/_includes/header.html
docs/_includes/js/affix.html
docs/_includes/js/alerts.html
docs/_includes/js/buttons.html
docs/_includes/js/dropdowns.html
docs/_includes/js/overview.html
docs/_includes/js/popovers.html
docs/_includes/js/tooltips.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/docs.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/examples/blog/index.html
docs/examples/carousel/index.html
docs/examples/cover/index.html
docs/examples/dashboard/index.html
docs/examples/grid/index.html
docs/examples/jumbotron-narrow/index.html
docs/examples/jumbotron/index.html
docs/examples/justified-nav/index.html
docs/examples/navbar-fixed-top/index.html
docs/examples/navbar-static-top/index.html
docs/examples/navbar/index.html
docs/examples/non-responsive/index.html
docs/examples/offcanvas/index.html
docs/examples/signin/index.html
docs/examples/starter-template/index.html
docs/examples/sticky-footer-navbar/index.html
docs/examples/sticky-footer/index.html
docs/examples/theme/index.html
docs/examples/tooltip-viewport/index.html
less/code.less
less/panels.less
less/variables.less
Diffstat (limited to 'docs/javascript/buttons.md')
| -rw-r--r-- | docs/javascript/buttons.md | 24 |
1 files changed, 17 insertions, 7 deletions
diff --git a/docs/javascript/buttons.md b/docs/javascript/buttons.md index 3afc7793a..b577479aa 100644 --- a/docs/javascript/buttons.md +++ b/docs/javascript/buttons.md @@ -45,16 +45,21 @@ Add `data-toggle="buttons"` to a group of checkboxes for checkbox style toggling <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" checked> Option 1 (pre-checked) + <input type="checkbox" autocomplete="off" checked> Option 1 (pre-checked) </label> <label class="btn btn-primary"> - <input type="checkbox"> Option 2 + <input type="checkbox" autocomplete="off"> Option 2 </label> <label class="btn btn-primary"> - <input type="checkbox"> Option 3 + <input type="checkbox" autocomplete="off"> Option 3 </label> </div> {% endexample %} @@ -68,16 +73,21 @@ Add `data-toggle="buttons"` to a group of radio inputs for radio style toggling <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 %} <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> - <input type="radio" name="options" id="option1" checked> Option 1 (preselected) + <input type="radio" name="options" id="option1" autocomplete="off" checked> Option 1 (preselected) </label> <label class="btn btn-primary"> - <input type="radio" name="options" id="option2"> Option 2 + <input type="radio" name="options" id="option2" autocomplete="off"> Option 2 </label> <label class="btn btn-primary"> - <input type="radio" name="options" id="option3"> Option 3 + <input type="radio" name="options" id="option3" autocomplete="off"> Option 3 </label> </div> {% endhighlight %} @@ -133,7 +143,7 @@ Sets button state to loading - disables button and swaps text to loading text. L <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 across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p> + <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') |
