From ea407666ce3c5d708b4a830fb2d00bdcb0d2d53e Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Tue, 11 Nov 2014 20:23:49 -0800 Subject: give all docs callouts IDs [skip sauce] --- docs/_includes/js/buttons.html | 10 +++++----- docs/_includes/js/collapse.html | 4 ++-- docs/_includes/js/dropdowns.html | 2 +- docs/_includes/js/modal.html | 6 +++--- docs/_includes/js/overview.html | 6 +++--- docs/_includes/js/popovers.html | 16 ++++++++-------- docs/_includes/js/scrollspy.html | 6 +++--- docs/_includes/js/tabs.html | 2 +- docs/_includes/js/tooltips.html | 12 ++++++------ 9 files changed, 32 insertions(+), 32 deletions(-) (limited to 'docs/_includes/js') diff --git a/docs/_includes/js/buttons.html b/docs/_includes/js/buttons.html index 5303a91ac..44588b5b3 100644 --- a/docs/_includes/js/buttons.html +++ b/docs/_includes/js/buttons.html @@ -3,14 +3,14 @@

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.

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.

@@ -35,7 +35,7 @@

Single toggle

Add data-toggle="button" to activate toggling on a single button.

-
+

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.

@@ -52,11 +52,11 @@

Checkbox / 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.

diff --git a/docs/_includes/js/collapse.html b/docs/_includes/js/collapse.html index 44d05e536..196eadff3 100644 --- a/docs/_includes/js/collapse.html +++ b/docs/_includes/js/collapse.html @@ -4,7 +4,7 @@

About

Get base styles and flexible support for collapsible components like accordions and navigation.

-
+

Plugin dependency

Collapse requires the transitions plugin to be included in your version of Bootstrap.

@@ -136,7 +136,7 @@
...
{% endhighlight %} -
+

Make expand/collapse controls accessible

Be sure to add aria-expanded to the control element. This attribute explicitly defines the current state of the collapsible element to screen readers and similar assistive technologies. If the collapsible element is closed by default, it should have a value of aria-expanded="false". If you've set the collapsible element to be open by default using the in class, set aria-expanded="true" on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed.

Additionally, if your control element is targetting a single collapsible element – i.e. the data-target attribute is pointing to an id selector – you may add an additional aria-controls attribute to the control element, containing the id of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.

diff --git a/docs/_includes/js/dropdowns.html b/docs/_includes/js/dropdowns.html index 28b599309..2268b5780 100644 --- a/docs/_includes/js/dropdowns.html +++ b/docs/_includes/js/dropdowns.html @@ -150,7 +150,7 @@ {% highlight js %} $('.dropdown-toggle').dropdown() {% endhighlight %} -
+

data-toggle="dropdown" still required

Regardless of whether you call your dropdown via JavaScript or instead use the data-api, data-toggle="dropdown" is always required to be present on the dropdown's trigger element.

diff --git a/docs/_includes/js/modal.html b/docs/_includes/js/modal.html index 4c0d46e9b..993b72103 100644 --- a/docs/_includes/js/modal.html +++ b/docs/_includes/js/modal.html @@ -10,7 +10,7 @@

Modal markup placement

Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.

-
+

Mobile device caveats

There are some caveats regarding using modals on mobile devices. See our browser support docs for details.

@@ -134,13 +134,13 @@
{% endhighlight %} -
+

Make modals accessible

Be sure to add role="dialog" to .modal, aria-labelledby="myModalLabel" attribute to reference the modal title, and aria-hidden="true" to tell assistive technologies to skip the modal's DOM elements.

Additionally, you may give a description of your modal dialog with aria-describedby on .modal.

-
+

Embedding YouTube videos

Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. See this helpful Stack Overflow post for more information.

diff --git a/docs/_includes/js/overview.html b/docs/_includes/js/overview.html index 4e4faa4a9..b95bb6c5f 100644 --- a/docs/_includes/js/overview.html +++ b/docs/_includes/js/overview.html @@ -4,12 +4,12 @@

Individual or compiled

Plugins can be included individually (using Bootstrap's individual *.js files), or all at once (using bootstrap.js or the minified bootstrap.min.js).

-
+

Using the compiled JavaScript

Both bootstrap.js and bootstrap.min.js contain all plugins in a single file. Include only one.

-
+

Plugin dependencies

Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files). Consult our bower.json to see which versions of jQuery are supported.

