mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-18 10:52:19 +01:00
Docs: organize callouts in partials (#37320)
This commit is contained in:
Mark Otto
GitHub
parent
c40495cbf8
commit
1095d4a4af
@ -14,7 +14,7 @@ toc: true
|
||||
The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally to make it collapsible. To render an accordion that's expanded, add the `.open` class on the `.accordion`.
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-prefersreducedmotion.md" >}}
|
||||
{{< partial "callouts/info-prefersreducedmotion.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Example
|
||||
|
||||
@ -20,7 +20,7 @@ Alerts are available for any length of text, as well as an optional close button
|
||||
{{< /example >}}
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-warning-color-assistive-technologies.md" >}}
|
||||
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
### Live example
|
||||
|
||||
@ -74,7 +74,7 @@ Set a `background-color` with contrasting foreground `color` with [our `.text-bg
|
||||
{{< /example >}}
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-warning-color-assistive-technologies.md" >}}
|
||||
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Pill badges
|
||||
|
||||
@ -21,7 +21,7 @@ Bootstrap includes several predefined button styles, each serving its own semant
|
||||
{{< /example >}}
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-warning-color-assistive-technologies.md" >}}
|
||||
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Disable text wrapping
|
||||
|
||||
@ -436,7 +436,7 @@ Set a `background-color` with contrasting foreground `color` with [our `.text-bg
|
||||
{{< /example >}}
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-warning-color-assistive-technologies.md" >}}
|
||||
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
### Border
|
||||
|
||||
@ -13,7 +13,7 @@ The carousel is a slideshow for cycling through a series of content, built with
|
||||
In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-prefersreducedmotion.md" >}}
|
||||
{{< partial "callouts/info-prefersreducedmotion.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.
|
||||
@ -331,7 +331,7 @@ const carousel = new bootstrap.Carousel('#myCarousel')
|
||||
### Methods
|
||||
|
||||
{{< callout danger >}}
|
||||
{{< partial "callout-danger-async-methods.md" >}}
|
||||
{{< partial "callouts/danger-async-methods.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
You can create a carousel instance with the carousel constructor, for example, to initialize with additional options and start cycling through items:
|
||||
|
||||
@ -11,7 +11,7 @@ toc: true
|
||||
The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the `height` from its current value to `0`. Given how CSS handles animations, you cannot use `padding` on a `.collapse` element. Instead, use the class as an independent wrapping element.
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-prefersreducedmotion.md" >}}
|
||||
{{< partial "callouts/info-prefersreducedmotion.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Example
|
||||
@ -153,7 +153,7 @@ const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Co
|
||||
### Methods
|
||||
|
||||
{{< callout danger >}}
|
||||
{{< partial "callout-danger-async-methods.md" >}}
|
||||
{{< partial "callouts/danger-async-methods.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
Activates your content as a collapsible element. Accepts an optional options `object`.
|
||||
|
||||
@ -183,7 +183,7 @@ Contextual classes also work with `.list-group-item-action`. Note the addition o
|
||||
{{< /example >}}
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-warning-color-assistive-technologies.md" >}}
|
||||
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## With badges
|
||||
@ -443,7 +443,7 @@ To make tabs panel fade in, add `.fade` to each `.tab-pane`. The first tab pane
|
||||
### Methods
|
||||
|
||||
{{< callout danger >}}
|
||||
{{< partial "callout-danger-async-methods.md" >}}
|
||||
{{< partial "callouts/danger-async-methods.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
Activates your content as a tab element.
|
||||
|
||||
@ -27,7 +27,7 @@ myModal.addEventListener('shown.bs.modal', () => {
|
||||
```
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-prefersreducedmotion.md" >}}
|
||||
{{< partial "callouts/info-prefersreducedmotion.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
Keep reading for demos and usage guidelines.
|
||||
@ -841,7 +841,7 @@ const myModalAlternative = new bootstrap.Modal('#myModal', options)
|
||||
### Methods
|
||||
|
||||
{{< callout danger >}}
|
||||
{{< partial "callout-danger-async-methods.md" >}}
|
||||
{{< partial "callouts/danger-async-methods.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
#### Passing options
|
||||
|
||||
@ -19,7 +19,7 @@ Here's what you need to know before getting started with the navbar:
|
||||
- **New in v5.2.0:** Navbars can be themed with CSS variables that are scoped to the `.navbar` base class. `.navbar-light` has been deprecated and `.navbar-dark` has been rewritten to override CSS variables instead of adding additional styles.
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-prefersreducedmotion.md" >}}
|
||||
{{< partial "callouts/info-prefersreducedmotion.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Supported content
|
||||
|
||||
@ -622,7 +622,7 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a
|
||||
### Methods
|
||||
|
||||
{{< callout danger >}}
|
||||
{{< partial "callout-danger-async-methods.md" >}}
|
||||
{{< partial "callouts/danger-async-methods.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
Activates your content as a tab element.
|
||||
|
||||
@ -18,7 +18,7 @@ Offcanvas is a sidebar component that can be toggled via JavaScript to appear fr
|
||||
**Heads up!** Given how CSS handles animations, you cannot use `margin` or `translate` on an `.offcanvas` element. Instead, use the class as an independent wrapping element.
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-prefersreducedmotion.md" >}}
|
||||
{{< partial "callouts/info-prefersreducedmotion.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Examples
|
||||
@ -310,7 +310,7 @@ const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap
|
||||
### Methods
|
||||
|
||||
{{< callout danger >}}
|
||||
{{< partial "callout-danger-async-methods.md" >}}
|
||||
{{< partial "callouts/danger-async-methods.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
Activates your content as an offcanvas element. Accepts an optional options `object`.
|
||||
|
||||
@ -22,11 +22,11 @@ Things to know when using the popover plugin:
|
||||
- Popovers can be triggered thanks to an element inside a shadow DOM.
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-sanitizer.md" >}}
|
||||
{{< partial "callouts/info-sanitizer.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-prefersreducedmotion.md" >}}
|
||||
{{< partial "callouts/info-prefersreducedmotion.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
Keep reading to see how popovers work with some examples.
|
||||
@ -47,7 +47,7 @@ const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstra
|
||||
We use JavaScript similar to the snippet above to render the following live popover. Titles are set via `data-bs-title` and body content is set via `data-bs-content`.
|
||||
|
||||
{{< callout warning >}}
|
||||
{{< partial "callout-warning-data-bs-title-vs-title.md" >}}
|
||||
{{< partial "callouts/warning-data-bs-title-vs-title.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
{{< example stackblitz_add_js="true" >}}
|
||||
@ -228,7 +228,7 @@ const popover = new bootstrap.Popover(element, {
|
||||
### Methods
|
||||
|
||||
{{< callout danger >}}
|
||||
{{< partial "callout-danger-async-methods.md" >}}
|
||||
{{< partial "callouts/danger-async-methods.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
{{< bs-table "table" >}}
|
||||
|
||||
@ -86,7 +86,7 @@ Use background utility classes to change the appearance of individual progress b
|
||||
{{< /example >}}
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-warning-color-assistive-technologies.md" >}}
|
||||
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Multiple bars
|
||||
|
||||
@ -13,7 +13,7 @@ Bootstrap "spinners" can be used to show the loading state in your projects. The
|
||||
For accessibility purposes, each loader here includes `role="status"` and a nested `<span class="visually-hidden">Loading...</span>`.
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-prefersreducedmotion.md" >}}
|
||||
{{< partial "callouts/info-prefersreducedmotion.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Border spinner
|
||||
|
||||
@ -16,7 +16,7 @@ Things to know when using the toast plugin:
|
||||
- Toasts will automatically hide if you do not specify `autohide: false`.
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-prefersreducedmotion.md" >}}
|
||||
{{< partial "callouts/info-prefersreducedmotion.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Examples
|
||||
@ -368,7 +368,7 @@ const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, o
|
||||
### Methods
|
||||
|
||||
{{< callout danger >}}
|
||||
{{< partial "callout-danger-async-methods.md" >}}
|
||||
{{< partial "callouts/danger-async-methods.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
{{< bs-table "table" >}}
|
||||
|
||||
@ -23,11 +23,11 @@ Things to know when using the tooltip plugin:
|
||||
Got all that? Great, let's see how they work with some examples.
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-sanitizer.md" >}}
|
||||
{{< partial "callouts/info-sanitizer.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-prefersreducedmotion.md" >}}
|
||||
{{< partial "callouts/info-prefersreducedmotion.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Examples
|
||||
@ -51,7 +51,7 @@ Hover over the links below to see tooltips:
|
||||
{{< /example >}}
|
||||
|
||||
{{< callout warning >}}
|
||||
{{< partial "callout-warning-data-bs-title-vs-title.md" >}}
|
||||
{{< partial "callouts/warning-data-bs-title-vs-title.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
### Custom tooltips
|
||||
@ -246,7 +246,7 @@ const tooltip = new bootstrap.Tooltip(element, {
|
||||
### Methods
|
||||
|
||||
{{< callout danger >}}
|
||||
{{< partial "callout-danger-async-methods.md" >}}
|
||||
{{< partial "callouts/danger-async-methods.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
{{< bs-table "table" >}}
|
||||
|
||||
@ -363,7 +363,7 @@ These changes, and more, are demonstrated below.
|
||||
</form>
|
||||
|
||||
{{< callout warning >}}
|
||||
{{< partial "callout-warning-input-support.md" >}}
|
||||
{{< partial "callouts/warning-input-support.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
### Pointers on buttons
|
||||
|
||||
@ -69,7 +69,7 @@ Use contextual classes to color tables, table rows or individual cells.
|
||||
{{< /highlight >}}
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-warning-color-assistive-technologies.md" >}}
|
||||
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Accented tables
|
||||
|
||||
@ -117,7 +117,7 @@ $body-color: #111;
|
||||
Repeat as necessary for any variable in Bootstrap, including the global options below.
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-npm-starter.md" >}}
|
||||
{{< partial "callouts/info-npm-starter.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Maps and loops
|
||||
|
||||
@ -33,7 +33,7 @@ Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/packag
|
||||
{{< /bs-table >}}
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-npm-starter.md" >}}
|
||||
{{< partial "callouts/info-npm-starter.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Sass
|
||||
|
||||
@ -71,7 +71,7 @@ Bootstrap's `package.json` contains some additional metadata under the following
|
||||
- `style` - path to Bootstrap's non-minified CSS that's been compiled using the default settings (no customization)
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-npm-starter.md" >}}
|
||||
{{< partial "callouts/info-npm-starter.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
### yarn
|
||||
|
||||
@ -135,7 +135,7 @@ These mixins take those declared breakpoints, subtract `.02px` from them, and us
|
||||
```
|
||||
|
||||
{{< callout warning >}}
|
||||
{{< partial "callout-info-mediaqueries-breakpoints.md" >}}
|
||||
{{< partial "callouts/info-mediaqueries-breakpoints.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
### Single breakpoint
|
||||
|
||||
@ -28,7 +28,7 @@ Colorize text with color utilities. If you want to colorize links, you can use t
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-warning-color-assistive-technologies.md" >}}
|
||||
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Opacity
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user