0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-30 22:52:24 +01:00

Mention util.js on all JS plugin pages (#22955)

Fixes #20660
This commit is contained in:
Mark Otto 2017-08-10 22:38:45 -07:00 committed by GitHub
parent 006590ed9a
commit db3dcb7c66
7 changed files with 11 additions and 1 deletions

View File

@ -50,6 +50,7 @@ Alerts can also contain additional HTML elements like headings, paragraphs and d
Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Here's how: Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Here's how:
- Be sure you've loaded the alert plugin, or the compiled Bootstrap JavaScript. - Be sure you've loaded the alert plugin, or the compiled Bootstrap JavaScript.
- If you're building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/getting-started/javascript/#util). The compiled version includes this.
- Add a dismiss button and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the `.close` button. - Add a dismiss button and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the `.close` button.
- On the dismiss button, add the `data-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices. - On the dismiss button, add the `data-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices.
- To animate alerts when dismissing them, be sure to add the `.fade` and `.show` classes. - To animate alerts when dismissing them, be sure to add the `.fade` and `.show` classes.

View File

@ -14,6 +14,8 @@ In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibilit
Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards. Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.
Lastly, if you're building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/getting-started/javascript/#util).
## Example ## Example
Carousels don't automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit. Carousels don't automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit.

View File

@ -12,6 +12,8 @@ Dropdowns are toggleable, contextual overlays for displaying lists of links and
Dropdowns are built on a third party library, [Popper.js](https://popper.js.org), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js](https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js) before Bootstrap's JavaScript. Dropdowns are built on a third party library, [Popper.js](https://popper.js.org), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js](https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js) before Bootstrap's JavaScript.
If you're building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/getting-started/javascript/#util).
## Accessibility ## Accessibility
The [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr>](https://www.w3.org/TR/wai-aria/) standard defines an actual [`role="menu"` widget](https://www.w3.org/TR/wai-aria/roles#menu), but this is specific to application-like menus which trigger actions or functions. <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus can only contain menu items, checkbox menu items, radio button menu items, radio button groups, and sub-menus. The [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr>](https://www.w3.org/TR/wai-aria/) standard defines an actual [`role="menu"` widget](https://www.w3.org/TR/wai-aria/roles#menu), but this is specific to application-like menus which trigger actions or functions. <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus can only contain menu items, checkbox menu items, radio button menu items, radio button groups, and sub-menus.

View File

@ -297,6 +297,8 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus. Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.
If you're building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/getting-started/javascript/#util).
Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers). Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).
<div class="bd-example bd-example-tabs"> <div class="bd-example bd-example-tabs">

View File

@ -13,6 +13,7 @@ Things to know when using the popover plugin:
- Popovers rely on the 3rd party library [Popper.js](https://popper.js.org) for positioning. You must include [popper.min.js](https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js) before bootstrap.js in order for popovers to work! - Popovers rely on the 3rd party library [Popper.js](https://popper.js.org) for positioning. You must include [popper.min.js](https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js) before bootstrap.js in order for popovers to work!
- Popovers require the [tooltip plugin]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/tooltips/) as a dependency. - Popovers require the [tooltip plugin]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/tooltips/) as a dependency.
- If building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/getting-started/javascript/#util).
- Popovers are opt-in for performance reasons, so **you must initialize them yourself**. - Popovers are opt-in for performance reasons, so **you must initialize them yourself**.
- Zero-length `title` and `content` values will never show a popover. - Zero-length `title` and `content` values will never show a popover.
- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc). - Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).

View File

@ -10,6 +10,7 @@ toc: true
Scrollspy has a few requirements to function properly: Scrollspy has a few requirements to function properly:
- If building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/getting-started/javascript/#util).
- It must to be used on a Bootstrap [nav component]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/navs/) or [list group]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/list-group/). - It must to be used on a Bootstrap [nav component]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/navs/) or [list group]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/list-group/).
- Scrollspy requires `position: relative;` on the element you're spying on, usually the `<body>`. - Scrollspy requires `position: relative;` on the element you're spying on, usually the `<body>`.
- When spying on elements other than the `<body>`, be sure to have a `height` set and `overflow-y: scroll;` applied. - When spying on elements other than the `<body>`, be sure to have a `height` set and `overflow-y: scroll;` applied.

View File

@ -10,7 +10,8 @@ toc: true
Things to know when using the tooltip plugin: Things to know when using the tooltip plugin:
- Tooltips rely on the 3rd party library [Popper.js](https://popper.js.org) for positioning. You must include [popper.min.js](https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js) before bootstrap.js in order for tooltips to work! - Tooltips rely on the 3rd party library [Popper.js](https://popper.js.org) for positioning. You must include [popper.min.js](https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.10.1/umd/popper.min.js) before bootstrap.js in order for tooltips to work!
- If building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/getting-started/javascript/#util).
- Tooltips are opt-in for performance reasons, so **you must initialize them yourself**. - Tooltips are opt-in for performance reasons, so **you must initialize them yourself**.
- Tooltips with zero-length titles are never displayed. - Tooltips with zero-length titles are never displayed.
- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc). - Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).