@@ -27,7 +27,7 @@ $(document).off('.data-api') $(document).off('.alert.data-api') {% endhighlight %} -
+

Only one plugin per element via data attributes

Don't use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.

diff --git a/docs/_includes/js/popovers.html b/docs/_includes/js/popovers.html index a03c8d9a8..4e0c26373 100644 --- a/docs/_includes/js/popovers.html +++ b/docs/_includes/js/popovers.html @@ -4,11 +4,11 @@

Add small overlays of content, like those on the iPad, to any element for housing secondary information.

Popovers whose both title and content are zero-length are never displayed.

-
+

Plugin dependency

Popovers require the tooltip plugin to be included in your version of Bootstrap.

-
+

Opt-in functionality

For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

One way to initialize all popovers on a page would be to select them by their data-toggle attribute:

@@ -18,19 +18,19 @@ $(function () { }) {% endhighlight %}
-
+

Popovers in button groups and input groups require special setting

When using popovers on elements within a .btn-group or an .input-group, you'll have to specify the option container: 'body' (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered).

-
+

Don't try to show popovers on hidden elements

Invoking $(...).popover('show') when the target element is display: none; will cause the popover to be incorrectly positioned.

-
+

Popovers on disabled elements require wrapper elements

To add a popover to a disabled or .disabled element, put the element inside of a <div> and apply the popover to that <div> instead.

-
+

Multiple-line links

Sometimes you want to add a popover to a hyperlink that wraps multiple lines. The default behavior of the popover plugin is to center it horizontally and vertically. Add white-space: nowrap; to your anchors to avoid this.

@@ -121,7 +121,7 @@ sagittis lacus vel augue laoreet rutrum faucibus.">

Dismiss on next click

Use the focus trigger to dismiss popovers on the next click that the user makes.

-
+

Specific markup required for dismiss-on-next-click

For proper cross-browser and cross-platform behavior, you must use the <a> tag, not the <button> tag, and you also must include a tabindex attribute.

@@ -242,7 +242,7 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
-
+

Data attributes for individual popovers

Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.

diff --git a/docs/_includes/js/scrollspy.html b/docs/_includes/js/scrollspy.html index d58ddbe5a..4f660b40e 100644 --- a/docs/_includes/js/scrollspy.html +++ b/docs/_includes/js/scrollspy.html @@ -51,15 +51,15 @@

Usage

-
+

Requires Bootstrap nav

Scrollspy currently requires the use of a Bootstrap nav component for proper highlighting of active links.

-
+

Resolvable ID targets required

Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>.

-
+

Non-:visible target elements ignored

Target elements that are not :visible according to jQuery will be ignored and their corresponding nav items will never be highlighted.

diff --git a/docs/_includes/js/tabs.html b/docs/_includes/js/tabs.html index 9de511b9a..018d45d0e 100644 --- a/docs/_includes/js/tabs.html +++ b/docs/_includes/js/tabs.html @@ -31,7 +31,7 @@
-
+

Extends tabbed navigation

This plugin extends the tabbed navigation component to add tabbable areas.

diff --git a/docs/_includes/js/tooltips.html b/docs/_includes/js/tooltips.html index f349d08d3..12ffbb72e 100644 --- a/docs/_includes/js/tooltips.html +++ b/docs/_includes/js/tooltips.html @@ -58,7 +58,7 @@ {% endhighlight %} -
+

Opt-in functionality

For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:

@@ -69,15 +69,15 @@ $(function () { {% endhighlight %}
-
+

Tooltips in button groups and input groups require special setting

When using tooltips on elements within a .btn-group or an .input-group, you'll have to specify the option container: 'body' (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).

-
+

Don't try to show tooltips on hidden elements

Invoking $(...).tooltip('show') when the target element is display: none; will cause the tooltip to be incorrectly positioned.

-
+

Tooltips on disabled elements require wrapper elements

To add a tooltip to a disabled or .disabled element, put the element inside of a <div> and apply the tooltip to that <div> instead.

@@ -91,7 +91,7 @@ $('#example').tooltip(options)

Markup

The required markup for a tooltip is only a data attribute and title on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to top by the plugin).

-
+

Multiple-line links

Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add white-space: nowrap; to your anchors to avoid this.

@@ -203,7 +203,7 @@ $('#example').tooltip(options)
-
+

Data attributes for individual tooltips

Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.

-- cgit v1.2.3