mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-17 19:21:23 +03:00
Merge branch 'main' into patrickhlauke-issue36736
This commit is contained in:
Patrick H. Lauke
@@ -26,4 +26,4 @@ Our latest release, Bootstrap 5, focuses on improving v4's codebase with as few
|
||||
|
||||
## Get involved
|
||||
|
||||
Get involved with Bootstrap development by [opening an issue]({{< param repo >}}/issues/new) or submitting a pull request. Read our [contributing guidelines]({{< param repo >}}/blob/v{{< param current_version >}}/.github/CONTRIBUTING.md) for information on how we develop.
|
||||
Get involved with Bootstrap development by [opening an issue]({{< param repo >}}/issues/new/choose) or submitting a pull request. Read our [contributing guidelines]({{< param repo >}}/blob/v{{< param current_version >}}/.github/CONTRIBUTING.md) for information on how we develop.
|
||||
|
||||
@@ -20,4 +20,4 @@ Bootstrap is maintained by the founding team and a small group of invaluable cor
|
||||
</div>
|
||||
{{< /team.inline >}}
|
||||
|
||||
Get involved with Bootstrap development by [opening an issue]({{< param repo >}}/issues/new) or submitting a pull request. Read our [contributing guidelines]({{< param repo >}}/blob/v{{< param current_version >}}/.github/CONTRIBUTING.md) for information on how we develop.
|
||||
Get involved with Bootstrap development by [opening an issue]({{< param repo >}}/issues/new/choose) or submitting a pull request. Read our [contributing guidelines]({{< param repo >}}/blob/v{{< param current_version >}}/.github/CONTRIBUTING.md) for information on how we develop.
|
||||
|
||||
@@ -109,7 +109,7 @@ You can replace the text within the `.navbar-brand` with an `<img>`.
|
||||
<nav class="navbar bg-light">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">
|
||||
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
|
||||
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -123,7 +123,7 @@ You can also make use of some additional utilities to add an image and text at t
|
||||
<nav class="navbar bg-light">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">
|
||||
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
|
||||
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
|
||||
Bootstrap
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -81,6 +81,8 @@ You can use a link with the `href` attribute, or a button with the `data-bs-targ
|
||||
|
||||
### Dark offcanvas
|
||||
|
||||
{{< added-in "5.2.0" >}}
|
||||
|
||||
Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`.
|
||||
|
||||
{{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}}
|
||||
@@ -155,7 +157,7 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi
|
||||
|
||||
## Responsive
|
||||
|
||||
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
|
||||
{{< added-in "5.2.0" >}}
|
||||
|
||||
Responsive offcanvas classes hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, `.offcanvas-lg` hides content in an offcanvas below the `lg` breakpoint, but shows the content above the `lg` breakpoint.
|
||||
|
||||
@@ -245,7 +247,7 @@ Since the offcanvas panel is conceptually a modal dialog, be sure to add `aria-l
|
||||
|
||||
### Variables
|
||||
|
||||
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
|
||||
{{< added-in "5.2.0" >}}
|
||||
|
||||
As part of Bootstrap's evolving CSS variables approach, offcanvas now uses local CSS variables on `.offcanvas` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
|
||||
|
||||
|
||||
@@ -380,6 +380,8 @@ const scrollSpy = new bootstrap.ScrollSpy(document.body, {
|
||||
| `rootMargin` | string | `0px 0px -40%` | Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) valid units, when calculating scroll position. |
|
||||
| `smoothScroll` | boolean | `false` | Enables smooth scrolling when a user clicks on a link that refers to ScrollSpy observables. |
|
||||
| `target` | string \| jQuery object \| DOM element | | Specifies element to apply Scrollspy plugin. |
|
||||
| `threshold` | array | `[0.1, 0.5, 1]` | `IntersectionObserver` [threshold](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#threshold) valid input, when calculating scroll position.|
|
||||
|
||||
{{< /bs-table >}}
|
||||
|
||||
{{< callout warning >}}
|
||||
|
||||
@@ -212,7 +212,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
|
||||
| `container` | string, element, false | `false` | Appends the tooltip to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize. |
|
||||
| `customClass` | string, function | `''` | Add classes to the tooltip when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: `'class-1 class-2'`. You can also pass a function that should return a single string containing additional class names. |
|
||||
| `delay` | number, object | `0` | Delay showing and hiding the tooltip (ms)—doesn't apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { "show": 500, "hide": 100 }`. |
|
||||
| `fallbackPlacements` | string, array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements. |
|
||||
| `fallbackPlacements` | string, array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements). |
|
||||
| `html` | boolean | `false` | Allow HTML in the tooltip. If true, HTML tags in the tooltip's `title` will be rendered in the tooltip. If false, `innerText` property will be used to insert content into the DOM. Use text if you're worried about XSS attacks. |
|
||||
| `offset` | number, string, function | `[0, 0]` | Offset of the tooltip relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
|
||||
| `placement` | string, function | `'top'` | How to position the tooltip: auto, top, bottom, left, right. When `auto` is specified, it will dynamically reorient the tooltip. When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The `this` context is set to the tooltip instance. |
|
||||
|
||||
@@ -16,7 +16,7 @@ aliases: "/examples/"
|
||||
<p>
|
||||
<strong>RTL is still experimental</strong> and will evolve with feedback. Spotted something or have an improvement to suggest?
|
||||
</p>
|
||||
<p><a href="{{ $.Site.Params.repo }}/issues/new">Please open an issue.</a></p>
|
||||
<p><a href="{{ $.Site.Params.repo }}/issues/new/choose">Please open an issue.</a></p>
|
||||
</div>
|
||||
{{ end -}}
|
||||
</div>
|
||||
|
||||
@@ -9,7 +9,7 @@ aliases:
|
||||
|
||||
While the getting started pages provide an introductory tour of the project and what it offers, this document focuses on _why_ we do the things we do in Bootstrap. It explains our philosophy to building on the web so that others can learn from us, contribute with us, and help us improve.
|
||||
|
||||
See something that doesn't sound right, or perhaps could be done better? [Open an issue]({{< param repo >}}/issues/new)—we'd love to discuss it with you.
|
||||
See something that doesn't sound right, or perhaps could be done better? [Open an issue]({{< param repo >}}/issues/new/choose)—we'd love to discuss it with you.
|
||||
|
||||
## Summary
|
||||
|
||||
|
||||
@@ -17,4 +17,4 @@ We've designed and developed Bootstrap to work in a number of environments. Here
|
||||
- Working with Sass files
|
||||
- Building new CSS components
|
||||
- Working with flexbox
|
||||
- Ask in [Slack](https://bootstrap-slack.herokuapp.com/)
|
||||
- Ask in [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions)
|
||||
|
||||
@@ -154,7 +154,7 @@ For improved cross-browser rendering, we use [Reboot]({{< docsref "/content/rebo
|
||||
Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.
|
||||
|
||||
- Read and subscribe to [The Official Bootstrap Blog]({{< param blog >}}).
|
||||
- Join [the official Slack room]({{< param slack >}}).
|
||||
- Ask and explore [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions).
|
||||
- Chat with fellow Bootstrappers in IRC. On the `irc.libera.chat` server, in the `#bootstrap` channel.
|
||||
- Implementation help may be found at Stack Overflow (tagged [`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5)).
|
||||
- Developers should use the keyword `bootstrap` on packages that modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/search?q=keywords:bootstrap) or similar delivery mechanisms for maximum discoverability.
|
||||
|
||||
@@ -4,6 +4,7 @@ title: "Bootstrap & Parcel"
|
||||
description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Parcel.
|
||||
group: getting-started
|
||||
toc: true
|
||||
thumbnail: guides/bootstrap-parcel@2x.png
|
||||
---
|
||||
|
||||
<img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png" width="2000" height="1000" alt="">
|
||||
|
||||
@@ -15,7 +15,7 @@ You may also want to read up on [the RTLCSS project](https://rtlcss.com/), as it
|
||||
{{< callout warning >}}
|
||||
### Experimental feature
|
||||
|
||||
The RTL feature is still **experimental** and will probably evolve according to user feedback. Spotted something or have an improvement to suggest? [Open an issue]({{< param repo >}}/issues/new), we'd love to get your insights.
|
||||
The RTL feature is still **experimental** and will probably evolve according to user feedback. Spotted something or have an improvement to suggest? [Open an issue]({{< param repo >}}/issues/new/choose), we'd love to get your insights.
|
||||
{{< /callout >}}
|
||||
|
||||
## Required HTML
|
||||
|
||||
@@ -4,6 +4,7 @@ title: "Bootstrap & Vite"
|
||||
description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Vite.
|
||||
group: getting-started
|
||||
toc: true
|
||||
thumbnail: guides/bootstrap-vite@2x.png
|
||||
---
|
||||
|
||||
<img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png" width="2000" height="1000" alt="">
|
||||
|
||||
@@ -4,6 +4,7 @@ title: "Bootstrap & Webpack"
|
||||
description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Webpack.
|
||||
group: getting-started
|
||||
toc: true
|
||||
thumbnail: guides/bootstrap-webpack@2x.png
|
||||
---
|
||||
|
||||
<img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png" width="2000" height="1000" alt="">
|
||||
|
||||
@@ -143,6 +143,8 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from
|
||||
|
||||
### Variables
|
||||
|
||||
{{< added-in "5.2.0" >}}
|
||||
|
||||
{{< scss-docs name="root-border-var" file="scss/_root.scss" >}}
|
||||
|
||||
### Sass variables
|
||||
|
||||
Reference in New Issue
Block a user