From: Christian Oliff Date: Fri, 23 Jan 2026 16:01:20 +0000 (+0900) Subject: docs: v6 docs fixes (#42030) X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=a917c1e8c28562ed7f81874c2c6a458ab82435ba;p=thirdparty%2Fbootstrap.git docs: v6 docs fixes (#42030) * docs: v6 docs updates - Replace Popper with Floating UI - Fix names on Migration docs * Update site/src/content/docs/guides/npm.mdx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update site/src/content/docs/guides/parcel.mdx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update site/src/content/docs/guides/webpack.mdx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update site/src/content/docs/guides/vite.mdx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- diff --git a/README.md b/README.md index 15258e442c..86063e7da2 100644 --- a/README.md +++ b/README.md @@ -115,7 +115,7 @@ Within the download you’ll find the following directories and files, logically ``` -We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://web.dev/articles/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/docs/v2/). All CSS files work for both LTR and RTL layouts thanks to logical properties—simply set `dir="rtl"` on your HTML element. +We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://web.dev/articles/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Floating UI](https://floating-ui.com/). All CSS files work for both LTR and RTL layouts thanks to logical properties—simply set `dir="rtl"` on your HTML element. ## Bugs and feature requests diff --git a/site/data/plugins.yml b/site/data/plugins.yml index e846e2a3ab..bee8e690fc 100644 --- a/site/data/plugins.yml +++ b/site/data/plugins.yml @@ -27,7 +27,7 @@ link: components/offcanvas/ - name: Popover - description: Create custom overlays. Built on Popper. + description: Create custom overlays. Built on Floating UI. link: components/popovers/ - name: Scrollspy @@ -47,5 +47,5 @@ link: components/toggler/ - name: Tooltip - description: Replace browser tooltips with custom ones. Built on Popper. + description: Replace browser tooltips with custom ones. Built on Floating UI. link: components/tooltips/ diff --git a/site/src/content/callouts/warning-data-bs-title-vs-title.md b/site/src/content/callouts/warning-data-bs-title-vs-title.md index e932f22ad9..e8129be608 100644 --- a/site/src/content/callouts/warning-data-bs-title-vs-title.md +++ b/site/src/content/callouts/warning-data-bs-title-vs-title.md @@ -1 +1 @@ -Feel free to use either `title` or `data-bs-title` in your HTML. When `title` is used, Popper will replace it automatically with `data-bs-title` when the element is rendered. +Feel free to use either `title` or `data-bs-title` in your HTML. When `title` is used, Floating UI will replace it automatically with `data-bs-title` when the element is rendered. diff --git a/site/src/content/docs/components/dropdown.mdx b/site/src/content/docs/components/dropdown.mdx index 8cf1a20c07..4a6ad8e55b 100644 --- a/site/src/content/docs/components/dropdown.mdx +++ b/site/src/content/docs/components/dropdown.mdx @@ -23,7 +23,7 @@ Toggle dropdown menus with buttons whenever possible. Here's an example using a Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is [an intentional design decision](https://markdotto.com/blog/bootstrap-explained-dropdowns/). -Dropdowns are built on a third party library, [Floating UI](https://floating-ui.com/), which provides dynamic positioning and viewport detection. Be sure to include [floating-ui.dom.umd.min.js]([[config:cdn.floating_ui]]) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Floating UI. Popper isn't used to position dropdowns in navbars though as dynamic positioning isn't required. +Dropdowns are built on a third party library, [Floating UI](https://floating-ui.com/), which provides dynamic positioning and viewport detection. Be sure to include [floating-ui.dom.umd.min.js]([[config:cdn.floating_ui]]) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Floating UI. Floating UI isn't used to position dropdowns in navbars though as dynamic positioning isn't required. ## Examples diff --git a/site/src/content/docs/customize/optimize.mdx b/site/src/content/docs/customize/optimize.mdx index b660a6569e..195f2e3ba8 100644 --- a/site/src/content/docs/customize/optimize.mdx +++ b/site/src/content/docs/customize/optimize.mdx @@ -14,7 +14,7 @@ If you’re not using a component, comment it out or delete it entirely. For exa ## Lean JavaScript -Bootstrap’s JavaScript includes every component in our primary dist files (`bootstrap.js` and `bootstrap.min.js`), and even our primary dependency (Popper) with our bundle files (`bootstrap.bundle.js` and `bootstrap.bundle.min.js`). While you’re customizing via Sass, be sure to remove related JavaScript. +Bootstrap’s JavaScript includes every component in our primary dist files (`bootstrap.js` and `bootstrap.min.js`), and even our primary dependency (Floating UI) with our bundle files (`bootstrap.bundle.js` and `bootstrap.bundle.min.js`). While you’re customizing via Sass, be sure to remove related JavaScript. For instance, assuming you’re using your own JavaScript bundler like Webpack, Parcel, or Vite, you’d only import the JavaScript you plan on using. In the example below, we show how to just include our dialog JavaScript: @@ -35,7 +35,7 @@ import 'bootstrap/js/dist/dialog'; // import 'bootstrap/js/dist/tooltip'; ``` -This way, you’re not including any JavaScript you don’t intend to use for components like buttons, carousels, and tooltips. If you’re importing dropdowns, tooltips or popovers, be sure to list the Popper dependency in your `package.json` file. +This way, you’re not including any JavaScript you don’t intend to use for components like buttons, carousels, and tooltips. If you’re importing dropdowns, tooltips or popovers, be sure to list the Floating UI dependency in your `package.json` file. **Heads up!** Files in `bootstrap/js/dist` use the **default export**. To use them, do the following: diff --git a/site/src/content/docs/getting-started/download.mdx b/site/src/content/docs/getting-started/download.mdx index 60126bfa4f..3abe8f3e40 100644 --- a/site/src/content/docs/getting-started/download.mdx +++ b/site/src/content/docs/getting-started/download.mdx @@ -11,7 +11,7 @@ Download ready-to-use compiled code for **Bootstrap v[[config:current_version]]* - Compiled and minified CSS bundles - Compiled and minified JavaScript plugins -This doesn’t include documentation, source files, or any optional JavaScript dependencies like Popper. +This doesn’t include documentation, source files, or any optional JavaScript dependencies like Floating UI. Download @@ -41,7 +41,7 @@ Skip the download with [jsDelivr](https://www.jsdelivr.com/) to deliver cached v ``` -If you’re using our compiled JavaScript and prefer to include Floating UI separately, add Popper before our JS, via a CDN preferably. +If you’re using our compiled JavaScript and prefer to include Floating UI separately, add Floating UI before our JS, via a CDN preferably. ```html diff --git a/site/src/content/docs/getting-started/install.mdx b/site/src/content/docs/getting-started/install.mdx index 9d326a768c..7e15e4baa0 100644 --- a/site/src/content/docs/getting-started/install.mdx +++ b/site/src/content/docs/getting-started/install.mdx @@ -83,7 +83,7 @@ Here are our primary CDN links for CSS and JavaScript: ``` -If you’re using our compiled JavaScript and prefer to include Floating UI separately, add Popper before our JS, via a CDN preferably. +If you’re using our compiled JavaScript and prefer to include Floating UI separately, add Floating UI before our JS, via a CDN preferably. ```html @@ -94,7 +94,7 @@ If you’re using our compiled JavaScript and prefer to include Floating UI sepa | File type | URL | | --- | --- | | CSS | [`[[config:cdn.css]]`]([[config:cdn.css]]) | -| JS (with Popper) | [`[[config:cdn.js_bundle]]`]([[config:cdn.js_bundle]]) | +| JS (with Floating UI) | [`[[config:cdn.js_bundle]]`]([[config:cdn.js_bundle]]) | ### Using CDNs @@ -130,7 +130,7 @@ You can also do the old fashioned thing and download Bootstrap manually. Choose | Type | Description | Link | | --- | --- | --- | -| Distribution files | Ready-to-use compiled and minified CSS and JavaScript files. Doesn't include documentation, source files, or dependencies like Popper. | Download | +| Distribution files | Ready-to-use compiled and minified CSS and JavaScript files. Doesn't include documentation, source files, or dependencies like Floating UI. | Download | | Source files | Sass, JavaScript, and documentation files for compiling with your own asset pipeline. Requires [Sass compiler]([[docsref:/guides/contribute#sass]]), [Autoprefixer](https://github.com/postcss/autoprefixer), and a JavaScript bundler like [Rollup](https://rollupjs.org/) or [Webpack](https://webpack.js.org/). | Download | diff --git a/site/src/content/docs/getting-started/javascript.mdx b/site/src/content/docs/getting-started/javascript.mdx index d34af528bb..e0e7c1227c 100644 --- a/site/src/content/docs/getting-started/javascript.mdx +++ b/site/src/content/docs/getting-started/javascript.mdx @@ -6,7 +6,7 @@ toc: true ## JS components -Curious which components explicitly require our JavaScript and Popper? +Curious which components explicitly require our JavaScript and Floating UI? - Accordions for extending our Collapse plugin - Alerts for dismissing @@ -59,7 +59,7 @@ We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootst ``` -Compared to JS bundlers, using ESM in the browser requires you to use the full path and filename instead of the module name. [Read more about JS modules in the browser.](https://v8.dev/features/modules#specifiers) That’s why we use `'bootstrap.esm.min.js'` instead of `'bootstrap'` above. However, this is further complicated by our Popper dependency, which imports Popper into our JavaScript like so: +Compared to JS bundlers, using ESM in the browser requires you to use the full path and filename instead of the module name. [Read more about JS modules in the browser.](https://v8.dev/features/modules#specifiers) That’s why we use `'bootstrap.esm.min.js'` instead of `'bootstrap'` above. However, this is further complicated by our Floating UI dependency, which imports Floating UI into our JavaScript like so: ```js import * as Popper from "@floating-ui/dom" @@ -71,7 +71,7 @@ If you try this as-is, you’ll see an error in the console like the following: Uncaught TypeError: Failed to resolve module specifier "@floating-ui/dom". Relative references must start with either "/", "./", or "../". ``` -To fix this, you can use an `importmap` to resolve the arbitrary module names to complete paths. If your [targeted browsers](https://caniuse.com/?search=importmap) do not support `importmap`, you’ll need to use the [es-module-shims](https://github.com/guybedford/es-module-shims) project. Here’s how it works for Bootstrap and Popper: +To fix this, you can use an `importmap` to resolve the arbitrary module names to complete paths. If your [targeted browsers](https://caniuse.com/?search=importmap) do not support `importmap`, you’ll need to use the [es-module-shims](https://github.com/guybedford/es-module-shims) project. Here’s how it works for Bootstrap and Floating UI: ```html diff --git a/site/src/content/docs/getting-started/rtl.mdx b/site/src/content/docs/getting-started/rtl.mdx index c475bd1df4..d81e5badc1 100644 --- a/site/src/content/docs/getting-started/rtl.mdx +++ b/site/src/content/docs/getting-started/rtl.mdx @@ -89,10 +89,10 @@ Here's a modified RTL starter template: - + - +