rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Add a docsref shortcode.

Browse Source 
This allows for the build to fail if a reference isn't found.
This commit is contained in:
XhmikosR 2019-02-04 12:22:02 +02:00
parent 23ddfa99a3
commit 5d6e896ebb
45 changed files with 111 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/content/docs/4.3/browser-bugs.md
View File

@ -7,7 +7,7 @@ aliases: "/browser-bugs/"
Bootstrap currently works around several outstanding browser bugs in major browsers to deliver the best cross-browser experience possible. Some bugs, like those listed below, cannot be solved by us.
We publicly list browser bugs that are impacting us here, in the hopes of expediting the process of fixing them. For information on Bootstrap's browser compatibility, [see our browser compatibility docs](/docs/{{< param docs_version >}}/getting-started/browsers-devices/#supported-browsers).
We publicly list browser bugs that are impacting us here, in the hopes of expediting the process of fixing them. For information on Bootstrap's browser compatibility, [see our browser compatibility docs]({{< docsref "/getting-started/browsers-devices#supported-browsers" >}}).
See also:

2
site/content/docs/4.3/components/alerts.md
View File

@ -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.

2
site/content/docs/4.3/components/button-group.md
View File

@ -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
site/content/docs/4.3/components/card.md
View File

@ -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 >}}

4
site/content/docs/4.3/components/carousel.md
View File

@ -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">

2
site/content/docs/4.3/components/collapse.md
View File

@ -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">

6
site/content/docs/4.3/components/dropdowns.md
View File

@ -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">

6
site/content/docs/4.3/components/forms.md
View File

@ -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">

4
site/content/docs/4.3/components/list-group.md
View File

@ -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">

2
site/content/docs/4.3/components/media-object.md
View File

@ -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">

4
site/content/docs/4.3/components/modal.md
View File

@ -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">

10
site/content/docs/4.3/components/navbar.md
View File

@ -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)**.

8
site/content/docs/4.3/components/navs.md
View File

@ -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).

2
site/content/docs/4.3/components/pagination.md
View File

@ -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">

6
site/content/docs/4.3/components/popovers.md
View File

@ -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>

2
site/content/docs/4.3/components/progress.md
View File

@ -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">

4
site/content/docs/4.3/components/scrollspy.md
View File

