mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-11 18:02:28 +03:00
Add a docsref shortcode.
This allows for the build to fail if a reference isn't found.
This commit is contained in:
XhmikosR
@@ -58,7 +58,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:
|
||||
|
||||
- Be sure you've loaded the alert plugin, or the compiled Bootstrap JavaScript.
|
||||
- If you're building our JavaScript from source, it [requires `util.js`](/docs/{{< param docs_version >}}/getting-started/javascript/#util). The compiled version includes this.
|
||||
- If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/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.
|
||||
- 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.
|
||||
|
||||
@@ -8,7 +8,7 @@ toc: true
|
||||
|
||||
## Basic example
|
||||
|
||||
Wrap a series of buttons with `.btn` in `.btn-group`. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin](/docs/{{< param docs_version >}}/components/buttons/#button-plugin).
|
||||
Wrap a series of buttons with `.btn` in `.btn-group`. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin]({{< docsref "/components/buttons#button-plugin" >}}).
|
||||
|
||||
{{< example >}}
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
|
||||
@@ -12,7 +12,7 @@ A **card** is a flexible and extensible content container. It includes options f
|
||||
|
||||
## Example
|
||||
|
||||
Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no `margin` by default, so use [spacing utilities](/docs/{{< param docs_version >}}/utilities/spacing/) as needed.
|
||||
Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no `margin` by default, so use [spacing utilities]({{< docsref "/utilities/spacing" >}}) as needed.
|
||||
|
||||
Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. This is easily customized with our various [sizing options](#sizing).
|
||||
|
||||
@@ -217,7 +217,7 @@ Using the grid, wrap cards in columns and rows as needed.
|
||||
|
||||
### Using utilities
|
||||
|
||||
Use our handful of [available sizing utilities](/docs/{{< param docs_version >}}/utilities/sizing/) to quickly set a card's width.
|
||||
Use our handful of [available sizing utilities]({{< docsref "/utilities/sizing" >}}) to quickly set a card's width.
|
||||
|
||||
{{< example >}}
|
||||
<div class="card w-75">
|
||||
@@ -253,7 +253,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
|
||||
|
||||
## Text alignment
|
||||
|
||||
You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes](/docs/{{< param docs_version >}}/utilities/text/#text-alignment).
|
||||
You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{< docsref "/utilities/text#text-alignment" >}}).
|
||||
|
||||
{{< example >}}
|
||||
<div class="card" style="width: 18rem;">
|
||||
@@ -283,7 +283,7 @@ You can quickly change the text alignment of any card—in its entirety or speci
|
||||
|
||||
## Navigation
|
||||
|
||||
Add some navigation to a card's header (or block) with Bootstrap's [nav components](/docs/{{< param docs_version >}}/components/navs/).
|
||||
Add some navigation to a card's header (or block) with Bootstrap's [nav components]({{< docsref "/components/navs" >}}).
|
||||
|
||||
{{< example >}}
|
||||
<div class="card text-center">
|
||||
@@ -404,7 +404,7 @@ Cards include various options for customizing their backgrounds, borders, and co
|
||||
|
||||
### Background and color
|
||||
|
||||
Use [text and background utilities](/docs/{{< param docs_version >}}/utilities/colors/) to change the appearance of a card.
|
||||
Use [text and background utilities]({{< docsref "/utilities/colors" >}}) to change the appearance of a card.
|
||||
|
||||
{{< example >}}
|
||||
{{< card.inline >}}
|
||||
@@ -426,7 +426,7 @@ Use [text and background utilities](/docs/{{< param docs_version >}}/utilities/c
|
||||
|
||||
### Border
|
||||
|
||||
Use [border utilities](/docs/{{< param docs_version >}}/utilities/borders/) to change just the `border-color` of a card. Note that you can put `.text-{color}` classes on the parent `.card` or a subset of the card's contents as shown below.
|
||||
Use [border utilities]({{< docsref "/utilities/borders" >}}) to change just the `border-color` of a card. Note that you can put `.text-{color}` classes on the parent `.card` or a subset of the card's contents as shown below.
|
||||
|
||||
{{< example >}}
|
||||
{{< card.inline >}}
|
||||
|
||||
@@ -18,7 +18,7 @@ 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.
|
||||
|
||||
Lastly, if you're building our JavaScript from source, it [requires `util.js`](/docs/{{< param docs_version >}}/getting-started/javascript/#util).
|
||||
Lastly, if you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}).
|
||||
|
||||
## Example
|
||||
|
||||
@@ -109,7 +109,7 @@ You can also add the indicators to the carousel, alongside the controls, too.
|
||||
|
||||
### With captions
|
||||
|
||||
Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities](/docs/{{< param docs_version >}}/utilities/display/). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
|
||||
Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{< docsref "/utilities/display" >}}). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
|
||||
|
||||
{{< example >}}
|
||||
<div class="bd-example">
|
||||
|
||||
@@ -71,7 +71,7 @@ Multiple `<button>` or `<a>` can show and hide an element if they each reference
|
||||
|
||||
## Accordion example
|
||||
|
||||
Using the [card](/docs/{{< param docs_version >}}/components/card/) component, you can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use `.accordion` as a wrapper.
|
||||
Using the [card]({{< docsref "/components/card" >}}) component, you can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use `.accordion` as a wrapper.
|
||||
|
||||
{{< example >}}
|
||||
<div class="accordion" id="accordionExample">
|
||||
|
||||
@@ -12,7 +12,7 @@ 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]({{< param "cdn.popper" >}}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js. Popper.js isn't used to position dropdowns in navbars though as dynamic positioning isn't required.
|
||||
|
||||
If you're building our JavaScript from source, it [requires `util.js`](/docs/{{< param docs_version >}}/getting-started/javascript/#util).
|
||||
If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}).
|
||||
|
||||
## Accessibility
|
||||
|
||||
@@ -671,7 +671,7 @@ Separate groups of related menu items with a divider.
|
||||
|
||||
### Text
|
||||
|
||||
Place any freeform text within a dropdown menu with text and use [spacing utilities](/docs/{{< param docs_version >}}/utilities/spacing/). Note that you'll likely need additional sizing styles to constrain the menu width.
|
||||
Place any freeform text within a dropdown menu with text and use [spacing utilities]({{< docsref "/utilities/spacing" >}}). Note that you'll likely need additional sizing styles to constrain the menu width.
|
||||
|
||||
{{< example >}}
|
||||
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
|
||||
@@ -686,7 +686,7 @@ Place any freeform text within a dropdown menu with text and use [spacing utilit
|
||||
|
||||
### Forms
|
||||
|
||||
Put a form within a dropdown menu, or make it into a dropdown menu, and use [margin or padding utilities](/docs/{{< param docs_version >}}/utilities/spacing/) to give it the negative space you require.
|
||||
Put a form within a dropdown menu, or make it into a dropdown menu, and use [margin or padding utilities]({{< docsref "/utilities/spacing" >}}) to give it the negative space you require.
|
||||
|
||||
{{< example >}}
|
||||
<div class="dropdown-menu">
|
||||
|
||||
@@ -8,7 +8,7 @@ toc: true
|
||||
|
||||
## Overview
|
||||
|
||||
Bootstrap's form controls expand on [our Rebooted form styles](/docs/{{< param docs_version >}}/content/reboot/#forms) with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.
|
||||
Bootstrap's form controls expand on [our Rebooted form styles]({{< docsref "/content/reboot#forms" >}}) with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.
|
||||
|
||||
Be sure to use an appropriate `type` attribute on all inputs (e.g., `email` for email address or `number` for numerical information) to take advantage of newer input controls like email verification, number selection, and more.
|
||||
|
||||
@@ -572,11 +572,11 @@ And of course [custom form controls](#custom-forms) are supported.
|
||||
|
||||
Use the `.form-inline` class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states.
|
||||
|
||||
- Controls are `display: flex`, collapsing any HTML white space and allowing you to provide alignment control with [spacing](/docs/{{< param docs_version >}}/utilities/spacing/) and [flexbox](/docs/{{< param docs_version >}}/utilities/flex/) utilities.
|
||||
- Controls are `display: flex`, collapsing any HTML white space and allowing you to provide alignment control with [spacing]({{< docsref "/utilities/spacing" >}}) and [flexbox]({{< docsref "/utilities/flex" >}}) utilities.
|
||||
- Controls and input groups receive `width: auto` to override the Bootstrap default `width: 100%`.
|
||||
- Controls **only appear inline in viewports that are at least 576px wide** to account for narrow viewports on mobile devices.
|
||||
|
||||
You may need to manually address the width and alignment of individual form controls with [spacing utilities](/docs/{{< param docs_version >}}/utilities/spacing/) (as shown below). Lastly, be sure to always include a `<label>` with each form control, even if you need to hide it from non-screenreader visitors with `.sr-only`.
|
||||
You may need to manually address the width and alignment of individual form controls with [spacing utilities]({{< docsref "/utilities/spacing" >}}) (as shown below). Lastly, be sure to always include a `<label>` with each form control, even if you need to hide it from non-screenreader visitors with `.sr-only`.
|
||||
|
||||
{{< example >}}
|
||||
<form class="form-inline">
|
||||
|
||||
@@ -146,7 +146,7 @@ Contextual classes also work with `.list-group-item-action`. Note the addition o
|
||||
|
||||
## With badges
|
||||
|
||||
Add badges to any list group item to show unread counts, activity, and more with the help of some [utilities](/docs/{{< param docs_version >}}/utilities/flex/).
|
||||
Add badges to any list group item to show unread counts, activity, and more with the help of some [utilities]({{< docsref "/utilities/flex" >}}).
|
||||
|
||||
{{< example >}}
|
||||
<ul class="list-group">
|
||||
@@ -167,7 +167,7 @@ Add badges to any list group item to show unread counts, activity, and more with
|
||||
|
||||
## Custom content
|
||||
|
||||
Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities](/docs/{{< param docs_version >}}/utilities/flex/).
|
||||
Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities]({{< docsref "/utilities/flex" >}}).
|
||||
|
||||
{{< example >}}
|
||||
<div class="list-group">
|
||||
|
||||
@@ -10,7 +10,7 @@ toc: true
|
||||
|
||||
The [media object](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/) helps build complex and repetitive components where some media is positioned alongside content that doesn't wrap around said media. Plus, it does this with only two required classes thanks to flexbox.
|
||||
|
||||
Below is an example of a single media object. Only two classes are required—the wrapping `.media` and the `.media-body` around your content. Optional padding and margin can be controlled through [spacing utilities](/docs/{{< param docs_version >}}/utilities/spacing/).
|
||||
Below is an example of a single media object. Only two classes are required—the wrapping `.media` and the `.media-body` around your content. Optional padding and margin can be controlled through [spacing utilities]({{< docsref "/utilities/spacing" >}}).
|
||||
|
||||
{{< example >}}
|
||||
<div class="media">
|
||||
|
||||
@@ -14,7 +14,7 @@ Before getting started with Bootstrap's modal component, be sure to read the fol
|
||||
- Clicking on the modal "backdrop" will automatically close the modal.
|
||||
- Bootstrap only supports one modal window at a time. Nested modals aren't supported as we believe them to be poor user experiences.
|
||||
- Modals use `position: fixed`, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You'll likely run into issues when nesting a `.modal` within another fixed element.
|
||||
- Once again, due to `position: fixed`, there are some caveats with using modals on mobile devices. [See our browser support docs](/docs/{{< param docs_version >}}/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile) for details.
|
||||
- Once again, due to `position: fixed`, there are some caveats with using modals on mobile devices. [See our browser support docs]({{< docsref "/getting-started/browsers-devices#modals-and-dropdowns-on-mobile" >}}) for details.
|
||||
- Due to how HTML5 defines its semantics, [the `autofocus` HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus) has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:
|
||||
|
||||
{{< highlight js >}}
|
||||
@@ -372,7 +372,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
|
||||
|
||||
### Tooltips and popovers
|
||||
|
||||
[Tooltips](/docs/{{< param docs_version >}}/components/tooltips/) and [popovers](/docs/{{< param docs_version >}}/components/popovers/) can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.
|
||||
[Tooltips]({{< docsref "/components/tooltips" >}}) and [popovers]({{< docsref "/components/popovers" >}}) can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.
|
||||
|
||||
<div id="exampleModalPopovers" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalPopoversLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
|
||||
@@ -12,9 +12,9 @@ Here's what you need to know before getting started with the navbar:
|
||||
|
||||
- Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl}` for responsive collapsing and [color scheme](#color-schemes) classes.
|
||||
- Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
|
||||
- Use our [spacing](/docs/{{< param docs_version >}}/utilities/spacing/) and [flex](/docs/{{< param docs_version >}}/utilities/flex/) utility classes for controlling spacing and alignment within navbars.
|
||||
- Use our [spacing]({{< docsref "/utilities/spacing" >}}) and [flex]({{< docsref "/utilities/flex" >}}) utility classes for controlling spacing and alignment within navbars.
|
||||
- Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
|
||||
- Navbars are hidden by default when printing. Force them to be printed by adding `.d-print` to the `.navbar`. See the [display](/docs/{{< param docs_version >}}/utilities/display/) utility class.
|
||||
- Navbars are hidden by default when printing. Force them to be printed by adding `.d-print` to the `.navbar`. See the [display]({{< docsref "/utilities/display" >}}) utility class.
|
||||
- Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
|
||||
|
||||
{{< callout info >}}
|
||||
@@ -74,7 +74,7 @@ Here's an example of all the sub-components included in a responsive light-theme
|
||||
</nav>
|
||||
{{< /example >}}
|
||||
|
||||
This example uses [color](/docs/{{< param docs_version >}}/utilities/colors/) (`bg-light`) and [spacing](/docs/{{< param docs_version >}}/utilities/spacing/) (`my-2`, `my-lg-0`, `mr-sm-0`, `my-sm-0`) utility classes.
|
||||
This example uses [color]({{< docsref "/utilities/colors" >}}) (`bg-light`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`my-2`, `my-lg-0`, `mr-sm-0`, `my-sm-0`) utility classes.
|
||||
|
||||
### Brand
|
||||
|
||||
@@ -210,7 +210,7 @@ Place various form controls and components within a navbar with `.form-inline`.
|
||||
</nav>
|
||||
{{< /example >}}
|
||||
|
||||
Immediate children elements in `.navbar` use flex layout and will default to `justify-content: between`. Use additional [flex utilities](/docs/{{< param docs_version >}}/utilities/flex/) as needed to adjust this behavior.
|
||||
Immediate children elements in `.navbar` use flex layout and will default to `justify-content: between`. Use additional [flex utilities]({{< docsref "/utilities/flex" >}}) as needed to adjust this behavior.
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
@@ -415,7 +415,7 @@ When the container is within your navbar, its horizontal padding is removed at b
|
||||
|
||||
## Placement
|
||||
|
||||
Use our [position utilities](/docs/{{< param docs_version >}}/utilities/position/) to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the `<body>`) to prevent overlap with other elements.
|
||||
Use our [position utilities]({{< docsref "/utilities/position" >}}) to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the `<body>`) to prevent overlap with other elements.
|
||||
|
||||
Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully supported in every browser](https://caniuse.com/#feat=css-sticky)**.
|
||||
|
||||
|
||||
@@ -50,7 +50,7 @@ Change the style of `.nav`s component with modifiers and utilities. Mix and matc
|
||||
|
||||
### Horizontal alignment
|
||||
|
||||
Change the horizontal alignment of your nav with [flexbox utilities](/docs/{{< param docs_version >}}/layout/grid/#horizontal-alignment). By default, navs are left-aligned, but you can easily change them to center or right aligned.
|
||||
Change the horizontal alignment of your nav with [flexbox utilities]({{< docsref "/layout/grid#horizontal-alignment" >}}). By default, navs are left-aligned, but you can easily change them to center or right aligned.
|
||||
|
||||
Centered with `.justify-content-center`:
|
||||
|
||||
@@ -228,7 +228,7 @@ Similar to the `.nav-fill` example using a `<nav>`-based navigation, be sure to
|
||||
{{< /example >}}
|
||||
## Working with flex utilities
|
||||
|
||||
If you need responsive nav variations, consider using a series of [flexbox utilities](/docs/{{< param docs_version >}}/utilities/flex/). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
|
||||
If you need responsive nav variations, consider using a series of [flexbox utilities]({{< docsref "/utilities/flex" >}}). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
|
||||
|
||||
{{< example >}}
|
||||
<nav class="nav nav-pills flex-column flex-sm-row">
|
||||
@@ -247,7 +247,7 @@ Note that navigation bars, even if visually styled as tabs with the `.nav-tabs`
|
||||
|
||||
## Using dropdowns
|
||||
|
||||
Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin](/docs/{{< param docs_version >}}/components/dropdowns/#usage).
|
||||
Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin]({{< docsref "/components/dropdowns#usage" >}}).
|
||||
|
||||
### Tabs with dropdowns
|
||||
|
||||
@@ -305,7 +305,7 @@ 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.
|
||||
|
||||
If you're building our JavaScript from source, it [requires `util.js`](/docs/{{< param docs_version >}}/getting-started/javascript/#util).
|
||||
If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/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).
|
||||
|
||||
|
||||
@@ -131,7 +131,7 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
|
||||
|
||||
## Alignment
|
||||
|
||||
Change the alignment of pagination components with [flexbox utilities](/docs/{{< param docs_version >}}/utilities/flex/).
|
||||
Change the alignment of pagination components with [flexbox utilities]({{< docsref "/utilities/flex" >}}).
|
||||
|
||||
{{< example >}}
|
||||
<nav aria-label="Page navigation example">
|
||||
|
||||
@@ -11,8 +11,8 @@ toc: true
|
||||
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]({{< param "cdn.popper" >}}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js in order for popovers to work!
|
||||
- Popovers require the [tooltip plugin](/docs/{{< param docs_version >}}/components/tooltips/) as a dependency.
|
||||
- If you're building our JavaScript from source, it [requires `util.js`](/docs/{{< param docs_version >}}/getting-started/javascript/#util).
|
||||
- Popovers require the [tooltip plugin]({{< docsref "/components/tooltips" >}}) as a dependency.
|
||||
- If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}).
|
||||
- Popovers are opt-in for performance reasons, so **you must initialize them yourself**.
|
||||
- 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).
|
||||
@@ -261,7 +261,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
|
||||
<tr>
|
||||
<td>whiteList</td>
|
||||
<td>object</td>
|
||||
<td><a href="/docs/{{< param docs_version >}}/getting-started/javascript/#sanitizer">Default value</a></td>
|
||||
<td><a href="{{< docsref "/getting-started/javascript#sanitizer" >}}">Default value</a></td>
|
||||
<td>Object which contains allowed attributes and tags</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
||||
@@ -35,7 +35,7 @@ Put that all together, and you have the following examples.
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
Bootstrap provides a handful of [utilities for setting width](/docs/{{< param docs_version >}}/utilities/sizing/). Depending on your needs, these may help with quickly configuring progress.
|
||||
Bootstrap provides a handful of [utilities for setting width]({{< docsref "/utilities/sizing" >}}). Depending on your needs, these may help with quickly configuring progress.
|
||||
|
||||
{{< example >}}
|
||||
<div class="progress">
|
||||
|
||||
@@ -10,8 +10,8 @@ toc: true
|
||||
|
||||
Scrollspy has a few requirements to function properly:
|
||||
|
||||
- If you're building our JavaScript from source, it [requires `util.js`](/docs/{{< param docs_version >}}/getting-started/javascript/#util).
|
||||
- It must be used on a Bootstrap [nav component](/docs/{{< param docs_version >}}/components/navs/) or [list group](/docs/{{< param docs_version >}}/components/list-group/).
|
||||
- If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}).
|
||||
- It must be used on a Bootstrap [nav component]({{< docsref "/components/navs" >}}) or [list group]({{< docsref "/components/list-group" >}}).
|
||||
- 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.
|
||||
- Anchors (`<a>`) are required and must point to an element with that `id`.
|
||||
|
||||
@@ -168,10 +168,10 @@ Use spinners within buttons to indicate an action is currently processing or tak
|
||||
{{< /example >}}
|
||||
|
||||
|
||||
[color]: /docs/{{< param docs_version >}}/utilities/colors/
|
||||
[display]: /docs/{{< param docs_version >}}/utilities/display/
|
||||
[flex]: /docs/{{< param docs_version >}}/utilities/flex/
|
||||
[float]: /docs/{{< param docs_version >}}/utilities/float/
|
||||
[margin]: /docs/{{< param docs_version >}}/utilities/spacing/
|
||||
[sizing]: /docs/{{< param docs_version >}}/utilities/sizing/
|
||||
[text]: /docs/{{< param docs_version >}}/content/typography/
|
||||
[color]: {{< docsref "/utilities/colors" >}}
|
||||
[display]: {{< docsref "/utilities/display" >}}
|
||||
[flex]: {{< docsref "/utilities/flex" >}}
|
||||
[float]: {{< docsref "/utilities/float" >}}
|
||||
[margin]: {{< docsref "/utilities/spacing" >}}
|
||||
[sizing]: {{< docsref "/utilities/sizing" >}}
|
||||
[text]: {{< docsref "/content/typography" >}}
|
||||
|
||||
@@ -12,7 +12,7 @@ Toasts are lightweight notifications designed to mimic the push notifications th
|
||||
|
||||
Things to know when using the toast plugin:
|
||||
|
||||
- If you're building our JavaScript from source, it [requires `util.js`](/docs/{{< param docs_version >}}/getting-started/javascript/#util).
|
||||
- If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}).
|
||||
- Toasts are opt-in for performance reasons, so **you must initialize them yourself**.
|
||||
- **Please note that you are responsible for positioning toasts.**
|
||||
- Toasts will automatically hide if you do not specify `autohide: false`.
|
||||
@@ -181,7 +181,7 @@ You can also get fancy with flexbox utilities to align toasts horizontally and/o
|
||||
|
||||
## Accessibility
|
||||
|
||||
Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an [`aria-live` region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user's focus or otherwise interrupt the user. Additionally, include `aria-atomic="true"` to ensure that the entire toast is always announced as a single (atomic) unit, rather than announcing what was changed (which could lead to problems if you only update part of the toast's content, or if displaying the same toast content at a later point in time). If the information needed is important for the process, e.g. for a list of errors in a form, then use the [alert component](/docs/{{< param docs_version >}}/components/alerts/) instead of toast.
|
||||
Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an [`aria-live` region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user's focus or otherwise interrupt the user. Additionally, include `aria-atomic="true"` to ensure that the entire toast is always announced as a single (atomic) unit, rather than announcing what was changed (which could lead to problems if you only update part of the toast's content, or if displaying the same toast content at a later point in time). If the information needed is important for the process, e.g. for a list of errors in a form, then use the [alert component]({{< docsref "/components/alerts" >}}) instead of toast.
|
||||
|
||||
Note that the live region needs to be present in the markup *before* the toast is generated or updated. If you dynamically generate both at the same time and inject them into the page, they will generally not be announced by assistive technologies.
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ toc: true
|
||||
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]({{< param "cdn.popper" >}}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js in order for tooltips to work!
|
||||
- If you're building our JavaScript from source, it [requires `util.js`](/docs/{{< param docs_version >}}/getting-started/javascript/#util).
|
||||
- If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}).
|
||||
- Tooltips are opt-in for performance reasons, so **you must initialize them yourself**.
|
||||
- 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).
|
||||
@@ -267,7 +267,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
|
||||
<tr>
|
||||
<td>whiteList</td>
|
||||
<td>object</td>
|
||||
<td><a href="/docs/{{< param docs_version >}}/getting-started/javascript/#sanitizer">Default value</a></td>
|
||||
<td><a href="{{< docsref "/getting-started/javascript#sanitizer" >}}">Default value</a></td>
|
||||
<td>Object which contains allowed attributes and tags</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
||||
Reference in New Issue
Block a user