From 466d36e54175ee00927d6518d9481acd2d210590 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 16 Apr 2015 16:56:40 -0700 Subject: Redo all our callouts with the custom callout plugin - Replaces manual use of .bd-callout with {% callout [type] %} - Rearranged some callouts for proximity to others - Turned long lists of callouts--like those on tooltips, plugings, etc--into a list because holy shit that's overwhelming --- docs/javascript/buttons.md | 47 ++++++++++++++++++++++++++-------------------- 1 file changed, 27 insertions(+), 20 deletions(-) (limited to 'docs/javascript/buttons.md') diff --git a/docs/javascript/buttons.md b/docs/javascript/buttons.md index 92580efce..2a8e4ccd1 100644 --- a/docs/javascript/buttons.md +++ b/docs/javascript/buttons.md @@ -6,19 +6,22 @@ title: Buttons Do more with buttons. Control button states or create groups of buttons for more components like toolbars. -
-

Cross-browser compatibility

-

Firefox persists form control states (disabledness and checkedness) across page loads. A workaround for this is to use autocomplete="off". See Mozilla bug #654072.

-
+{% 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. -
-

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.

-
+{% 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 %} {% endexample %} -
-

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.

-
+{% 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. -
-

Preselected options need .active

-

For preselected options, you must add the .active class to the input's label yourself.

-
-
-

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.

-
+{% 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 `` 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 %}
-- cgit v1.2.3