@ -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`.

14
site/content/docs/4.3/components/spinners.md
View File

@ -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" >}}

4
site/content/docs/4.3/components/toasts.md
View File

@ -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.

4
site/content/docs/4.3/components/tooltips.md
View File

@ -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>

2
site/content/docs/4.3/content/figures.md
View File

@ -16,7 +16,7 @@ Use the included `.figure`, `.figure-img` and `.figure-caption` classes to provi
</figure>
{{< /example >}}
Aligning the figure's caption is easy with our [text utilities](/docs/{{< param docs_version >}}/utilities/text/#text-alignment).
Aligning the figure's caption is easy with our [text utilities]({{< docsref "/utilities/text#text-alignment" >}}).
{{< example >}}
<figure class="figure">

4
site/content/docs/4.3/content/images.md
View File

@ -20,7 +20,7 @@ Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` an
## Image thumbnails
In addition to our [border-radius utilities](/docs/{{< param docs_version >}}/utilities/borders/), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
In addition to our [border-radius utilities]({{< docsref "/utilities/borders" >}}), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
<div class="bd-example bd-example-images">
{{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" >}}
@ -32,7 +32,7 @@ In addition to our [border-radius utilities](/docs/{{< param docs_version >}}/ut
## Aligning images
Align images with the [helper float classes](/docs/{{< param docs_version >}}/utilities/float/) or [text alignment classes](/docs/{{< param docs_version >}}/utilities/text/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class](/docs/{{< param docs_version >}}/utilities/spacing/#horizontal-centering).
Align images with the [helper float classes]({{< docsref "/utilities/float" >}}) or [text alignment classes]({{< docsref "/utilities/text#text-alignment" >}}). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{< docsref "/utilities/spacing#horizontal-centering" >}}).
<div class="bd-example bd-example-images">
{{< placeholder width="200" height="200" class="rounded float-left" >}}

4
site/content/docs/4.3/content/reboot.md
View File

@ -158,7 +158,7 @@ The `<pre>` element is reset to remove its `margin-top` and use `rem` units for
## Tables
Tables are slightly adjusted to style `<caption>`s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class](/docs/{{< param docs_version >}}/content/tables/).
Tables are slightly adjusted to style `<caption>`s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{< docsref "/content/tables" >}}).
<div class="bd-example">
<table>
@ -362,4 +362,4 @@ HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.o
`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
{{< /callout >}}
To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class](/docs/{{< param docs_version >}}/utilities/visibility/) instead.
To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{< docsref "/utilities/visibility" >}}) instead.

2
site/content/docs/4.3/content/tables.md
View File

@ -550,7 +550,7 @@ Use contextual classes to color table rows or individual cells.
</tr>
{{< /highlight >}}
Regular table background variants are not available with the dark table, however, you may use [text or background utilities](/docs/{{< param docs_version >}}/utilities/colors/) to achieve similar styles.
Regular table background variants are not available with the dark table, however, you may use [text or background utilities]({{< docsref "/utilities/colors" >}}) to achieve similar styles.
<div class="bd-example">
<table class="table table-dark">

6
site/content/docs/4.3/content/typography.md
View File

@ -8,9 +8,9 @@ toc: true
## Global settings
Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the [textual utility classes](/docs/{{< param docs_version >}}/utilities/text/).
Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the [textual utility classes]({{< docsref "/utilities/text" >}}).
- Use a [native font stack](/docs/{{< param docs_version >}}/content/reboot/#native-font-stack) that selects the best `font-family` for each OS and device.
- Use a [native font stack]({{< docsref "/content/reboot#native-font-stack" >}}) that selects the best `font-family` for each OS and device.
- For a more inclusive and accessible type scale, we assume the browser default root `font-size` (typically 16px) so visitors can customize their browser defaults as needed.
- Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base applied to the `<body>`.
- Set the global link color via `$link-color` and apply link underlines only on `:hover`.
@ -161,7 +161,7 @@ While not shown above, feel free to use `<b>` and `<i>` in HTML5. `<b>` is meant
## Text utilities
Change text alignment, transform, style, weight, and color with our [text utilities](/docs/{{< param docs_version >}}/utilities/text/) and [color utilities](/docs/{{< param docs_version >}}/utilities/colors/).
Change text alignment, transform, style, weight, and color with our [text utilities]({{< docsref "/utilities/text" >}}) and [color utilities]({{< docsref "/utilities/colors" >}}).
## Abbreviations

2
site/content/docs/4.3/examples/album/index.html
View File

@ -203,6 +203,6 @@ extra_css:
<a href="#">Back to top</a>
</p>
<p>Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>
<p>New to Bootstrap? <a href="/">Visit the homepage</a> or read our <a href="/docs/{{< param docs_version >}}/getting-started/introduction/">getting started guide</a>.</p>
<p>New to Bootstrap? <a href="/">Visit the homepage</a> or read our <a href="{{< docsref "/getting-started/introduction" >}}">getting started guide</a>.</p>
</div>
</footer>

2
site/content/docs/4.3/examples/navbar-bottom/index.html
View File

@ -7,7 +7,7 @@ title: Bottom navbar example
<div class="jumbotron mt-3">
<h1>Bottom Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how the bottom navbar works.</p>
<a class="btn btn-lg btn-primary" href="/docs/{{< param docs_version >}}/components/navbar/" role="button">View navbar docs &raquo;</a>
<a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>
</div>
</div>
<nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark">

2
site/content/docs/4.3/examples/navbar-fixed/index.html
View File

@ -33,6 +33,6 @@ extra_css:
<div class="jumbotron">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<a class="btn btn-lg btn-primary" href="/docs/{{< param docs_version >}}/components/navbar/" role="button">View navbar docs &raquo;</a>
<a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>
</div>
</main>

2
site/content/docs/4.3/examples/navbar-static/index.html
View File

@ -33,6 +33,6 @@ extra_css:
<div class="jumbotron">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
<a class="btn btn-lg btn-primary" href="/docs/{{< param docs_version >}}/components/navbar/" role="button">View navbar docs &raquo;</a>
<a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>
</div>
</main>

4
site/content/docs/4.3/examples/navbars/index.html
View File

@ -313,10 +313,10 @@ extra_css:
<div class="jumbotron">
<div class="col-sm-8 mx-auto">
<h1>Navbar examples</h1>
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="/docs/{{< param docs_version >}}/examples/navbar-static/">top</a> and <a href="/docs/{{< param docs_version >}}/examples/navbar-fixed/">fixed top</a> examples.</p>
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="{{< docsref "/examples/navbar-static" >}}">top</a> and <a href="{{< docsref "/examples/navbar-fixed" >}}">fixed top</a> examples.</p>
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
<p>
<a class="btn btn-primary" href="/docs/{{< param docs_version >}}/components/navbar/" role="button">View navbar docs &raquo;</a>
<a class="btn btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>
</p>
</div>
</div>

2
site/content/docs/4.3/examples/sticky-footer-navbar/index.html
View File

@ -39,7 +39,7 @@ body_class: "d-flex flex-column h-100"
<div class="container">
<h1 class="mt-5">Sticky footer with fixed navbar</h1>
<p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>main &gt; .container</code>.</p>
<p>Back to <a href="/docs/{{< param docs_version >}}/examples/sticky-footer/">the default sticky footer</a> minus the navbar.</p>
<p>Back to <a href="{{< docsref "/examples/sticky-footer" >}}">the default sticky footer</a> minus the navbar.</p>
</div>
</main>

2
site/content/docs/4.3/examples/sticky-footer/index.html
View File

@ -13,7 +13,7 @@ include_js: false
<div class="container">
<h1 class="mt-5">Sticky footer</h1>
<p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p>Use <a href="/docs/{{< param docs_version >}}/examples/sticky-footer-navbar/">the sticky footer with a fixed navbar</a> if need be, too.</p>
<p>Use <a href="{{< docsref "/examples/sticky-footer-navbar" >}}">the sticky footer with a fixed navbar</a> if need be, too.</p>
</div>
</main>

4
site/content/docs/4.3/extend/approach.md
View File

@ -55,13 +55,13 @@ Bootstrap includes several components that function as an overlay of some kind.
Each overlay component increases it's `z-index` value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal's action), so we put that above our navbars.
Learn more about this in our [`z-index` layout page](/docs/{{< param docs_version >}}/layout/overview/#z-index).
Learn more about this in our [`z-index` layout page]({{< docsref "/layout/overview#z-index" >}}).
## HTML and CSS over JS
Whenever possible, we prefer to write HTML and CSS over JavaScript. In general, HTML and CSS are more prolific and accessible to more people of all different experience levels. HTML and CSS are also faster in your browser than JavaScript, and your browser generally provides a great deal of functionality for you.
This principle is our first-class JavaScript API is `data` attributes. You don't need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in [our JavaScript overview page](/docs/{{< param docs_version >}}/getting-started/javascript/#data-attributes).
This principle is our first-class JavaScript API is `data` attributes. You don't need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in [our JavaScript overview page]({{< docsref "/getting-started/javascript#data-attributes" >}}).
Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a `.btn` class on nearly any element, but most elements don't provide any semantic value or browser functionality. So instead, we use `<button>`s and `<a>`s.

4
site/content/docs/4.3/getting-started/browsers-devices.md
View File

@ -105,11 +105,11 @@ For Firefox, in addition to the latest normal stable release, we also support th
Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 9, though they are not officially supported.
For a list of some of the browser bugs that Bootstrap has to grapple with, see our [Wall of browser bugs](/docs/{{< param docs_version >}}/browser-bugs/).
For a list of some of the browser bugs that Bootstrap has to grapple with, see our [Wall of browser bugs]({{< docsref "/browser-bugs" >}}).
## Internet Explorer
Internet Explorer 11 is not supported officially. However, if you build Bootstrap yourself, you can add the needed CSS prefixes and follow the instructions on the [JavaScript page](/docs/{{< param docs_version >}}/getting-started/javascript/#compatibility-with-ie-11). Please note that this might break at any time. **If you require Internet Explorer 10/11 support, use Bootstrap 4.**
Internet Explorer 11 is not supported officially. However, if you build Bootstrap yourself, you can add the needed CSS prefixes and follow the instructions on the [JavaScript page]({{< docsref "/getting-started/javascript#compatibility-with-ie-11" >}}). Please note that this might break at any time. **If you require Internet Explorer 10/11 support, use Bootstrap 4.**
## Modals and dropdowns on mobile

6
site/content/docs/4.3/getting-started/contents.md
View File

@ -74,10 +74,10 @@ Bootstrap includes a handful of options for including some or all of our compile
<div><code class="font-weight-normal text-nowrap">bootstrap-grid.css</code></div>
<div><code class="font-weight-normal text-nowrap">bootstrap-grid.min.css</code></div>
</th>
<td><a class="text-warning" href="/docs/{{< param docs_version >}}/layout/grid/">Only grid system</a></td>
<td><a class="text-warning" href="{{< docsref "/layout/grid" >}}">Only grid system</a></td>
<td class="bg-light text-muted">Not included</td>
<td class="bg-light text-muted">Not included</td>
<td><a class="text-warning" href="/docs/{{< param docs_version >}}/utilities/flex/">Only flex utilities</a></td>
<td><a class="text-warning" href="{{< docsref "/utilities/flex" >}}">Only flex utilities</a></td>
</tr>
<tr>
<th scope="row">
@ -85,7 +85,7 @@ Bootstrap includes a handful of options for including some or all of our compile
<div><code class="font-weight-normal text-nowrap">bootstrap-reboot.min.css</code></div>
</th>
<td class="bg-light text-muted">Not included</td>
<td><a class="text-warning" href="/docs/{{< param docs_version >}}/content/reboot/">Only Reboot</a></td>
<td><a class="text-warning" href="{{< docsref "/content/reboot" >}}">Only Reboot</a></td>
<td class="bg-light text-muted">Not included</td>
<td class="bg-light text-muted">Not included</td>
</tr>

4
site/content/docs/4.3/getting-started/download.md
View File

@ -10,7 +10,7 @@ toc: true
Download ready-to-use compiled code for **Bootstrap v{{< param current_version >}}** to easily drop into your project, which includes:
- Compiled and minified CSS bundles (see [CSS files comparison](/docs/{{< param docs_version >}}/getting-started/contents/#css-files))
- Compiled and minified CSS bundles (see [CSS files comparison]({{< docsref "/getting-started/contents#css-files" >}}))
- Compiled and minified JavaScript plugins
This doesn't include documentation, source files, or any optional JavaScript dependencies like Popper.js.
@ -24,7 +24,7 @@ Compile Bootstrap with your own asset pipeline by downloading our source Sass, J
- Sass compiler (Libsass or Ruby Sass is supported) for compiling your CSS.
- [Autoprefixer](https://github.com/postcss/autoprefixer) for CSS vendor prefixing
Should you require [build tools](/docs/{{< param docs_version >}}/getting-started/build-tools/#tooling-setup), they are included for developing Bootstrap and its docs, but they're likely unsuitable for your own purposes.
Should you require [build tools]({{< docsref "/getting-started/build-tools#tooling-setup" >}}), they are included for developing Bootstrap and its docs, but they're likely unsuitable for your own purposes.
<a href="{{< param "download.source" >}}" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>

10
site/content/docs/4.3/getting-started/introduction.md
View File

@ -12,7 +12,7 @@ toc: true
## Quick start
Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks at StackPath. Using a package manager or need to download the source files? [Head to the downloads page](/docs/{{< param docs_version >}}/getting-started/download/).
Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks at StackPath. Using a package manager or need to download the source files? [Head to the downloads page]({{< docsref "/getting-started/download" >}}).
### CSS
@ -31,11 +31,11 @@ Many of our components require the use of JavaScript to function. Specifically,
<script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script>
{{< /highlight >}}
If you use `<script type="module">`, please refer to our [using Bootstrap as a module](/docs/{{< param docs_version >}}/getting-started/javascript/#using-bootstrap-as-a-module) section.
If you use `<script type="module">`, please refer to our [using Bootstrap as a module]({{< docsref "/getting-started/javascript#using-bootstrap-as-a-module" >}}) section.
Curious which components explicitly require our JavaScript and Popper.js? Click the show components link below. If you're at all unsure about the general page structure, keep reading for an example page template.
Our `bootstrap.bundle.js` and `bootstrap.bundle.min.js` include [Popper](https://popper.js.org/). For more information about what's included in Bootstrap, please see our [contents](/docs/{{< param docs_version >}}/getting-started/contents/#precompiled-bootstrap) section.
Our `bootstrap.bundle.js` and `bootstrap.bundle.min.js` include [Popper](https://popper.js.org/). For more information about what's included in Bootstrap, please see our [contents]({{< docsref "/getting-started/contents#precompiled-bootstrap" >}}) section.
{{< partial "getting-started/components-requiring-javascript" >}}
@ -67,7 +67,7 @@ Be sure to have your pages set up with the latest design and development standar
</html>
{{< /highlight >}}
That's all you need for overall page requirements. Visit the [Layout docs](/docs/{{< param docs_version >}}/layout/overview/) or [our official examples](/docs/{{< param docs_version >}}/examples/) to start laying out your site's content and components.
That's all you need for overall page requirements. Visit the [Layout docs]({{< docsref "/layout/overview" >}}) or [our official examples]({{< docsref "/examples" >}}) to start laying out your site's content and components.
## Important globals
@ -112,7 +112,7 @@ Learn more about [box model and sizing at CSS Tricks](https://css-tricks.com/box
### Reboot
For improved cross-browser rendering, we use [Reboot](/docs/{{< param docs_version >}}/content/reboot/) to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.
For improved cross-browser rendering, we use [Reboot]({{< docsref "/content/reboot" >}}) to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.
## Community

8
site/content/docs/4.3/getting-started/theming.md
View File

@ -231,18 +231,18 @@ You can find and customize these variables for key global options in Bootstrap's
| Variable | Values | Description |
| -------------------------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- |
| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities](/docs/{{< param docs_version >}}/utilities/spacing/). |
| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{< docsref "/utilities/spacing" >}}). |
| `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. |
| `$enable-shadows` | `true` or `false` (default) | Enables predefined `box-shadow` styles on various components. |
| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. |
| `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. |
| `$enable-prefers-reduced-motion-media-query` | `true` (default) or `false` | Enables the [`prefers-reduced-motion` media query](/docs/{{< param docs_version >}}/getting-started/accessibility/#reduced-motion), which suppresses certain animations/transitions based on the users' browser/operating system preferences. |
| `$enable-prefers-reduced-motion-media-query` | `true` (default) or `false` | Enables the [`prefers-reduced-motion` media query]({{< docsref "/getting-started/accessibility#reduced-motion" >}}), which suppresses certain animations/transitions based on the users' browser/operating system preferences. |
| `$enable-hover-media-query` | `true` or `false` (default) | **Deprecated** |
| `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.). |
| `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. |
| `$enable-pointer-cursor-for-buttons` | `true` (default) or `false` | Add "hand" cursor to non-disabled button elements. |
| `$enable-print-styles` | `true` (default) or `false` | Enables styles for optimizing printing. |
| `$enable-responsive-font-sizes` | `true` or `false` (default) | Enables [responsive font sizes](/docs/{{< param docs_version >}}/content/typography/#responsive-font-sizes). |
| `$enable-responsive-font-sizes` | `true` or `false` (default) | Enables [responsive font sizes]({{< docsref "/content/typography#responsive-font-sizes" >}}). |
| `$enable-validation-icons` | `true` (default) or `false` | Enables `background-image` icons within textual inputs and some custom forms for validation states. |
| `$enable-deprecation-messages` | `true` or `false` (default) | Set to `true` to show warnings when using any of the deprecated mixins and functions that are planned to be removed in `v5`. |
@ -276,7 +276,7 @@ Here's how you can use these in your Sass:
.beta { color: color("purple"); }
{{< /highlight >}}
[Color utility classes](/docs/{{< param docs_version >}}/utilities/colors/) are also available for setting `color` and `background-color`.
[Color utility classes]({{< docsref "/utilities/colors" >}}) are also available for setting `color` and `background-color`.
{{< callout info >}}
In the future, we'll aim to provide Sass maps and variables for shades of each color as we've done with the grayscale colors below.

6
site/content/docs/4.3/getting-started/webpack.md
View File

@ -8,11 +8,11 @@ toc: true
## Installing Bootstrap
[Install bootstrap](/docs/{{< param docs_version >}}/getting-started/download/#npm) as a Node.js module using npm.
[Install bootstrap]({{< docsref "/getting-started/download#npm" >}}) as a Node.js module using npm.
## Importing JavaScript
Import [Bootstrap's JavaScript](/docs/{{< param docs_version >}}/getting-started/javascript/) by adding this line to your app's entry point (usually `index.js` or `app.js`):
Import [Bootstrap's JavaScript]({{< docsref "/getting-started/javascript" >}}) by adding this line to your app's entry point (usually `index.js` or `app.js`):
{{< highlight js >}}
import 'bootstrap';
@ -34,7 +34,7 @@ This means that you will have to make sure to add both of them to your `package.
To enjoy the full potential of Bootstrap and customize it to your needs, use the source files as a part of your project's bundling process.
First, create your own `_custom.scss` and use it to override the [built-in custom variables](/docs/{{< param docs_version >}}/getting-started/theming/). Then, use your main Sass file to import your custom variables, followed by Bootstrap:
First, create your own `_custom.scss` and use it to override the [built-in custom variables]({{< docsref "/getting-started/theming" >}}). Then, use your main Sass file to import your custom variables, followed by Bootstrap:
{{< highlight scss >}}
@import "custom";

12
site/content/docs/4.3/layout/grid.md
View File

@ -41,7 +41,7 @@ Breaking it down, here's how it works:
- Column classes indicate the number of columns you'd like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use `.col-4`.
- Column `width`s are set in percentages, so they're always fluid and sized relative to their parent element.
- Columns have horizontal `padding` to create the gutters between individual columns, however, you can remove the `margin` from rows and `padding` from columns with `.no-gutters` on the `.row`.
- To make the grid responsive, there are five grid breakpoints, one for each [responsive breakpoint](/docs/{{< param docs_version >}}/layout/overview/#responsive-breakpoints): all breakpoints (extra small), small, medium, large, and extra large.
- To make the grid responsive, there are five grid breakpoints, one for each [responsive breakpoint]({{< docsref "/layout/overview#responsive-breakpoints" >}}): all breakpoints (extra small), small, medium, large, and extra large.
- Grid breakpoints are based on minimum width media queries, meaning **they apply to that one breakpoint and all those above it** (e.g., `.col-sm-4` applies to small, medium, large, and extra large devices, but not the first `xs` breakpoint).
- You can use predefined grid classes (like `.col-4`) or [Sass mixins](#sass-mixins) for more semantic markup.
@ -233,7 +233,7 @@ Use `col-{breakpoint}-auto` classes to size columns based on the natural width o
### Equal-width multi-row
Create equal-width columns that span multiple rows by inserting a `.w-100` where you want the columns to break to a new line. Make the breaks responsive by mixing the `.w-100` with some [responsive display utilities](/docs/{{< param docs_version >}}/utilities/display/).
Create equal-width columns that span multiple rows by inserting a `.w-100` where you want the columns to break to a new line. Make the breaks responsive by mixing the `.w-100` with some [responsive display utilities]({{< docsref "/utilities/display" >}}).
<div class="bd-example-row">
{{< example >}}
@ -455,7 +455,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
The gutters between columns in our predefined grid classes can be removed with `.no-gutters`. This removes the negative `margin`s from `.row` and the horizontal `padding` from all immediate children columns.
Here's the source code for creating these styles. Note that column overrides are scoped to only the first children columns and are targeted via [attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors). While this generates a more specific selector, column padding can still be further customized with [spacing utilities](/docs/{{< param docs_version >}}/utilities/spacing/).
Here's the source code for creating these styles. Note that column overrides are scoped to only the first children columns and are targeted via [attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors). While this generates a more specific selector, column padding can still be further customized with [spacing utilities]({{< docsref "/utilities/spacing" >}}).
**Need an edge-to-edge design?** Drop the parent `.container` or `.container-fluid`.
@ -520,7 +520,7 @@ Breaking columns to a new line in flexbox requires a small hack: add an element
{{< /example >}}
</div>
You may also apply this break at specific breakpoints with our [responsive display utilities](/docs/{{< param docs_version >}}/utilities/display/).
You may also apply this break at specific breakpoints with our [responsive display utilities]({{< docsref "/utilities/display" >}}).
<div class="bd-example-row">
{{< example >}}
@ -585,7 +585,7 @@ There are also responsive `.order-first` and `.order-last` classes that change t
### Offsetting columns
You can offset grid columns in two ways: our responsive `.offset-` grid classes and our [margin utilities](/docs/{{< param docs_version >}}/utilities/spacing/). Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.
You can offset grid columns in two ways: our responsive `.offset-` grid classes and our [margin utilities]({{< docsref "/utilities/spacing" >}}). Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.
#### Offset classes
@ -609,7 +609,7 @@ Move columns to the right using `.offset-md-*` classes. These classes increase t
{{< /example >}}
</div>
In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in [the grid example](/docs/{{< param docs_version >}}/examples/grid/).
In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in [the grid example]({{< docsref "/examples/grid" >}}).
<div class="bd-example-row">
{{< example >}}

10
site/content/docs/4.3/layout/utilities-for-layout.md
View File

@ -8,18 +8,18 @@ toc: true
## Changing `display`
Use our [display utilities](/docs/{{< param docs_version >}}/utilities/display/) for responsively toggling common values of the `display` property. Mix it with our grid system, content, or components to show or hide them across specific viewports.
Use our [display utilities]({{< docsref "/utilities/display" >}}) for responsively toggling common values of the `display` property. Mix it with our grid system, content, or components to show or hide them across specific viewports.
## Flexbox options
Bootstrap 4 is built with flexbox, but not every element's `display` has been changed to `display: flex` as this would add many unnecessary overrides and unexpectedly change key browser behaviors. Most of [our components](/docs/{{< param docs_version >}}/components/alerts/) are built with flexbox enabled.
Bootstrap 4 is built with flexbox, but not every element's `display` has been changed to `display: flex` as this would add many unnecessary overrides and unexpectedly change key browser behaviors. Most of [our components]({{< docsref "/components/alerts" >}}) are built with flexbox enabled.
Should you need to add `display: flex` to an element, do so with `.d-flex` or one of the responsive variants (e.g., `.d-sm-flex`). You'll need this class or `display` value to allow the use of our extra [flexbox utilities](/docs/{{< param docs_version >}}/utilities/flex/) for sizing, alignment, spacing, and more.
Should you need to add `display: flex` to an element, do so with `.d-flex` or one of the responsive variants (e.g., `.d-sm-flex`). You'll need this class or `display` value to allow the use of our extra [flexbox utilities]({{< docsref "/utilities/flex" >}}) for sizing, alignment, spacing, and more.
## Margin and padding
Use the `margin` and `padding` [spacing utilities](/docs/{{< param docs_version >}}/utilities/spacing/) to control how elements and components are spaced and sized. Bootstrap 4 includes a five-level scale for spacing utilities, based on a `1rem` value default `$spacer` variable. Choose values for all viewports (e.g., `.mr-3` for `margin-right: 1rem`), or pick responsive variants to target specific viewports (e.g., `.mr-md-3` for `margin-right: 1rem` starting at the `md` breakpoint).
Use the `margin` and `padding` [spacing utilities]({{< docsref "/utilities/spacing" >}}) to control how elements and components are spaced and sized. Bootstrap 4 includes a five-level scale for spacing utilities, based on a `1rem` value default `$spacer` variable. Choose values for all viewports (e.g., `.mr-3` for `margin-right: 1rem`), or pick responsive variants to target specific viewports (e.g., `.mr-md-3` for `margin-right: 1rem` starting at the `md` breakpoint).
## Toggle `visibility`
When toggling `display` isn't needed, you can toggle the `visibility` of an element with our [visibility utilities](/docs/{{< param docs_version >}}/utilities/visibility/). Invisible elements will still affect the layout of the page, but are visually hidden from visitors.
When toggling `display` isn't needed, you can toggle the `visibility` of an element with our [visibility utilities]({{< docsref "/utilities/visibility" >}}). Invisible elements will still affect the layout of the page, but are visually hidden from visitors.

18
site/content/docs/4.3/migration.md
View File

@ -108,12 +108,12 @@ Here are the big ticket items you'll want to be aware of when moving from v3 to
### Components
- **Dropped panels, thumbnails, and wells** for a new all-encompassing component, [cards](/docs/{{< param docs_version >}}/components/card/).
- **Dropped panels, thumbnails, and wells** for a new all-encompassing component, [cards]({{< docsref "/components/card" >}}).
- **Dropped the Glyphicons icon font.** If you need icons, some options are:
- the upstream version of [Glyphicons](https://www.glyphicons.com/)
- [Octicons](https://octicons.github.com/)
- [Font Awesome](https://fontawesome.com/)
- See the [Extend page](/docs/{{< param docs_version >}}/extend/icons/) for a list of alternatives. Have additional suggestions? Please open an issue or PR.
- See the [Extend page]({{< docsref "/extend/icons" >}}) for a list of alternatives. Have additional suggestions? Please open an issue or PR.
- **Dropped the Affix jQuery plugin.**
- We recommend using `position: sticky` instead. [See the HTML5 Please entry](https://html5please.com/#sticky) for details and specific polyfill recommendations. One suggestion is to use an `@supports` rule for implementing it (e.g., `@supports (position: sticky) { ... }`)
- If you were using Affix to apply additional, non-`position` styles, the polyfills might not support your use case. One option for such uses is the third-party [ScrollPos-Styler](https://github.com/acch/scrollpos-styler) library.
@ -126,7 +126,7 @@ This list highlights key changes by component between v3.x.x and v4.0.0.
### Reboot
New to Bootstrap 4 is the [Reboot](/docs/{{< param docs_version >}}/content/reboot/), a new stylesheet that builds on Normalize with our own somewhat opinionated reset styles. Selectors appearing in this file only use elements—there are no classes here. This isolates our reset styles from our component styles for a more modular approach. Some of the most important resets this includes are the `box-sizing: border-box` change, moving from `em` to `rem` units on many elements, link styles, and many form element resets.
New to Bootstrap 4 is the [Reboot]({{< docsref "/content/reboot" >}}), a new stylesheet that builds on Normalize with our own somewhat opinionated reset styles. Selectors appearing in this file only use elements—there are no classes here. This isolates our reset styles from our component styles for a more modular approach. Some of the most important resets this includes are the `box-sizing: border-box` change, moving from `em` to `rem` units on many elements, link styles, and many form element resets.
### Typography
@ -225,7 +225,7 @@ The navbar has been entirely rewritten in flexbox with improved support for alig
- Responsive navbar behaviors are now applied to the `.navbar` class via the **required** `.navbar-expand-{breakpoint}` where you choose where to collapse the navbar. Previously this was a Less variable modification and required recompiling.
- `.navbar-default` is now `.navbar-light`, though `.navbar-dark` remains the same. **One of these is required on each navbar.** However, these classes no longer set `background-color`s; instead they essentially only affect `color`.
- Navbars now require a background declaration of some kind. Choose from our background utilities (`.bg-*`) or set your own with the light/inverse classes above [for mad customization](/docs/{{< param docs_version >}}/components/navbar/#color-schemes).
- Navbars now require a background declaration of some kind. Choose from our background utilities (`.bg-*`) or set your own with the light/inverse classes above [for mad customization]({{< docsref "/components/navbar#color-schemes" >}}).
- Given flexbox styles, navbars can now use flexbox utilities for easy alignment options.
- `.navbar-toggle` is now `.navbar-toggler` and has different styles and inner markup (no more three `<span>`s).
- Dropped the `.navbar-form` class entirely. It's no longer necessary; instead, just use `.form-inline` and apply margin utilities as necessary.
@ -259,7 +259,7 @@ Dropped entirely for the new card component.
- `.panel-default` removed and no replacement.
- `.panel-group` removed and no replacement. `.card-group` is not a replacement, it is different.
- `.panel-heading` to `.card-header`
- `.panel-title` to `.card-title`. Depending on the desired look, you may also want to use [heading elements or classes](/docs/{{< param docs_version >}}/content/typography/#headings) (e.g. `<h3>`, `.h3`) or bold elements or classes (e.g. `<strong>`, `<b>`, [`.font-weight-bold`](/docs/{{< param docs_version >}}/utilities/text/#font-weight-and-italics)). Note that `.card-title`, while similarly named, produces a different look than `.panel-title`.
- `.panel-title` to `.card-title`. Depending on the desired look, you may also want to use [heading elements or classes]({{< docsref "/content/typography#headings" >}}) (e.g. `<h3>`, `.h3`) or bold elements or classes (e.g. `<strong>`, `<b>`, [`.font-weight-bold`]({{< docsref "/utilities/text#font-weight-and-italics" >}})). Note that `.card-title`, while similarly named, produces a different look than `.panel-title`.
- `.panel-body` to `.card-body`
- `.panel-footer` to `.card-footer`
- `.panel-primary`, `.panel-success`, `.panel-info`, `.panel-warning`, and `.panel-danger` have been dropped for `.bg-`, `.text-`, and `.border` utilities generated from our `$theme-colors` Sass map.
@ -289,13 +289,13 @@ Dropped entirely for the new card component.
- **Display, hidden, and more:**
- Made display utilities responsive (e.g., `.d-none` and `d-{sm,md,lg,xl}-none`).
- Dropped the bulk of `.hidden-*` utilities for new [display utilities](/docs/{{< param docs_version >}}/utilities/display/). For example, instead of `.hidden-sm-up`, use `.d-sm-none`. Renamed the `.hidden-print` utilities to use the display utility naming scheme. More info under the [Responsive utilities](#responsive-utilities) section of this page.
- Dropped the bulk of `.hidden-*` utilities for new [display utilities]({{< docsref "/utilities/display" >}}). For example, instead of `.hidden-sm-up`, use `.d-sm-none`. Renamed the `.hidden-print` utilities to use the display utility naming scheme. More info under the [Responsive utilities](#responsive-utilities) section of this page.
- Added `.float-{sm,md,lg,xl}-{left,right,none}` classes for responsive floats and removed `.pull-left` and `.pull-right` since they're redundant to `.float-left` and `.float-right`.
- **Type:**
- Added responsive variations to our text alignment classes `.text-{sm,md,lg,xl}-{left,center,right}`.
- **Alignment and spacing:**
- Added new [responsive margin and padding utilities](/docs/{{< param docs_version >}}/utilities/spacing/) for all sides, plus vertical and horizontal shorthands.
- Added boatload of [flexbox utilities](/docs/{{< param docs_version >}}/utilities/flex/).
- Added new [responsive margin and padding utilities]({{< docsref "/utilities/spacing" >}}) for all sides, plus vertical and horizontal shorthands.
- Added boatload of [flexbox utilities]({{< docsref "/utilities/flex" >}}).
- Dropped `.center-block` for the new `.mx-auto` class.
- Clearfix updated to drop support for older browser versions.
@ -310,7 +310,7 @@ Removed the following mixins: `animation`, `animation-delay`, `animation-directi
Our documentation received an upgrade across the board as well. Here's the low down:
- We're still using Jekyll, but we have plugins in the mix:
- `bugify.rb` is used to efficiently list out the entries on our [browser bugs](/docs/{{< param docs_version >}}/browser-bugs/) page.
- `bugify.rb` is used to efficiently list out the entries on our [browser bugs]({{< docsref "/browser-bugs" >}}) page.
- `example.rb` is a custom fork of the default `highlight.rb` plugin, allowing for easier example-code handling.
- `callout.rb` is a similar custom fork of that, but designed for our special docs callouts.
- [jekyll-toc](https://github.com/toshimaru/jekyll-toc) is used to generate our table of contents.

2
site/content/docs/4.3/utilities/colors.md
View File

@ -49,7 +49,7 @@ Similar to the contextual text color classes, easily set the background of an el
## Background gradient
When `$enable-gradients` is set to `true` (default is `false`), you can use `.bg-gradient-` utility classes. [Learn about our Sass options](/docs/{{< param docs_version >}}/getting-started/theming/#sass-options) to enable these classes and more.
When `$enable-gradients` is set to `true` (default is `false`), you can use `.bg-gradient-` utility classes. [Learn about our Sass options]({{< docsref "/getting-started/theming#sass-options" >}}) to enable these classes and more.
{{< markdown >}}
{{< colors.inline >}}

2
site/content/docs/4.3/utilities/display.md
View File

@ -12,7 +12,7 @@ Change the value of the [`display` property](https://developer.mozilla.org/en-US
## Notation
Display utility classes that apply to all [breakpoints](/docs/{{< param docs_version >}}/layout/overview/#responsive-breakpoints), from `xs` to `xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
Display utility classes that apply to all [breakpoints]({{< docsref "/layout/overview#responsive-breakpoints" >}}), from `xs` to `xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
As such, the classes are named using the format:

1
site/layouts/shortcodes/docsref.html Normal file
View File

@ -0,0 +1 @@
{{- relref . ((printf "docs/%s%s" $.Site.Params.docs_version (.Get 0)) | relURL) -}}