From 41cbd4d5810069360399c12b3e490d7f145ded52 Mon Sep 17 00:00:00 2001 From: Ashcon Partovi Date: Fri, 4 Apr 2025 12:34:27 -0700 Subject: [PATCH 01/34] Docs: add Bun install instructions (#41277) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Julien Déramond --- README.md | 1 + site/content/docs/5.3/getting-started/download.md | 8 ++++++++ 2 files changed, 9 insertions(+) diff --git a/README.md b/README.md index 454ff61c9cdb..f831f47d7890 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,7 @@ Several quick start options are available: - Clone the repo: `git clone https://github.com/twbs/bootstrap.git` - Install with [npm](https://www.npmjs.com/): `npm install bootstrap@v5.3.5` - Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap@v5.3.5` +- Install with [Bun](https://bun.sh/): `bun add bootstrap@v5.3.5` - Install with [Composer](https://getcomposer.org/): `composer require twbs/bootstrap:5.3.5` - Install with [NuGet](https://www.nuget.org/): CSS: `Install-Package bootstrap` Sass: `Install-Package bootstrap.sass` diff --git a/site/content/docs/5.3/getting-started/download.md b/site/content/docs/5.3/getting-started/download.md index e15cb9860c84..76821ee01f64 100644 --- a/site/content/docs/5.3/getting-started/download.md +++ b/site/content/docs/5.3/getting-started/download.md @@ -111,6 +111,14 @@ yarn start # Start the project ``` {{< /callout >}} +### Bun + +Install Bootstrap in your Bun or Node.js powered apps with [the Bun CLI](https://bun.sh/): + +```sh +bun add bootstrap@{{< param "current_version" >}} +``` + ### RubyGems Install Bootstrap in your Ruby apps using [Bundler](https://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](https://bundler.io/guides/gemfile.html): From 9a01aa33de189748085a3c5280ca2f085615fead Mon Sep 17 00:00:00 2001 From: William Entriken Date: Sun, 6 Apr 2025 15:56:43 -0400 Subject: [PATCH 02/34] Docs: fix specification for getInstance (#41297) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Julien Déramond --- site/content/docs/5.3/components/tooltips.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.3/components/tooltips.md b/site/content/docs/5.3/components/tooltips.md index c2dfeda25ba2..ea57dc607922 100644 --- a/site/content/docs/5.3/components/tooltips.md +++ b/site/content/docs/5.3/components/tooltips.md @@ -246,7 +246,7 @@ const tooltip = new bootstrap.Tooltip(element, { | `disable` | Removes the ability for an element's tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled. | | `dispose` | Hides and destroys an element's tooltip (Removes stored data on the DOM element). Tooltips that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. | | `enable` | Gives an element's tooltip the ability to be shown. **Tooltips are enabled by default.** | -| `getInstance` | *Static* method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn't initialized. | +| `getInstance` | *Static* method which allows you to get the tooltip instance associated with a DOM element. | | `getOrCreateInstance` | *Static* method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn't initialized. | | `hide` | Hides an element's tooltip. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. | | `setContent` | Gives a way to change the tooltip's content after its initialization. | From 33bb9911e73dc671942ed22ce4d42fb1a193e309 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 7 Apr 2025 10:44:00 -0700 Subject: [PATCH 03/34] Docs: mention `npm install` and `npm run dist` in CONTRIBUTING.md (#41340) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Julien Déramond --- .github/CONTRIBUTING.md | 26 ++++++++++++++++++++------ 1 file changed, 20 insertions(+), 6 deletions(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 1c9caae3f319..d798b983e908 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -172,33 +172,47 @@ included in the project: git pull upstream main ``` -3. Create a new topic branch (off the main project development branch) to +3. Install or update project dependencies with npm: + + ```bash + npm install + ``` + +4. Create a new topic branch (off the main project development branch) to contain your feature, change, or fix: ```bash git checkout -b ``` -4. Commit your changes in logical chunks. Please adhere to these [git commit +5. Commit your changes in logical chunks. Please adhere to these [git commit message guidelines](https://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html) or your code is unlikely be merged into the main project. Use Git's [interactive rebase](https://help.github.com/articles/about-git-rebase/) feature to tidy up your commits before making them public. -5. Locally merge (or rebase) the upstream development branch into your topic branch: +6. Ensure your changes compile the dist CSS and JS files in the `dist/` directory. Verify + the build succeeds locally without errors. + + ```bash + npm run dist + ``` + +7. Locally merge (or rebase) the upstream development branch into your topic branch: ```bash git pull [--rebase] upstream main ``` -6. Push your topic branch up to your fork: +8. Commit your changes, but **do not push compiled CSS and JS files in `dist` and `js/dist`**. + Push your topic branch up to your fork: ```bash git push origin ``` -7. [Open a Pull Request](https://help.github.com/articles/about-pull-requests/) - with a clear title and description against the `main` branch. +9. [Open a pull request](https://help.github.com/articles/about-pull-requests/) + with a clear title and description against the `main` branch. **IMPORTANT**: By submitting a patch, you agree to allow the project owners to license your work under the terms of the [MIT License](../LICENSE) (if it From 6f10a1edbbd6bb87f2d4c5830cad070a6769be54 Mon Sep 17 00:00:00 2001 From: Maxime Lardenois Date: Mon, 7 Apr 2025 20:23:25 +0200 Subject: [PATCH 04/34] Docs: add Sass deprecations notices (#41283) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Mark Otto Co-authored-by: Julien Déramond --- .cspell.json | 1 + site/content/docs/5.3/customize/sass.md | 3 +++ site/content/docs/5.3/getting-started/parcel.md | 8 ++++++++ site/content/docs/5.3/getting-started/vite.md | 17 ++++++++++++++++- .../content/docs/5.3/getting-started/webpack.md | 15 ++++++++++++++- 5 files changed, 42 insertions(+), 2 deletions(-) diff --git a/.cspell.json b/.cspell.json index 484af2af58d7..b55fc872639c 100644 --- a/.cspell.json +++ b/.cspell.json @@ -87,6 +87,7 @@ "roboto", "RTLCSS", "ruleset", + "sassrc", "screenreaders", "scrollbars", "scrollspy", diff --git a/site/content/docs/5.3/customize/sass.md b/site/content/docs/5.3/customize/sass.md index 37d134d8dd7e..049d6f19db75 100644 --- a/site/content/docs/5.3/customize/sass.md +++ b/site/content/docs/5.3/customize/sass.md @@ -8,6 +8,9 @@ toc: true Utilize our source Sass files to take advantage of variables, maps, mixins, and more. +{{< callout warning >}} +Sass deprecation warnings are shown when compiling source Sass files with the latest versions of Dart Sass. This does not prevent compilation or usage of Bootstrap. We're [working on a long-term fix]({{< param repo >}}/issues/40962), but in the meantime these deprecation notices can be ignored. +{{< /callout >}} ## File structure Whenever possible, avoid modifying Bootstrap's core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you're using a package manager like npm, you'll have a file structure that looks like this: diff --git a/site/content/docs/5.3/getting-started/parcel.md b/site/content/docs/5.3/getting-started/parcel.md index c2c74bafd1e7..0adb1d3222d1 100644 --- a/site/content/docs/5.3/getting-started/parcel.md +++ b/site/content/docs/5.3/getting-started/parcel.md @@ -132,6 +132,14 @@ Importing Bootstrap into Parcel requires two imports, one into our `styles.scss` *You can also import our stylesheets individually if you want. [Read our Sass import docs]({{< docsref "/customize/sass#importing" >}}) for details.* + **Optional:** You may see Sass deprecation warnings with the latest versions of Dart Sass. These can silenced by adding the following configuration in a `.sassrc.js` file in the root folder with the following: + + ```js + module.exports = { + silenceDeprecations: ['import', 'mixed-decls', 'color-functions', 'global-builtin'] + } + ``` + 2. **Import Bootstrap's JS.** Add the following to `src/js/main.js` to import all of Bootstrap's JS. Popper will be imported automatically through Bootstrap. diff --git a/site/content/docs/5.3/getting-started/vite.md b/site/content/docs/5.3/getting-started/vite.md index 3a27d65eb83f..81e19e3bb47e 100644 --- a/site/content/docs/5.3/getting-started/vite.md +++ b/site/content/docs/5.3/getting-started/vite.md @@ -94,10 +94,25 @@ With dependencies installed and our project folder ready for us to start coding, }, server: { port: 8080 - } + }, + // Optional: Silence Sass deprecation warnings. See note below. + css: { + preprocessorOptions: { + scss: { + silenceDeprecations: [ + 'import', + 'mixed-decls', + 'color-functions', + 'global-builtin', + ], + }, + }, + }, } ``` + **Note:** Sass deprecation warnings are shown when compiling source Sass files with the latest versions of Dart Sass. This does not prevent compilation or usage of Bootstrap. We're [working on a long-term fix]({{< param repo >}}/issues/40962), but in the meantime these deprecation notices can be ignored. + 2. **Next we fill in `src/index.html`.** This is the HTML page Vite will load in the browser to utilize the bundled CSS and JS we'll add to it in later steps. ```html diff --git a/site/content/docs/5.3/getting-started/webpack.md b/site/content/docs/5.3/getting-started/webpack.md index 02eb6c540e77..74963e79e12d 100644 --- a/site/content/docs/5.3/getting-started/webpack.md +++ b/site/content/docs/5.3/getting-started/webpack.md @@ -203,7 +203,18 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first }, { // Loads a SASS/SCSS file and compiles it to CSS - loader: 'sass-loader' + loader: 'sass-loader', + options: { + sassOptions: { + // Optional: Silence Sass deprecation warnings. See note below. + silenceDeprecations: [ + 'mixed-decls', + 'color-functions', + 'global-builtin', + 'import' + ] + } + } } ] } @@ -214,6 +225,8 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first Here's a recap of why we need all these loaders. `style-loader` injects the CSS into a ` - - {{ range .Page.Params.extra_css -}} - {{ "" | safeHTML }} - - {{- end }} - - - {{ partial "examples/icons" . }} - -
- {{ partial "theme-toggler" . }} -
- - {{ .Content }} - - {{- if hugo.IsProduction -}} - - {{- else -}} - - {{- end }} - - {{ range .Page.Params.extra_js -}} - - {{- end -}} - - diff --git a/site/layouts/_default/home.html b/site/layouts/_default/home.html deleted file mode 100644 index 878e77474ef7..000000000000 --- a/site/layouts/_default/home.html +++ /dev/null @@ -1,16 +0,0 @@ -{{ define "main" }} -
- {{ partial "home/masthead" . }} -
- {{ partial "home/get-started" . }} - {{ partial "home/customize" . }} - {{ partial "home/css-variables" . }} - {{ partial "home/components-utilities" . }} - {{ partial "home/plugins" . }} - {{ partial "home/icons" . }} - {{ partial "home/themes" . }} -
-
- - {{ .Content }} -{{ end }} diff --git a/site/layouts/_default/redirect.html b/site/layouts/_default/redirect.html deleted file mode 100644 index 63ded089e872..000000000000 --- a/site/layouts/_default/redirect.html +++ /dev/null @@ -1 +0,0 @@ -{{ partial "redirect" (.Page.Params.redirect | absURL) }} diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html deleted file mode 100644 index d0d5e6b5d4fd..000000000000 --- a/site/layouts/_default/single.html +++ /dev/null @@ -1,37 +0,0 @@ -{{ define "main" }} -
-
-
-
-

{{ .Title | markdownify }}

-

{{ .Page.Params.Description | markdownify }}

- {{ if eq .Title "Examples" -}} -
- - - Download examples - - - Download source code - -
- {{- end }} -
-
- {{ partial "ads" . }} -
-
-
-
- -
-
- {{ .Content }} - - {{ if eq .Title "Examples" -}} - {{ partial "examples/main" . }} - {{ partial "examples/bs-themes" . }} - {{- end }} -
-
-{{ end }} diff --git a/site/layouts/alias.html b/site/layouts/alias.html deleted file mode 100644 index 35765c490767..000000000000 --- a/site/layouts/alias.html +++ /dev/null @@ -1 +0,0 @@ -{{ partial "redirect" .Permalink }} diff --git a/site/layouts/partials/ads.html b/site/layouts/partials/ads.html deleted file mode 100644 index bbb967141737..000000000000 --- a/site/layouts/partials/ads.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/site/layouts/partials/analytics.html b/site/layouts/partials/analytics.html deleted file mode 100644 index 7bc14907bbe1..000000000000 --- a/site/layouts/partials/analytics.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/site/layouts/partials/callouts/info-mediaqueries-breakpoints.md b/site/layouts/partials/callouts/info-mediaqueries-breakpoints.md deleted file mode 100644 index 2eea77138b03..000000000000 --- a/site/layouts/partials/callouts/info-mediaqueries-breakpoints.md +++ /dev/null @@ -1 +0,0 @@ -**Why subtract .02px?** Browsers don't currently support [range context queries](https://www.w3.org/TR/mediaqueries-4/#range-context), so we work around the limitations of [`min-` and `max-` prefixes](https://www.w3.org/TR/mediaqueries-4/#mq-min-max) and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision. diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html deleted file mode 100644 index 54dd61d43455..000000000000 --- a/site/layouts/partials/docs-navbar.html +++ /dev/null @@ -1,92 +0,0 @@ -
- -
diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html deleted file mode 100644 index 51e7bac4fc8a..000000000000 --- a/site/layouts/partials/docs-sidebar.html +++ /dev/null @@ -1,47 +0,0 @@ - diff --git a/site/layouts/partials/docs-versions.html b/site/layouts/partials/docs-versions.html deleted file mode 100644 index 453244ed7eea..000000000000 --- a/site/layouts/partials/docs-versions.html +++ /dev/null @@ -1,58 +0,0 @@ -{{- $url := split .Permalink "/" -}} -{{- $page_version := index $url (sub (len $url) 4) -}} -{{- $group_slug := index $url (sub (len $url) 3) -}} -{{- $page_slug := index $url (sub (len $url) 2) -}} - -{{- $versions_link := "" -}} -{{- if and (eq .Layout "docs") (eq $page_version .Site.Params.docs_version) -}} - {{- $versions_link = urls.JoinPath $group_slug $page_slug "/" -}} -{{- else if (eq .Layout "single") -}} - {{- $versions_link = urls.JoinPath $page_slug "/" -}} -{{- end -}} - -{{- $added_in_51 := eq (string .Page.Params.added.version) "5.1" -}} -{{- $added_in_52 := eq (string .Page.Params.added.version) "5.2" -}} -{{- $added_in_53 := eq (string .Page.Params.added.version) "5.3" -}} - -
  • - - -
    • diff --git a/site/layouts/partials/examples/bs-themes.html b/site/layouts/partials/examples/bs-themes.html deleted file mode 100644 index b426d0723f63..000000000000 --- a/site/layouts/partials/examples/bs-themes.html +++ /dev/null @@ -1,17 +0,0 @@ -
    -
    -
    -
    - {{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }} -
    -

    Go further with Bootstrap Themes

    -

    - Need something more than these examples? Take Bootstrap to the next level with premium themes from the official Bootstrap Themes marketplace. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools. -

    - Browse themes -
    - {{ partial "responsive-img" (dict "context" . - "imgPath" "/assets/img/bootstrap-themes-collage.png" - "alt" "Bootstrap Themes" - "classes" "d-block mt-3") }} -
    diff --git a/site/layouts/partials/examples/icons.html b/site/layouts/partials/examples/icons.html deleted file mode 100644 index aab3d56f7ee9..000000000000 --- a/site/layouts/partials/examples/icons.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/site/layouts/partials/examples/main.html b/site/layouts/partials/examples/main.html deleted file mode 100644 index 59f35d7cb11b..000000000000 --- a/site/layouts/partials/examples/main.html +++ /dev/null @@ -1,63 +0,0 @@ -{{ range $entry := $.Site.Data.examples -}} -
    -

    {{ $entry.category }}

    -

    {{ $entry.description }}

    - {{ if eq $entry.category "RTL" -}} -
    -

    - RTL is still experimental and will evolve with feedback. Spotted something or have an improvement to suggest? -

    -

    Please open an issue.

    -
    - {{ end -}} - {{ range $i, $example := $entry.examples -}} - {{- $len := len $entry.examples -}} - {{ if (eq $i 0) }}
    {{ end }} - {{ if $entry.external -}} -
    - -
    -

    - - {{ $example.name }} - -

    -

    {{ $example.description }}

    -

    - {{- $indexPath := default "index.html" $example.indexPath -}} - {{- $stackBlitzUrl := printf "%s%s%s" (urls.JoinPath "https://stackblitz.com/github/twbs" $example.url) "?file=" ($indexPath | urlquery) }} - - - Edit in StackBlitz - -

    -
    -
    - {{ else -}} -
    - {{- $exampleNameUrlized := $example.name | urlize -}} - {{- $exampleUrl := urls.JoinPath "/docs" $.Site.Params.docs_version "/examples" $exampleNameUrlized "/" }} - - {{ $imageBasePath := urls.JoinPath "/docs" $.Site.Params.docs_version "assets/img/examples" -}} - {{- $imgPath := urls.JoinPath $imageBasePath (printf "%s.png" $exampleNameUrlized) -}} - {{- $imgPath2x := urls.JoinPath $imageBasePath (printf "%s@2x.png" $exampleNameUrlized) -}} - {{- with (imageConfig (path.Join "/site/static" $imgPath)) -}} - - {{- end }} -

    - {{ $example.name }} -

    -     -

    {{ $example.description }}

    -
    - {{- end }} - {{ if (eq (add $i 1) $len) }}
    {{ end -}} - {{ end -}} -
    -{{ end -}} diff --git a/site/layouts/partials/favicons.html b/site/layouts/partials/favicons.html deleted file mode 100644 index 9233ff624a2c..000000000000 --- a/site/layouts/partials/favicons.html +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html deleted file mode 100644 index 562489e50c14..000000000000 --- a/site/layouts/partials/footer.html +++ /dev/null @@ -1,59 +0,0 @@ - diff --git a/site/layouts/partials/guide-footer.md b/site/layouts/partials/guide-footer.md deleted file mode 100644 index 22d4c14b8928..000000000000 --- a/site/layouts/partials/guide-footer.md +++ /dev/null @@ -1,3 +0,0 @@ -
    - -_See something wrong or out of date here? Please [open an issue on GitHub]({{ .Site.Params.repo }}/issues/new/choose). Need help troubleshooting? [Search or start a discussion]({{ .Site.Params.repo }}/discussions) on GitHub._ diff --git a/site/layouts/partials/header.html b/site/layouts/partials/header.html deleted file mode 100644 index 66bdf2fb1bcf..000000000000 --- a/site/layouts/partials/header.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - - - - - -{{ if (ne .Page.Layout "examples") -}} - -{{- end }} - -{{ if .IsHome }}{{ .Site.Title | markdownify }} · {{ .Site.Params.subtitle | markdownify }}{{ else }}{{ .Title | markdownify }} · {{ .Site.Title | markdownify }} v{{ .Site.Params.docs_version }}{{ end }} - -{{ with .Params.robots -}} - -{{- end }} - -{{- $colorModeJS := urls.JoinPath "/docs" $.Site.Params.docs_version "assets/js/color-modes.js" -}} - - -{{ partial "stylesheet" . }} -{{ partial "favicons" . }} -{{ partial "social" . }} -{{ partial "analytics" . }} diff --git a/site/layouts/partials/home/components-utilities.html b/site/layouts/partials/home/components-utilities.html deleted file mode 100644 index 1f2534600a21..000000000000 --- a/site/layouts/partials/home/components-utilities.html +++ /dev/null @@ -1,88 +0,0 @@ -
    -
    -
    - -
    - -
    - -
    -

    Components, meet the Utility API

    -

    - New in Bootstrap 5, our utilities are now generated by our Utility API. We built it as a feature-packed Sass map that can be quickly and easily customized. It's never been easier to add, remove, or modify any utility classes. Make utilities responsive, add pseudo-class variants, and give them custom names. -

    -
    -
    -
    -

    Quickly customize components

    -

    Apply any of our included utility classes to our components to customize their appearance, like the navigation example below. There are hundreds of classes available—from positioning and sizing to colors and effects. Mix them with CSS variable overrides for even more control.

    -
    - - -
    -{{ highlight (printf ` -`) "html" "" }} -

    - - Explore customized components - - -

    -
    -
    -

    Create and extend utilities

    -

    Use Bootstrap's utility API to modify any of our included utilities or create your own custom utilities for any project. Import Bootstrap first, then use Sass map functions to modify, add, or remove utilities.

    -{{ highlight (printf `@import "bootstrap/scss/bootstrap"; - -$utilities: map-merge( - $utilities, - ( - "cursor": ( - property: cursor, - class: cursor, - responsive: true, - values: auto pointer grab, - ) - ) -); -`) "scss" "" }} - -

    - - Explore the utility API - - -

    -
    -
    -
    diff --git a/site/layouts/partials/home/get-started.html b/site/layouts/partials/home/get-started.html deleted file mode 100644 index 977bb07a6d31..000000000000 --- a/site/layouts/partials/home/get-started.html +++ /dev/null @@ -1,58 +0,0 @@ -
    -
    - -
    -

    Get started any way you want

    -

    - Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code. -

    -

    - - Read installation docs - - -

    -
    - -
    -
    - -

    Install via package manager

    -

    - Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package-managed installs don’t include documentation or our full build scripts. You can also use any demo from our Examples repo to quickly jumpstart Bootstrap projects. -

    - {{ highlight (printf ("npm install bootstrap@%s") .Site.Params.current_version) "sh" "" }} - {{ highlight (printf ("gem install bootstrap -v %s") .Site.Params.current_ruby_version) "sh" "" }} -

    - Read our installation docs for more info and additional package managers. -

    -
    -
    - -

    Include via CDN

    -

    - When you only need to include Bootstrap’s compiled CSS or JS, you can use jsDelivr. See it in action with our simple quick start, or browse the examples to jumpstart your next project. You can also choose to include Popper and our JS separately. -

    - {{ highlight (printf (``) .Site.Params.cdn.css (.Site.Params.cdn.css_hash | safeHTMLAttr)) "html" "" }} - {{ highlight (printf (``) .Site.Params.cdn.js_bundle (.Site.Params.cdn.js_bundle_hash | safeHTMLAttr)) "html" "" }} -
    - -
    -

    Read our getting started guides

    -

    Get a jump on including Bootstrap's source files in a new project with our official guides.

    -
    - - - Webpack - - - - Parcel - - - - Vite - -
    -
    -
    diff --git a/site/layouts/partials/home/icons.html b/site/layouts/partials/home/icons.html deleted file mode 100644 index 2de688fddd92..000000000000 --- a/site/layouts/partials/home/icons.html +++ /dev/null @@ -1,23 +0,0 @@ -
    -
    -
    - {{ partial "icons/circle-square.svg" (dict "width" "32" "height" "32") }} -
    -

    Personalize it with Bootstrap Icons

    -

    - Bootstrap Icons is an open source SVG icon library featuring over 1,800 glyphs, with more added every release. They're designed to work in any project, whether you use Bootstrap itself or not. Use them as SVGs or icon fonts—both options give you vector scaling and easy customization via CSS. -

    -

    - - Get Bootstrap Icons - - -

    -
    -
    - {{ partial "responsive-img" (dict "context" . - "imgPath" "/assets/img/bootstrap-icons.png" - "alt" "Bootstrap Icons" - "classes" "d-block mt-3") }} -
    -
    diff --git a/site/layouts/partials/home/masthead.html b/site/layouts/partials/home/masthead.html deleted file mode 100644 index 375228ec58ab..000000000000 --- a/site/layouts/partials/home/masthead.html +++ /dev/null @@ -1,38 +0,0 @@ -
    -
    -
    - - - Get Security Updates for Bootstrap 3 & 4 - - - - {{ partial "responsive-img" (dict "context" . - "imgPath" "/assets/brand/bootstrap-logo-shadow.png" - "alt" "Bootstrap" - "classes" "d-none d-sm-block mb-3" - "lazyload" false) }} -

    Build fast, responsive sites with Bootstrap

    -

    - Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins. -

    -
    -
    - {{ highlight (printf ("npm i bootstrap@%s") .Site.Params.current_version) "sh" "" }} -
    - - - Read the docs - -
    -

    - Currently v{{ .Site.Params.current_version }} - · - Download - · - All releases -

    - {{ partial "ads" . }} -
    -
    -
    diff --git a/site/layouts/partials/home/themes.html b/site/layouts/partials/home/themes.html deleted file mode 100644 index 142cef89ed9d..000000000000 --- a/site/layouts/partials/home/themes.html +++ /dev/null @@ -1,23 +0,0 @@ -
    -
    -
    - {{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }} -
    -

    Make it yours with official Bootstrap Themes

    -

    - Take Bootstrap to the next level with premium themes from the official Bootstrap Themes marketplace. Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools. -

    -

    - - Browse Bootstrap Themes - - -

    -
    -
    - {{ partial "responsive-img" (dict "context" . - "imgPath" "/assets/img/bootstrap-themes.png" - "alt" "Bootstrap Themes" - "classes" "d-block mt-3") }} -
    -
    diff --git a/site/layouts/partials/icons.html b/site/layouts/partials/icons.html deleted file mode 100644 index 7eff3282fe19..000000000000 --- a/site/layouts/partials/icons.html +++ /dev/null @@ -1,84 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/site/layouts/partials/icons/bootstrap-white-fill.svg b/site/layouts/partials/icons/bootstrap-white-fill.svg deleted file mode 100644 index af4bc7fcf02a..000000000000 --- a/site/layouts/partials/icons/bootstrap-white-fill.svg +++ /dev/null @@ -1 +0,0 @@ -{{ with .title }}{{ . }}{{ else }}Bootstrap{{ end }} \ No newline at end of file diff --git a/site/layouts/partials/icons/circle-square.svg b/site/layouts/partials/icons/circle-square.svg deleted file mode 100644 index 443cdabed13b..000000000000 --- a/site/layouts/partials/icons/circle-square.svg +++ /dev/null @@ -1,4 +0,0 @@ - diff --git a/site/layouts/partials/icons/droplet-fill.svg b/site/layouts/partials/icons/droplet-fill.svg deleted file mode 100644 index 1256029d2345..000000000000 --- a/site/layouts/partials/icons/droplet-fill.svg +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/site/layouts/partials/icons/github.svg b/site/layouts/partials/icons/github.svg deleted file mode 100644 index 6f06f7722b9f..000000000000 --- a/site/layouts/partials/icons/github.svg +++ /dev/null @@ -1 +0,0 @@ -{{ with .title }}{{ . }}{{ else }}GitHub{{ end }} \ No newline at end of file diff --git a/site/layouts/partials/icons/hamburger.svg b/site/layouts/partials/icons/hamburger.svg deleted file mode 100644 index 86b5a12a1438..000000000000 --- a/site/layouts/partials/icons/hamburger.svg +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/site/layouts/partials/icons/opencollective.svg b/site/layouts/partials/icons/opencollective.svg deleted file mode 100644 index 2896ba50cecf..000000000000 --- a/site/layouts/partials/icons/opencollective.svg +++ /dev/null @@ -1 +0,0 @@ -{{ with .title }}{{ . }}{{ else }}Open Collective{{ end }} \ No newline at end of file diff --git a/site/layouts/partials/icons/x.svg b/site/layouts/partials/icons/x.svg deleted file mode 100644 index 88a99d788312..000000000000 --- a/site/layouts/partials/icons/x.svg +++ /dev/null @@ -1 +0,0 @@ -{{ with .title }}{{ . }}{{ else }}X{{ end }} diff --git a/site/layouts/partials/redirect.html b/site/layouts/partials/redirect.html deleted file mode 100644 index a951e21960dc..000000000000 --- a/site/layouts/partials/redirect.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - {{ . }} - - - - - diff --git a/site/layouts/partials/responsive-img.html b/site/layouts/partials/responsive-img.html deleted file mode 100644 index 06aafb6aa77d..000000000000 --- a/site/layouts/partials/responsive-img.html +++ /dev/null @@ -1,22 +0,0 @@ -{{- /* - Accepts context, classes, imgPath, alt and lazyload -*/ -}} - -{{- $lazy := .lazyload | default true -}} -{{- $classes := slice "img-fluid" "mx-auto" | append (slice .classes) -}} - -{{- $basePath := path.Join "/docs" .context.Site.Params.docs_version (path.Dir .imgPath) -}} -{{- $basename := path.BaseName .imgPath -}} -{{- $ext := path.Ext .imgPath -}} -{{- $imgPath := path.Join $basePath (printf "%s%s" $basename $ext) -}} -{{- $imgPath2x := path.Join $basePath (printf "%s@2x%s" $basename $ext) -}} - -{{- with (imageConfig (path.Join "/site/static" $imgPath)) }} -{{ $.alt }} -{{- end }} diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html deleted file mode 100644 index e224c4b3775d..000000000000 --- a/site/layouts/partials/scripts.html +++ /dev/null @@ -1,40 +0,0 @@ -{{ if hugo.IsProduction -}} - -{{ else -}} - -{{- end }} - -{{- $esbuildOptions := dict "target" "es2019" -}} -{{- $targetDocsJSPath := path.Join "/docs" .Site.Params.docs_version -}} - -{{- if hugo.IsProduction -}} - {{- $esbuildOptions = merge $esbuildOptions (dict "minify" "true") -}} -{{- end }} - -{{- $applicationJs := resources.Get "js/application.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/application.js") }} - - -{{- if (ne .Page.Layout "examples") -}} -{{- $esbuildParams := dict - "apiKey" .Site.Params.algolia.apiKey - "appId" .Site.Params.algolia.appId - "indexName" .Site.Params.algolia.indexName --}} -{{- $esbuildOptions = merge $esbuildOptions (dict "params" $esbuildParams) -}} -{{- $searchJs := resources.Get "js/search.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/search.js") }} - -{{- end -}} - -{{ if eq .Page.Layout "docs" -}} -{{- /* Disable minify options for snippets.js so that the file's readable on StackBlitz */ -}} -{{- $snippetsFile := resources.Get "js/snippets.js" | js.Build (merge $esbuildOptions (dict "minify" "false")) -}} -{{- $esbuildParams := dict - "cssCdn" .Site.Params.cdn.css - "jsBundleCdn" .Site.Params.cdn.js_bundle - "docsVersion" .Site.Params.docs_version - "jsSnippetFile" $snippetsFile.Content --}} -{{- $esbuildOptions = merge $esbuildOptions (dict "params" $esbuildParams) -}} -{{- $stackblitzJs := resources.Get "js/stackblitz.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/stackblitz.js") }} - -{{- end -}} diff --git a/site/layouts/partials/skippy.html b/site/layouts/partials/skippy.html deleted file mode 100644 index 8da5c0a01870..000000000000 --- a/site/layouts/partials/skippy.html +++ /dev/null @@ -1,8 +0,0 @@ -
    -
    - Skip to main content - {{ if (eq .Page.Layout "docs") -}} - Skip to docs navigation - {{- end }} -
    -
    diff --git a/site/layouts/partials/social.html b/site/layouts/partials/social.html deleted file mode 100644 index 9a9bd7173d0f..000000000000 --- a/site/layouts/partials/social.html +++ /dev/null @@ -1,27 +0,0 @@ -{{- $pageTitle := .Title | markdownify -}} -{{- $pageDescription := .Page.Params.description | default .Site.Params.description | markdownify -}} -{{- $socialImagePath := urls.JoinPath "/docs" .Site.Params.docs_version "assets" -}} - -{{- if .Page.Params.thumbnail -}} - {{- $socialImagePath = urls.JoinPath $socialImagePath "img" .Page.Params.thumbnail -}} -{{- else -}} - {{- $socialImagePath = urls.JoinPath $socialImagePath "brand/bootstrap-social.png" -}} -{{- end -}} - - - - - - - - - - - - - - -{{ with (imageConfig (path.Join "site/static" $socialImagePath)) -}} - - -{{- end }} diff --git a/site/layouts/partials/stylesheet.html b/site/layouts/partials/stylesheet.html deleted file mode 100644 index 9969ee44fc4f..000000000000 --- a/site/layouts/partials/stylesheet.html +++ /dev/null @@ -1,27 +0,0 @@ -{{ if hugo.IsProduction -}} -{{ if eq .Page.Params.direction "rtl" -}} - -{{- else -}} - -{{- end -}} -{{- else -}} - -{{- end }} - -{{- if (ne .Page.Layout "examples") }} -{{- $sassOptions := dict "outputStyle" "expanded" "precision" 6 -}} -{{- $postcssOptions := dict "use" "autoprefixer" "noMap" true -}} - -{{- $targetDocsCssPath := path.Join "/docs" .Site.Params.docs_version "assets/css/docs.css" -}} -{{- $targetSearchCssPath := path.Join "/docs" .Site.Params.docs_version "assets/css/search.css" -}} - -{{ if hugo.IsProduction -}} - {{- $sassOptions = merge $sassOptions (dict "outputStyle" "compressed") -}} -{{- end -}} - -{{- $docsCss := resources.Get "scss/docs.scss" | toCSS (merge (dict "targetPath" $targetDocsCssPath) $sassOptions) | postCSS $postcssOptions -}} -{{- $searchCss := resources.Get "scss/search.scss" | toCSS (merge (dict "targetPath" $targetSearchCssPath) $sassOptions) | postCSS $postcssOptions -}} - - - -{{- end }} diff --git a/site/layouts/partials/theme-toggler.html b/site/layouts/partials/theme-toggler.html deleted file mode 100644 index 15906cfe9ea7..000000000000 --- a/site/layouts/partials/theme-toggler.html +++ /dev/null @@ -1,34 +0,0 @@ -{{- $isExamples := eq .Layout "examples" -}} - -
      -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    diff --git a/site/layouts/robots.txt b/site/layouts/robots.txt deleted file mode 100644 index bafd23893dc9..000000000000 --- a/site/layouts/robots.txt +++ /dev/null @@ -1,11 +0,0 @@ -# www.robotstxt.org - -{{- $isNetlify := eq (getenv "NETLIFY") "true" -}} -{{- $allowCrawling := and (not $isNetlify) hugo.IsProduction -}} - -{{ if $allowCrawling }} -# Allow crawling of all content -{{- end }} -User-agent: * -Disallow:{{ if not $allowCrawling }} /{{ end }} -Sitemap: {{ "/sitemap.xml" | absURL }} diff --git a/site/layouts/shortcodes/added-in.html b/site/layouts/shortcodes/added-in.html deleted file mode 100644 index abd8dc4f3428..000000000000 --- a/site/layouts/shortcodes/added-in.html +++ /dev/null @@ -1,5 +0,0 @@ -{{- /* Outputs badge to identify the first version something was added */ -}} - -{{- $version := .Get 0 -}} - -Added in v{{ $version }} diff --git a/site/layouts/shortcodes/bs-table.html b/site/layouts/shortcodes/bs-table.html deleted file mode 100644 index 9eec109cb8cf..000000000000 --- a/site/layouts/shortcodes/bs-table.html +++ /dev/null @@ -1,9 +0,0 @@ -{{- /* - Usage: `bs-table "class class-foo"`, where class can be any string -*/ -}} - -{{- $css_class := .Get 0 | default "table" -}} -{{- $html_table := .Inner | markdownify -}} -{{- $html_table = replace $html_table "" (printf `
    ` $css_class) -}} -{{- $html_table = replace $html_table "
    " "" -}} -{{- $html_table | safeHTML -}} diff --git a/site/layouts/shortcodes/callout-deprecated-dark-variants.html b/site/layouts/shortcodes/callout-deprecated-dark-variants.html deleted file mode 100644 index e682a7fbeb7b..000000000000 --- a/site/layouts/shortcodes/callout-deprecated-dark-variants.html +++ /dev/null @@ -1,9 +0,0 @@ -{{- /* Outputs message about dark mode component variants being deprecated in v5.3. */ -}} - -{{- $component := .Get 0 -}} - -
    -

    - Heads up! Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of adding .{{ $component }}-dark, set data-bs-theme="dark" on the root element, a parent wrapper, or the component itself. -

    -
    diff --git a/site/layouts/shortcodes/callout.html b/site/layouts/shortcodes/callout.html deleted file mode 100644 index 86683ecf4c8c..000000000000 --- a/site/layouts/shortcodes/callout.html +++ /dev/null @@ -1,9 +0,0 @@ -{{- /* - Usage: `callout "type"`, where `type` is one of info (default), danger, or warning -*/ -}} - -{{- $css_class := .Get 0 | default "info" -}} - -
    -{{ .Inner | markdownify }} -
    diff --git a/site/layouts/shortcodes/deprecated-in.html b/site/layouts/shortcodes/deprecated-in.html deleted file mode 100644 index b353368dfb9b..000000000000 --- a/site/layouts/shortcodes/deprecated-in.html +++ /dev/null @@ -1,5 +0,0 @@ -{{- /* Outputs badge to identify the version something was deprecated */ -}} - -{{- $version := .Get 0 -}} - -Deprecated in v{{ $version }} diff --git a/site/layouts/shortcodes/docsref.html b/site/layouts/shortcodes/docsref.html deleted file mode 100644 index 06523d859d06..000000000000 --- a/site/layouts/shortcodes/docsref.html +++ /dev/null @@ -1,2 +0,0 @@ -{{- $pageToReference := path.Join "docs" $.Site.Params.docs_version (.Get 0) -}} -{{- relref . $pageToReference | relURL -}} diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html deleted file mode 100644 index 5b398e6814fc..000000000000 --- a/site/layouts/shortcodes/example.html +++ /dev/null @@ -1,49 +0,0 @@ -{{- /* - Usage: `example args` - - `args` are all optional and can be one of the following: - * id: the `div`'s id - default: "" - * class: any extra class(es) to be added to the `div` - default: "" - * lang: language used to display the code - default: "html" - * show_markup: if the markup should be output in the HTML - default: `true` - * show_preview: if the preview should be output in the HTML - default: `true` - * stackblitz_add_js: if extra JS snippet should be added to StackBlitz - default: `false` -*/ -}} - -{{- $id := .Get "id" -}} -{{- $class := .Get "class" -}} -{{- $lang := .Get "lang" | default "html" -}} -{{- $show_markup := .Get "show_markup" | default true -}} -{{- $show_preview := .Get "show_preview" | default true -}} -{{- $stackblitz_add_js := .Get "stackblitz_add_js" | default false -}} - -{{- $content := .Inner -}} - -
    - {{- if eq $show_preview true }} - - {{ $content }} -
    - {{- end }} - - {{- if eq $show_markup true -}} - {{- if eq $show_preview true -}} -
    - {{ $lang }} -
    - - -
    -
    - {{- end -}} - - {{- $content = replaceRE `` `...` $content -}} - {{- $content = replaceRE `` `...` $content -}} - {{- $content = replaceRE ` (class=" *?")` "" $content -}} - {{- highlight (trim $content "\n") $lang "" -}} - {{- end }} - diff --git a/site/layouts/shortcodes/js-dismiss.html b/site/layouts/shortcodes/js-dismiss.html deleted file mode 100644 index 3d0c27883fc0..000000000000 --- a/site/layouts/shortcodes/js-dismiss.html +++ /dev/null @@ -1,15 +0,0 @@ -{{- /* Usage: js-dismiss "ComponentName" */ -}} - -{{- $name := .Get 0 -}} - -Dismissal can be achieved with the `data-bs-dismiss` attribute on a button **within the {{ $name }}** as demonstrated below: - -```html - -``` - -or on a button **outside the {{ $name }}** using the additional `data-bs-target` as demonstrated below: - -```html - -``` diff --git a/site/layouts/shortcodes/js-docs.html b/site/layouts/shortcodes/js-docs.html deleted file mode 100644 index 8eed4a0eb18e..000000000000 --- a/site/layouts/shortcodes/js-docs.html +++ /dev/null @@ -1,70 +0,0 @@ -{{- /* - Usage: `js-docs name="name" file="file/_location.js` - - Prints everything between `// js-docs-start "name"` and `// js-docs-end "name"` - comments in the docs. -*/ -}} - -{{- $name := .Get "name" -}} -{{- $file := .Get "file" -}} - -{{- /* If any parameters are missing, print an error and exit */ -}} -{{- if or (not $name) (not $file) -}} - {{- errorf "%s: %q: Missing required parameters! Got: name=%q file=%q!" .Position .Name $name $file -}} -{{- else -}} - {{- $capture_start := printf "// js-docs-start %s\n" $name -}} - {{- $capture_end := printf "// js-docs-end %s\n" $name -}} - {{- $regex := printf `%s((?:.|\n)*)%s` $capture_start $capture_end -}} - {{- $regex_nested := printf `// js-docs-.*\n` -}} - - {{- $match := findRE $regex (readFile $file) -}} - {{- $match = index $match 0 -}} - - {{- if not $match -}} - {{- errorf "%s: %q: Got no matches for name=%q in file=%q!" .Position .Name $name $file -}} - {{- end -}} - - {{- $match = replace $match $capture_start "" -}} - {{- $match = replace $match $capture_end "" -}} - - {{- $match_nested := findRE $regex_nested $match -}} - {{- range $to_remove := $match_nested -}} - {{- $match = replace $match $to_remove "" -}} - {{- end -}} - -
    -
    - - {{- $file -}} - -
    - -
    -
    - - {{- $unindent := 0 -}} - {{- $found := false -}} - {{- $first_line:= index (split $match "\n") 0 -}} - {{- range $char := split $first_line "" -}} - {{- if and (eq $char " ") (not $found) -}} - {{- $unindent = add $unindent 1 -}} - {{- else -}} - {{- $found = true -}} - {{- end -}} - {{- end -}} - {{- $output := "" -}} - {{- if (gt $unindent 0) -}} - {{- $prefix := (strings.Repeat $unindent " ") -}} - {{- range $line := split $match "\n" -}} - {{- $line = strings.TrimPrefix $prefix $line -}} - {{ $output = printf "%s%s\n" $output $line }} - {{- end -}} - {{- $output = chomp $output -}} - {{- else -}} - {{- $output = $match -}} - {{- end -}} - {{- highlight $output "js" "" -}} -
    -{{- end -}} diff --git a/site/layouts/shortcodes/markdown.html b/site/layouts/shortcodes/markdown.html deleted file mode 100644 index 82107bcef9a2..000000000000 --- a/site/layouts/shortcodes/markdown.html +++ /dev/null @@ -1 +0,0 @@ -{{- .Inner | markdownify -}} diff --git a/site/layouts/shortcodes/param.html b/site/layouts/shortcodes/param.html deleted file mode 100644 index 34ad00c87a86..000000000000 --- a/site/layouts/shortcodes/param.html +++ /dev/null @@ -1,14 +0,0 @@ -{{- /* - Work around wrong escapes in integrity attributes. - Original: https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/shortcodes/param.html -*/ -}} - -{{- $name := .Get 0 -}} -{{- with $name -}} -{{- $value := $.Page.Param . -}} -{{- /* If any parameter ends with `_hash`, mark the string as safe HTML */ -}} -{{- if (strings.HasSuffix $name "_hash") -}} - {{- $value = $value | safeHTML -}} -{{- end -}} -{{- with $value }}{{ . }}{{ else }}{{ errorf "Param %q not found: %s" $name $.Position }}{{ end -}} -{{- else }}{{ errorf "Missing param key: %s" $.Position }}{{ end -}} diff --git a/site/layouts/shortcodes/partial.html b/site/layouts/shortcodes/partial.html deleted file mode 100644 index c9d3496de70b..000000000000 --- a/site/layouts/shortcodes/partial.html +++ /dev/null @@ -1 +0,0 @@ -{{ partial (.Get 0) . }} diff --git a/site/layouts/shortcodes/placeholder.html b/site/layouts/shortcodes/placeholder.html deleted file mode 100644 index 9cc63943547a..000000000000 --- a/site/layouts/shortcodes/placeholder.html +++ /dev/null @@ -1,44 +0,0 @@ -{{- /* - Usage: `placeholder args` - - `args` are all optional and can be one of the following: - * title: Used in the SVG `title` tag - default: "Placeholder" - * text: The text to show in the image - default: "width x height" - * class: Class to add to the `svg` or `img` - default: "bd-placeholder-img" - * color: The text color (foreground) - default: "#dee2e6" - * background: The background color - default: "#868e96" - * width: default: "100%" - * height: default: "180px" - * markup: If it should render `svg` or `img` tags - default: "svg" -*/ -}} - -{{- $grays := $.Site.Data.grays -}} -{{- $default_color := (index $grays 2).hex -}} -{{- $default_background := (index $grays 5).hex -}} - -{{- $title := .Get "title" | default "Placeholder" -}} -{{- $class := .Get "class" -}} -{{- $color := .Get "color" | default $default_color -}} -{{- $background := .Get "background" | default $default_background -}} -{{- $width := .Get "width" | default "100%" -}} -{{- $height := .Get "height" | default "180" -}} -{{- $text := .Get "text" | default (printf "%sx%s" $width $height) -}} - -{{- $show_title := not (eq $title "false") -}} -{{- $show_text := not (eq $text "false") -}} - -{{- $markup := .Get "markup" | default "svg" -}} - -{{- if eq $markup "img" -}} - {{ $title }} : {{ $text }} -{{- else -}} - -{{- end -}} diff --git a/site/layouts/shortcodes/scss-docs.html b/site/layouts/shortcodes/scss-docs.html deleted file mode 100644 index 6e7c129f4c29..000000000000 --- a/site/layouts/shortcodes/scss-docs.html +++ /dev/null @@ -1,82 +0,0 @@ -{{- /* - Usage: `scss-docs name="name" file="file/_location.scss"` - - Prints everything between `// scss-docs-start "name"` and `// scss-docs-end "name"` - comments in the docs. - - Optional parameters: - * strip-default: Remove the ` !default` flag from variable assignments - default: `true` -*/ -}} - -{{- $name := .Get "name" -}} -{{- $file := .Get "file" -}} -{{- $strip_default := .Get "strip-default" | default "true" -}} - -{{- /* If any parameters are missing, print an error and exit */ -}} -{{- if or (not $name) (not $file) -}} - {{- errorf "%s: %q: Missing required parameters! Got: name=%q file=%q!" .Position .Name $name $file -}} -{{- else -}} - {{- $capture_start := printf "// scss-docs-start %s\n" $name -}} - {{- $capture_end := printf "// scss-docs-end %s\n" $name -}} - {{- $regex := printf `%s((?:.|\n)*)%s` $capture_start $capture_end -}} - {{- $regex_nested := printf `// scss-docs-.*\n` -}} - - {{- /* - TODO: figure out why we can't do the following and get the first group (the only capturing one)... - $regex := printf `(?:// scss-docs-start %s\n)((?:.|\n)*)(?:\n// scss-docs-end %s)` $name $name - */ -}} - - {{- $match := findRE $regex (readFile $file) -}} - {{- $match = index $match 0 -}} - - {{- if not $match -}} - {{- errorf "%s: %q: Got no matches for name=%q in file=%q!" .Position .Name $name $file -}} - {{- end -}} - - {{- $match = replace $match $capture_start "" -}} - {{- $match = replace $match $capture_end "" -}} - - {{- $match_nested := findRE $regex_nested $match -}} - {{- range $to_remove := $match_nested -}} - {{- $match = replace $match $to_remove "" -}} - {{- end -}} - - {{- if (ne $strip_default "false") -}} - {{- $match = replace $match " !default" "" -}} - {{- end -}} - -
    -
    - - {{- $file -}} - -
    - -
    -
    - {{- $unindent := 0 -}} - {{- $found := false -}} - {{- $first_line:= index (split $match "\n") 0 -}} - {{- range $char := split $first_line "" -}} - {{- if and (eq $char " ") (not $found) -}} - {{- $unindent = add $unindent 1 -}} - {{- else -}} - {{- $found = true -}} - {{- end -}} - {{- end -}} - {{- $output := "" -}} - {{- if (gt $unindent 0) -}} - {{- $prefix := (strings.Repeat $unindent " ") -}} - {{- range $line := split $match "\n" -}} - {{- $line = strings.TrimPrefix $prefix $line -}} - {{ $output = printf "%s%s\n" $output $line }} - {{- end -}} - {{- $output = chomp $output -}} - {{- else -}} - {{- $output = $match -}} - {{- end -}} - {{- highlight $output "scss" "" -}} -
    -{{- end -}} diff --git a/site/layouts/shortcodes/table.html b/site/layouts/shortcodes/table.html deleted file mode 100644 index a98b5eb899e7..000000000000 --- a/site/layouts/shortcodes/table.html +++ /dev/null @@ -1,31 +0,0 @@ -{{- /* - Usage: `table [args]` - - `args` are optional and can be one of the following: - * class: any class(es) to be added to the `table` - default "" - * simplified: show a simplified version in the examples - default `true` -*/ -}} - -{{- $class := .Get "class" -}} -{{- $simplified := .Get "simplified" | default true -}} - -{{- $table_attributes := "" -}} -{{- $table_content := " ...\n" -}} - -{{- with $class -}} - {{- $table_attributes = printf ` class="%s"` . -}} -{{- end -}} - -{{- if eq $simplified "false" -}} - {{- $table_content = partialCached "table-content" . -}} -{{- end -}} - -{{- $table := printf "\n%s" $table_attributes $table_content -}} - -
    - - {{ partialCached "table-content" . }} - -
    - -{{- highlight $table "html" "" -}} diff --git a/site/layouts/shortcodes/year.html b/site/layouts/shortcodes/year.html deleted file mode 100644 index db7f18e3fcc7..000000000000 --- a/site/layouts/shortcodes/year.html +++ /dev/null @@ -1,3 +0,0 @@ -{{- /* Outputs the current year */ -}} - -{{- now.Format "2006" -}} diff --git a/site/postcss.config.cjs b/site/postcss.config.cjs new file mode 100644 index 000000000000..944b80abf432 --- /dev/null +++ b/site/postcss.config.cjs @@ -0,0 +1,3 @@ +module.exports = { + plugins: [require('autoprefixer')] +} diff --git a/site/assets/js/application.js b/site/src/assets/application.js similarity index 62% rename from site/assets/js/application.js rename to site/src/assets/application.js index afab46e53356..62f5f88b344f 100644 --- a/site/assets/js/application.js +++ b/site/src/assets/application.js @@ -9,12 +9,8 @@ * For details, see https://creativecommons.org/licenses/by/3.0/. */ -/* eslint-disable import/no-unresolved */ -import sidebarScroll from 'js/partials/sidebar.js' -import codeExamples from 'js/partials/code-examples.js' -import snippets from 'js/partials/snippets.js' -/* eslint-enable import/no-unresolved */ +import sidebarScroll from './partials/sidebar.js' +import snippets from './partials/snippets.js' sidebarScroll() -codeExamples() snippets() diff --git a/site/content/docs/5.3/examples/album-rtl/index.html b/site/src/assets/examples/album-rtl/index.astro similarity index 86% rename from site/content/docs/5.3/examples/album-rtl/index.html rename to site/src/assets/examples/album-rtl/index.astro index bae47373aaa8..d02e9f4044b5 100644 --- a/site/content/docs/5.3/examples/album-rtl/index.html +++ b/site/src/assets/examples/album-rtl/index.astro @@ -1,7 +1,9 @@ --- -layout: examples -title: مثال الألبوم -direction: rtl +import { getVersionedDocsPath } from '@libs/path' +import Placeholder from '@shortcodes/Placeholder.astro' + +export const title = 'مثال الألبوم' +export const direction = 'rtl' ---
    @@ -57,7 +59,7 @@

    مثال الألبوم

    - {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} +

    هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

    @@ -72,7 +74,7 @@

    مثال الألبوم

    - {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} +

    هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

    @@ -87,7 +89,7 @@

    مثال الألبوم

    - {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} +

    هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

    @@ -103,7 +105,7 @@

    مثال الألبوم

    - {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} +

    هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

    @@ -118,7 +120,7 @@

    مثال الألبوم

    - {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} +

    هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

    @@ -133,7 +135,7 @@

    مثال الألبوم

    - {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} +

    هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

    @@ -149,7 +151,7 @@

    مثال الألبوم

    - {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} +

    هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

    @@ -164,7 +166,7 @@

    مثال الألبوم

    - {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} +

    هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

    @@ -179,7 +181,7 @@

    مثال الألبوم

    - {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}} +

    هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.

    @@ -204,6 +206,6 @@

    مثال الألبوم

    عد إلى الأعلى

    مثال الألبوم هو © Bootstrap ، ولكن يرجى تنزيله وتخصيصه لنفسك!

    -

    جديد على Bootstrap؟ تفضل بزيارة الصفحة الرئيسية أو اقرأ }} "> دليل البدء .

    +

    جديد على Bootstrap؟ تفضل بزيارة الصفحة الرئيسية أو اقرأ دليل البدء .

    diff --git a/site/content/docs/5.3/examples/album/index.html b/site/src/assets/examples/album/index.astro similarity index 86% rename from site/content/docs/5.3/examples/album/index.html rename to site/src/assets/examples/album/index.astro index 1e5377dbf653..9b5279302a8e 100644 --- a/site/content/docs/5.3/examples/album/index.html +++ b/site/src/assets/examples/album/index.astro @@ -1,6 +1,8 @@ --- -layout: examples -title: Album example +import { getVersionedDocsPath } from '@libs/path' + +export const title = 'Album example' +import Placeholder from "@shortcodes/Placeholder.astro" ---
    @@ -56,7 +58,7 @@

    Album example

    - {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +

    This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

    @@ -71,7 +73,7 @@

    Album example

    - {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +

    This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

    @@ -86,7 +88,7 @@

    Album example

    - {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +

    This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

    @@ -102,7 +104,7 @@

    Album example

    - {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +

    This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

    @@ -117,7 +119,7 @@

    Album example

    - {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +

    This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

    @@ -132,7 +134,7 @@

    Album example

    - {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +

    This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

    @@ -148,7 +150,7 @@

    Album example

    - {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +

    This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

    @@ -163,7 +165,7 @@

    Album example

    - {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +

    This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

    @@ -178,7 +180,7 @@

    Album example

    - {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} +

    This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

    @@ -203,6 +205,6 @@

    Album example

    Back to top

    Album example is © Bootstrap, but please download and customize it for yourself!

    -

    New to Bootstrap? Visit the homepage or read our }}">getting started guide.

    +

    New to Bootstrap? Visit the homepage or read our getting started guide.

    diff --git a/site/content/docs/5.3/examples/badges/badges.css b/site/src/assets/examples/badges/badges.css similarity index 100% rename from site/content/docs/5.3/examples/badges/badges.css rename to site/src/assets/examples/badges/badges.css diff --git a/site/content/docs/5.3/examples/badges/index.html b/site/src/assets/examples/badges/index.astro similarity index 99% rename from site/content/docs/5.3/examples/badges/index.html rename to site/src/assets/examples/badges/index.astro index f0097e749734..7e778066d4a8 100644 --- a/site/content/docs/5.3/examples/badges/index.html +++ b/site/src/assets/examples/badges/index.astro @@ -1,9 +1,6 @@ --- -layout: examples -title: Badges -extra_css: - - "badges.css" -body_class: "" +export const title = 'Badges' +export const extra_css = ['badges.css'] --- diff --git a/site/content/docs/5.3/examples/blog-rtl/index.html b/site/src/assets/examples/blog-rtl/index.astro similarity index 96% rename from site/content/docs/5.3/examples/blog-rtl/index.html rename to site/src/assets/examples/blog-rtl/index.astro index 0151d7d30c40..69f1a9b99c8d 100644 --- a/site/content/docs/5.3/examples/blog-rtl/index.html +++ b/site/src/assets/examples/blog-rtl/index.astro @@ -1,10 +1,8 @@ --- -layout: examples -title: قالب المدونة -direction: rtl -extra_css: - - "https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap" - - "../blog/blog.rtl.css" +export const title = 'قالب المدونة' +export const direction = 'rtl' +export const extra_css = ['https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap', '../blog/blog.rtl.css'] +import Placeholder from "@shortcodes/Placeholder.astro" --- @@ -79,7 +77,7 @@

    مشاركة مميزة

    - {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}} +
    @@ -96,7 +94,7 @@

    عنوان الوظيفة

    - {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}} +
    @@ -189,7 +187,7 @@

    المشاركات الاخيرة

    @@ -95,7 +93,7 @@

    Post title

    - {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}} +
    @@ -241,7 +239,7 @@

    Recent posts

    - {{< /example >}} + `} /> - {{< example show_markup="false" >}} +
  • هذا عنصر في قائمة.
  • وهذا أيضًا.
  • لكنهم يظهرون متجاورين.
    • - {{< /example >}} + `} />

    الصور

    - }}">دليل الإستخدام + دليل الإستخدام
    - {{< example show_markup="false" >}} - {{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="صورة مستجيبة" >}} - {{< /example >}} + + `} /> - {{< example show_markup="false" >}} - {{< placeholder width="200" height="200" class="img-thumbnail" title="صورة عنصر نائب مربع عام مع حدود بيضاء حولها ، مما يجعلها تشبه صورة تم التقاطها بكاميرا فورية قديمة" >}} - {{< /example >}} + + `} />

    الجداول

    - }}">دليل الإستخدام + دليل الإستخدام
    - {{< example show_markup="false" >}} + @@ -208,9 +209,9 @@

    الجداول

    - {{< /example >}} + `} /> - {{< example show_markup="false" >}} + @@ -241,9 +242,9 @@

    الجداول

    - {{< /example >}} + `} /> - {{< example show_markup="false" >}} + @@ -257,21 +258,17 @@

    الجداول

    Default خلية خلية - - {{< table.inline >}} - {{- range (index $.Site.Data "theme-colors") }} - - {{ .name | title }} + `, + ...getData('theme-colors').map((themeColor) => ` + ${themeColor.title} خلية خلية - - {{- end -}} - {{< /table.inline >}} - + `), + ` - {{< /example >}} + `]} /> - {{< example show_markup="false" >}} + @@ -302,22 +299,22 @@

    الجداول

    - {{< /example >}} + `} />
    @@ -328,11 +325,11 @@

    النماذج

    @@ -480,17 +477,17 @@

    الأحجام

    - {{< /example >}} + `} />
    @@ -620,11 +617,11 @@

    العناصر

    - {{< /example >}} + `} />

    الإنذارات

    - }}">دليل الإستخدام + دليل الإستخدام
    - {{< example show_markup="false" >}} - {{< alerts.inline >}} - {{- range (index $.Site.Data "theme-colors") }} - + `)} /> - {{< example show_markup="false" >}} +

    أحسنت!

    لقد نجحت في قراءة رسالة التنبيه المهمة هذه. سيتم تشغيل نص المثال هذا لفترة أطول قليلاً حتى تتمكن من رؤية كيفية عمل التباعد داخل التنبيه مع هذا النوع من المحتوى.

    كلما احتجت إلى ذلك ، تأكد من استخدام أدوات الهامش للحفاظ على الأشياء لطيفة ومرتبة.

    - {{< /example >}} + `} />

    الشارة

    - }}">دليل الإستخدام + دليل الإستخدام
    - {{< example show_markup="false" >}} + مثال على عنوان جديد

    مثال على عنوان جديد

    مثال على عنوان جديد

    @@ -709,24 +703,21 @@

    الشارة

    مثال على عنوان جديد

    مثال على عنوان جديد

    مثال على عنوان جديد

    - {{< /example >}} + `} /> - {{< example show_markup="false" >}} - {{< badge.inline >}} - {{- range (index $.Site.Data "theme-colors") }} - {{ .name | title }}{{- end -}} - {{< /badge.inline >}} - {{< /example >}} + ` + ${themeColor.title} + `)} />

    الأزرار

    - }}">دليل الإستخدام + دليل الإستخدام
    - {{< example show_markup="false" >}} - {{< buttons.inline >}} - {{- range (index $.Site.Data "theme-colors") }} - - {{- end -}} - {{< /buttons.inline >}} - - - {{< /example >}} - - {{< example show_markup="false" >}} - {{< buttons.inline >}} - {{- range (index $.Site.Data "theme-colors") }} - - {{- end -}} - {{< /buttons.inline >}} - {{< /example >}} - - {{< example show_markup="false" >}} + ` + + `), + ``]} /> + + ` + + `)} /> + + زر صغير - {{< /example >}} + `} />

    البطاقة

    - }}">دليل الإستخدام + دليل الإستخدام
    - {{< example show_markup="false" >}} +
    - {{< placeholder width="100%" height="180" class="card-img-top" text="غطاء الصورة" >}} +
    عنوان البطاقة

    بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

    @@ -851,7 +834,7 @@
    عنوان البطاقة
    - {{< placeholder width="100%" height="250" text="صورة" >}} +
    @@ -864,17 +847,17 @@
    عنوان البطاقة
    - {{< /example >}} + `} />
    - {{< /example >}} + `} /> - {{< example show_markup="false" >}} +
    - {{< /example >}} + `} /> - {{< example show_markup="false" >}} +
    - {{< /example >}} + `} />

    مجموعة العناصر

    - }}">دليل الإستخدام + دليل الإستخدام
    - {{< example show_markup="false" >}} +
  • عنصر معطل
  • عنصر ثاني
    • @@ -1113,9 +1096,9 @@

    مجموعة العناصر

  • عنصر رابع
  • وعنصر خامس أيضًا
    • - {{< /example >}} + `} /> - {{< example show_markup="false" >}} +
  • عنصر
  • عنصر ثاني
    • @@ -1123,28 +1106,26 @@

    مجموعة العناصر

  • عنصر رابع
  • وعنصر خامس أيضًا
    • - {{< /example >}} + `} /> - {{< example show_markup="false" >}} + - عنصر مجموعة قائمة default بسيط - {{< list.inline >}} - {{- range (index $.Site.Data "theme-colors") }} - عنصر مجموعة قائمة {{ .name }} بسيط - {{- end -}} - {{< /list.inline >}} -
    - {{< /example >}} + عنصر مجموعة قائمة default بسيط`, + ...getData('theme-colors').map((themeColor) => ` + عنصر مجموعة قائمة ${themeColor.name} بسيط + `), + `
    + `]} />

    ترقيم الصفحات

    - }}">دليل الإستخدام + دليل الإستخدام
    - {{< example show_markup="false" >}} +
    • 1
      • @@ -1323,9 +1304,9 @@

      ترقيم الصفحات

    • 3
    - {{< /example >}} + `} /> - {{< example show_markup="false" >}} +
    • @@ -1343,9 +1324,9 @@

      ترقيم الصفحات

    - {{< /example >}} + `} /> - {{< example show_markup="false" >}} +
    • @@ -1361,23 +1342,23 @@

      ترقيم الصفحات

    - {{< /example >}} + `} />

    الصناديق المنبثقة

    - }}">دليل الإستخدام + دليل الإستخدام
    - {{< example show_markup="false" >}} + انقر لعرض/إخفاء الصندوق المنبثق - {{< /example >}} + `} /> - {{< example show_markup="false" >}} + انبثاق إلى الأعلى @@ -1390,17 +1371,17 @@

    الصناديق المنبثقة

    - {{< /example >}} + `} />

    شريط التقدم

    - }}">دليل الإستخدام + دليل الإستخدام
    - {{< example show_markup="false" >}} +
    0%
    @@ -1416,9 +1397,9 @@

    شريط التقدم

    100%
    - {{< /example >}} + `} /> - {{< example show_markup="false" >}} +
    @@ -1427,13 +1408,13 @@

    شريط التقدم

    - {{< /example >}} + `} />

    المخطوطة

    - }}">دليل الإستخدام + دليل الإستخدام
    @@ -1477,42 +1458,34 @@

    ثلاثة

    الدوائر المتحركة

    - }}">دليل الإستخدام + دليل الإستخدام
    - {{< example show_markup="false" >}} - {{< spinner.inline >}} - {{- range (index $.Site.Data "theme-colors") }} -

    الإشعارات

    - }}">دليل الإستخدام + دليل الإستخدام
    - {{< example show_markup="false" class="bg-dark p-5 align-items-center" >}} +
    - {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} + Bootstrap قبل 11 دقيقة @@ -1521,23 +1494,23 @@

    الإشعارات

    مرحبًا بالعالم! هذه رسالة إشعار.
    - {{< /example >}} + `} />

    التلميحات

    - }}">دليل الإستخدام + دليل الإستخدام
    - {{< example show_markup="false" class="tooltip-demo" >}} + تلميح يظهر في الأعلى - {{< /example >}} + `} />
    diff --git a/site/content/docs/5.3/examples/cheatsheet/cheatsheet.css b/site/src/assets/examples/cheatsheet/cheatsheet.css similarity index 100% rename from site/content/docs/5.3/examples/cheatsheet/cheatsheet.css rename to site/src/assets/examples/cheatsheet/cheatsheet.css diff --git a/site/content/docs/5.3/examples/cheatsheet/cheatsheet.js b/site/src/assets/examples/cheatsheet/cheatsheet.js similarity index 100% rename from site/content/docs/5.3/examples/cheatsheet/cheatsheet.js rename to site/src/assets/examples/cheatsheet/cheatsheet.js diff --git a/site/content/docs/5.3/examples/cheatsheet/cheatsheet.rtl.css b/site/src/assets/examples/cheatsheet/cheatsheet.rtl.css similarity index 100% rename from site/content/docs/5.3/examples/cheatsheet/cheatsheet.rtl.css rename to site/src/assets/examples/cheatsheet/cheatsheet.rtl.css diff --git a/site/content/docs/5.3/examples/cheatsheet/index.html b/site/src/assets/examples/cheatsheet/index.astro similarity index 67% rename from site/content/docs/5.3/examples/cheatsheet/index.html rename to site/src/assets/examples/cheatsheet/index.astro index cf0c3096a642..ae2752e0f71e 100644 --- a/site/content/docs/5.3/examples/cheatsheet/index.html +++ b/site/src/assets/examples/cheatsheet/index.astro @@ -1,21 +1,22 @@ --- -layout: examples -title: Cheatsheet -extra_css: - - "cheatsheet.css" -extra_js: - - src: "cheatsheet.js" - defer: true -body_class: "bg-body-tertiary" +import { getData } from '@libs/data' +import { getVersionedDocsPath } from '@libs/path' +import Example from '@shortcodes/Example.astro' +import Placeholder from '@shortcodes/Placeholder.astro' + +export const title = 'Cheatsheet' +export const extra_css = ['cheatsheet.css'] +export const extra_js = [{ src: 'cheatsheet.js' }] +export const body_class = 'bg-body-tertiary' ---

    - Bootstrap + Bootstrap Cheatsheet

    - }}" class="ms-auto link-light" hreflang="ar">RTL cheatsheet + RTL cheatsheet
    -
    - {{< /example >}} +
    `} /> - {{< example show_markup="false" >}} +
    @@ -479,17 +458,17 @@

    Sizing

    - {{< /example >}} + `} />

    Input group

    - }}">Documentation + Documentation
    - {{< example show_markup="false" >}} + @ @@ -512,17 +491,17 @@

    Input group

    With textarea
    - {{< /example >}} + `} />

    Floating labels

    - }}">Documentation + Documentation
    - {{< example show_markup="false" >}} +
    @@ -533,17 +512,17 @@

    Floating labels

    - {{< /example >}} + `} />

    Validation

    - }}">Documentation + Documentation
    - {{< example show_markup="false" >}} +
    @@ -608,7 +587,7 @@

    Validation

    - {{< /example >}} + `} />
    @@ -619,11 +598,11 @@

    Components

    - {{< /example >}} + `} />

    Alerts

    - }}">Documentation + Documentation
    - {{< example show_markup="false" >}} - {{< alerts.inline >}} - {{- range (index $.Site.Data "theme-colors") }} - + `)} /> - {{< example show_markup="false" >}} +

    Well done!

    Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

    Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

    - {{< /example >}} + `} />

    Badge

    - }}">Documentation + Documentation
    - {{< example show_markup="false" >}} + Example heading New

    Example heading New

    Example heading New

    @@ -708,24 +684,21 @@

    Badge

    Example heading New

    Example heading New

    Example heading New

    - {{< /example >}} + `} /> - {{< example show_markup="false" >}} - {{< badge.inline >}} - {{- range (index $.Site.Data "theme-colors") }} - {{ .name | title }}{{- end -}} - {{< /badge.inline >}} - {{< /example >}} + ` + ${themeColor.title} + `)} />

    Buttons

    - }}">Documentation + Documentation
    -
    - {{< example show_markup="false" >}} - {{< buttons.inline >}} - {{- range (index $.Site.Data "theme-colors") }} - - {{- end -}} - {{< /buttons.inline >}} - - - {{< /example >}} - - {{< example show_markup="false" >}} - {{< buttons.inline >}} - {{- range (index $.Site.Data "theme-colors") }} - - {{- end -}} - {{< /buttons.inline >}} - {{< /example >}} - - {{< example show_markup="false" >}} - - - - {{< /example >}} + ` + + `), + ``]} /> + + ` + + `)} /> + + Small button + + + `} />

    Button group

    - }}">Documentation + Documentation
    - {{< example show_markup="false" >}} +
    @@ -792,88 +756,88 @@

    Button group

    - {{< /example >}} + `} />

    Card

    - }}">Documentation + Documentation
    - {{< example show_markup="false" >}} -
    -
    -
    - {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}} -
    -
    Card title
    -

    Some quick example text to build on the card title and make up the bulk of the card's content.

    - Go somewhere + +
    +
    + +
    +
    Card title
    +

    Some quick example text to build on the card title and make up the bulk of the card's content.

    + Go somewhere +
    -
    -
    -
    -
    - Featured -
    -
    -
    Card title
    -

    Some quick example text to build on the card title and make up the bulk of the card's content.

    - Go somewhere -
    -
    - 2 days ago +
    +
    +
    + Featured +
    +
    +
    Card title
    +

    Some quick example text to build on the card title and make up the bulk of the card's content.

    + Go somewhere +
    +
    + 2 days ago +
    -
    -
    -
    -
    -
    Card title
    -

    Some quick example text to build on the card title and make up the bulk of the card's content.

    -
    -
      -
    • An item
      • -
    • A second item
      • -
    • A third item
      • -
    -
    - Card link - Another link +
    +
    +
    +
    Card title
    +

    Some quick example text to build on the card title and make up the bulk of the card's content.

    +
    +
      +
    • An item
      • +
    • A second item
      • +
    • A third item
      • +
    +
    + Card link + Another link +
    -
    -
    -
    -
    -
    - {{< placeholder width="100%" height="250" text="Image" >}} -
    -
    -
    -
    Card title
    -

    This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

    -

    Last updated 3 mins ago

    +
    +
    +
    +
    + +
    +
    +
    +
    Card title
    +

    This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

    +

    Last updated 3 mins ago

    +
    -
    - {{< /example >}} + `} />
    - {{< /example >}} + `} /> + + +
    + + +
    +
    + `} />

    List group

    - }}">Documentation + Documentation
    - {{< example show_markup="false" >}} +
  • A disabled item
  • A second item
    • @@ -1112,9 +1075,9 @@

    List group

  • A fourth item
  • And a fifth one
    • - {{< /example >}} + `} /> - {{< example show_markup="false" >}} +
  • An item
  • A second item
    • @@ -1122,28 +1085,26 @@

    List group

  • A fourth item
  • And a fifth one
    • - {{< /example >}} + `} /> - {{< example show_markup="false" >}} + - A simple default list group item - {{< list.inline >}} - {{- range (index $.Site.Data "theme-colors") }} - A simple {{ .name }} list group item - {{- end -}} - {{< /list.inline >}} -
    - {{< /example >}} + A simple default list group item`, + ...getData('theme-colors').map((themeColor) => ` + A simple ${themeColor.name} list group item + `), + `
    + `]} />

    Pagination

    - }}">Documentation + Documentation
    - {{< example show_markup="false" >}} +
    • 1
      • @@ -1322,9 +1282,9 @@

      Pagination

    • 3
    - {{< /example >}} + `} /> - {{< example show_markup="false" >}} +
    • @@ -1342,9 +1302,9 @@

      Pagination

    - {{< /example >}} + `} /> - {{< example show_markup="false" >}} +
    • @@ -1360,21 +1320,21 @@

      Pagination

    - {{< /example >}} + `} />

    Popovers

    - }}">Documentation + Documentation
    - {{< example show_markup="false" >}} + Click to toggle popover - {{< /example >}} + `} /> - {{< example show_markup="false" >}} + Popover on top @@ -1387,17 +1347,17 @@

    Popovers

    - {{< /example >}} + `} />

    Progress

    - }}">Documentation + Documentation
    - {{< example show_markup="false" >}} +
    0%
    @@ -1413,9 +1373,9 @@

    Progress

    100%
    - {{< /example >}} + `} /> - {{< example show_markup="false" >}} +
    @@ -1424,13 +1384,13 @@

    Progress

    - {{< /example >}} + `} />

    Scrollspy

    - }}">Documentation + Documentation
    @@ -1473,42 +1433,34 @@

    Fifth heading

    Spinners

    - }}">Documentation + Documentation
    - {{< example show_markup="false" >}} - {{< spinner.inline >}} - {{- range (index $.Site.Data "theme-colors") }} -

    Toasts

    - }}">Documentation + Documentation
    - {{< example show_markup="false" class="bg-dark p-5 align-items-center" >}} +
    - {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} + Bootstrap 11 mins ago @@ -1517,23 +1469,23 @@

    Toasts

    Hello, world! This is a toast message.
    - {{< /example >}} + `} />

    Tooltips

    - }}">Documentation + Documentation
    - {{< example show_markup="false" class="tooltip-demo" >}} + Tooltip on top - {{< /example >}} + `} />
    @@ -1608,3 +1560,4 @@

    Full screen modal<

    + diff --git a/site/content/docs/5.3/examples/checkout-rtl/index.html b/site/src/assets/examples/checkout-rtl/index.astro similarity index 95% rename from site/content/docs/5.3/examples/checkout-rtl/index.html rename to site/src/assets/examples/checkout-rtl/index.astro index 87f621e14e85..1b019357375d 100644 --- a/site/content/docs/5.3/examples/checkout-rtl/index.html +++ b/site/src/assets/examples/checkout-rtl/index.astro @@ -1,19 +1,17 @@ --- -layout: examples -title: مثال إتمام الشراء -direction: rtl -extra_css: - - "../checkout/checkout.css" -extra_js: - - src: "../checkout/checkout.js" - defer: true -body_class: "bg-body-tertiary" +import { getVersionedDocsPath } from '@libs/path' + +export const title = 'مثال إتمام الشراء' +export const direction = 'rtl' +export const extra_css = ['../checkout/checkout.css'] +export const extra_js = [{ src: '../checkout/checkout.js' }] +export const body_class = 'bg-body-tertiary' ---
    - +

    نموذج إتمام الشراء

    فيما يلي مثال على نموذج تم إنشاؤه بالكامل باستخدام عناصر تحكم النموذج في Bootstrap. لكل مجموعة نماذج مطلوبة حالة تحقق يمكن تشغيلها بمحاولة إرسال النموذج دون استكماله.

    @@ -223,7 +221,7 @@

    طريقة الدفع

    -

    © {{< year >}}-2017 اسم الشركة

    +

    © {new Date().getFullYear()}-2017 اسم الشركة

    • سياسة الخصوصية
    • اتفاقية الاستخدام
      • diff --git a/site/content/docs/5.3/examples/checkout/checkout.css b/site/src/assets/examples/checkout/checkout.css similarity index 100% rename from site/content/docs/5.3/examples/checkout/checkout.css rename to site/src/assets/examples/checkout/checkout.css diff --git a/site/content/docs/5.3/examples/checkout/checkout.js b/site/src/assets/examples/checkout/checkout.js similarity index 100% rename from site/content/docs/5.3/examples/checkout/checkout.js rename to site/src/assets/examples/checkout/checkout.js diff --git a/site/content/docs/5.3/examples/checkout/index.html b/site/src/assets/examples/checkout/index.astro similarity index 95% rename from site/content/docs/5.3/examples/checkout/index.html rename to site/src/assets/examples/checkout/index.astro index 8fe01f02ec15..029bc796bf85 100644 --- a/site/content/docs/5.3/examples/checkout/index.html +++ b/site/src/assets/examples/checkout/index.astro @@ -1,18 +1,16 @@ --- -layout: examples -title: Checkout example -extra_css: - - "checkout.css" -extra_js: - - src: "checkout.js" - defer: true -body_class: "bg-body-tertiary" +import { getVersionedDocsPath } from '@libs/path' + +export const title = 'Checkout example' +export const extra_css = ['checkout.css'] +export const extra_js = [{ src: 'checkout.js' }] +export const body_class = 'bg-body-tertiary' ---
      - +

      Checkout form

      Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.

      @@ -223,7 +221,7 @@

      Payment

      -

      © 2017–{{< year >}} Company Name

      +

      © 2017–{new Date().getFullYear()} Company Name

      • Privacy
      • Terms
        • diff --git a/site/content/docs/5.3/examples/cover/cover.css b/site/src/assets/examples/cover/cover.css similarity index 100% rename from site/content/docs/5.3/examples/cover/cover.css rename to site/src/assets/examples/cover/cover.css diff --git a/site/content/docs/5.3/examples/cover/index.html b/site/src/assets/examples/cover/index.astro similarity index 86% rename from site/content/docs/5.3/examples/cover/index.html rename to site/src/assets/examples/cover/index.astro index a5d2e40978c7..3af731501617 100644 --- a/site/content/docs/5.3/examples/cover/index.html +++ b/site/src/assets/examples/cover/index.astro @@ -1,10 +1,8 @@ --- -layout: examples -title: Cover Template -extra_css: - - "cover.css" -html_class: "h-100" -body_class: "d-flex h-100 text-center text-bg-dark" +export const title = 'Cover Template' +export const extra_css = ['cover.css'] +export const html_class = 'h-100' +export const body_class = 'd-flex h-100 text-center text-bg-dark' ---
        diff --git a/site/content/docs/5.3/examples/dashboard-rtl/dashboard.js b/site/src/assets/examples/dashboard-rtl/dashboard.js similarity index 100% rename from site/content/docs/5.3/examples/dashboard-rtl/dashboard.js rename to site/src/assets/examples/dashboard-rtl/dashboard.js diff --git a/site/content/docs/5.3/examples/dashboard-rtl/index.html b/site/src/assets/examples/dashboard-rtl/index.astro similarity index 98% rename from site/content/docs/5.3/examples/dashboard-rtl/index.html rename to site/src/assets/examples/dashboard-rtl/index.astro index c0894eed5f03..c5758e95c383 100644 --- a/site/content/docs/5.3/examples/dashboard-rtl/index.html +++ b/site/src/assets/examples/dashboard-rtl/index.astro @@ -1,15 +1,11 @@ --- -layout: examples -title: قالب لوحة القيادة -direction: rtl -extra_css: - - "../dashboard/dashboard.rtl.css" -extra_js: - - src: "https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js" - integrity: "sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp" - defer: true - - src: "dashboard.js" - defer: true +export const title = 'قالب لوحة القيادة' +export const direction = 'rtl' +export const extra_css = ['../dashboard/dashboard.rtl.css'] +export const extra_js = [ + { src: 'https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js', integrity: 'sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp'}, + { src: 'dashboard.js'} +] --- diff --git a/site/content/docs/5.3/examples/dashboard/dashboard.css b/site/src/assets/examples/dashboard/dashboard.css similarity index 100% rename from site/content/docs/5.3/examples/dashboard/dashboard.css rename to site/src/assets/examples/dashboard/dashboard.css diff --git a/site/content/docs/5.3/examples/dashboard/dashboard.js b/site/src/assets/examples/dashboard/dashboard.js similarity index 100% rename from site/content/docs/5.3/examples/dashboard/dashboard.js rename to site/src/assets/examples/dashboard/dashboard.js diff --git a/site/content/docs/5.3/examples/dashboard/dashboard.rtl.css b/site/src/assets/examples/dashboard/dashboard.rtl.css similarity index 100% rename from site/content/docs/5.3/examples/dashboard/dashboard.rtl.css rename to site/src/assets/examples/dashboard/dashboard.rtl.css diff --git a/site/content/docs/5.3/examples/dashboard/index.html b/site/src/assets/examples/dashboard/index.astro similarity index 98% rename from site/content/docs/5.3/examples/dashboard/index.html rename to site/src/assets/examples/dashboard/index.astro index d8f2b1978f2c..4d33c7fb83db 100644 --- a/site/content/docs/5.3/examples/dashboard/index.html +++ b/site/src/assets/examples/dashboard/index.astro @@ -1,14 +1,10 @@ --- -layout: examples -title: Dashboard Template -extra_css: - - "dashboard.css" -extra_js: - - src: "https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js" - integrity: "sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp" - defer: true - - src: "dashboard.js" - defer: true +export const title = 'Dashboard Template' +export const extra_css = ['dashboard.css'] +export const extra_js = [ + { src: 'https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js', integrity: 'sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp'}, + { src: 'dashboard.js'} +] --- diff --git a/site/content/docs/5.3/examples/dropdowns/dropdowns.css b/site/src/assets/examples/dropdowns/dropdowns.css similarity index 100% rename from site/content/docs/5.3/examples/dropdowns/dropdowns.css rename to site/src/assets/examples/dropdowns/dropdowns.css diff --git a/site/content/docs/5.3/examples/dropdowns/index.html b/site/src/assets/examples/dropdowns/index.astro similarity index 99% rename from site/content/docs/5.3/examples/dropdowns/index.html rename to site/src/assets/examples/dropdowns/index.astro index 230c42fb4c1a..812109e41688 100644 --- a/site/content/docs/5.3/examples/dropdowns/index.html +++ b/site/src/assets/examples/dropdowns/index.astro @@ -1,9 +1,6 @@ --- -layout: examples -title: Dropdowns -extra_css: - - "dropdowns.css" -body_class: "" +export const title = 'Dropdowns' +export const extra_css = ['dropdowns.css'] --- diff --git a/site/content/docs/5.3/examples/features/features.css b/site/src/assets/examples/features/features.css similarity index 100% rename from site/content/docs/5.3/examples/features/features.css rename to site/src/assets/examples/features/features.css diff --git a/site/content/docs/5.3/examples/features/index.html b/site/src/assets/examples/features/index.astro similarity index 99% rename from site/content/docs/5.3/examples/features/index.html rename to site/src/assets/examples/features/index.astro index f0f962d0833f..7a3a7640d6bc 100644 --- a/site/content/docs/5.3/examples/features/index.html +++ b/site/src/assets/examples/features/index.astro @@ -1,9 +1,6 @@ --- -layout: examples -title: Features -extra_css: - - "features.css" -body_class: "" +export const title = 'Features' +export const extra_css = ['features.css'] --- diff --git a/site/content/docs/5.3/examples/features/unsplash-photo-1.jpg b/site/src/assets/examples/features/unsplash-photo-1.jpg similarity index 100% rename from site/content/docs/5.3/examples/features/unsplash-photo-1.jpg rename to site/src/assets/examples/features/unsplash-photo-1.jpg diff --git a/site/content/docs/5.3/examples/features/unsplash-photo-2.jpg b/site/src/assets/examples/features/unsplash-photo-2.jpg similarity index 100% rename from site/content/docs/5.3/examples/features/unsplash-photo-2.jpg rename to site/src/assets/examples/features/unsplash-photo-2.jpg diff --git a/site/content/docs/5.3/examples/features/unsplash-photo-3.jpg b/site/src/assets/examples/features/unsplash-photo-3.jpg similarity index 100% rename from site/content/docs/5.3/examples/features/unsplash-photo-3.jpg rename to site/src/assets/examples/features/unsplash-photo-3.jpg diff --git a/site/content/docs/5.3/examples/footers/index.html b/site/src/assets/examples/footers/index.astro similarity index 95% rename from site/content/docs/5.3/examples/footers/index.html rename to site/src/assets/examples/footers/index.astro index 88670ff87bc3..9aaaa9f6884e 100644 --- a/site/content/docs/5.3/examples/footers/index.html +++ b/site/src/assets/examples/footers/index.astro @@ -1,7 +1,5 @@ --- -layout: examples -title: Footers -body_class: "" +export const title = 'Footers' --- @@ -19,7 +17,7 @@
        -

        © {{< year >}} Company, Inc

        +

        © {new Date().getFullYear()} Company, Inc

        @@ -43,7 +41,7 @@ - © {{< year >}} Company, Inc + © {new Date().getFullYear()} Company, Inc
        -

        © {{< year >}} Company, Inc

        +

        © {new Date().getFullYear()} Company, Inc

      @@ -76,7 +74,7 @@ -

      © {{< year >}}

      +

      © {new Date().getFullYear()}

    @@ -171,7 +169,7 @@
    Subscribe to our newsletter
    -

    © {{< year >}} Company, Inc. All rights reserved.

    +

    © {new Date().getFullYear()} Company, Inc. All rights reserved.

      • diff --git a/site/content/docs/5.3/examples/grid/grid.css b/site/src/assets/examples/grid/grid.css similarity index 100% rename from site/content/docs/5.3/examples/grid/grid.css rename to site/src/assets/examples/grid/grid.css diff --git a/site/content/docs/5.3/examples/grid/index.html b/site/src/assets/examples/grid/index.astro similarity index 98% rename from site/content/docs/5.3/examples/grid/index.html rename to site/src/assets/examples/grid/index.astro index 8a61582028a6..2c01d8de9dbf 100644 --- a/site/content/docs/5.3/examples/grid/index.html +++ b/site/src/assets/examples/grid/index.astro @@ -1,9 +1,7 @@ --- -layout: examples -title: Grid Template -extra_css: - - "grid.css" -body_class: "py-4" +export const title = 'Grid Template' +export const extra_css = ['grid.css'] +export const body_class = 'py-4' ---
      diff --git a/site/content/docs/5.3/examples/headers/headers.css b/site/src/assets/examples/headers/headers.css similarity index 100% rename from site/content/docs/5.3/examples/headers/headers.css rename to site/src/assets/examples/headers/headers.css diff --git a/site/content/docs/5.3/examples/headers/index.html b/site/src/assets/examples/headers/index.astro similarity index 99% rename from site/content/docs/5.3/examples/headers/index.html rename to site/src/assets/examples/headers/index.astro index 5ccc273e4949..a233ae9039e6 100644 --- a/site/content/docs/5.3/examples/headers/index.html +++ b/site/src/assets/examples/headers/index.astro @@ -1,9 +1,6 @@ --- -layout: examples -title: Headers -extra_css: - - "headers.css" -body_class: "" +export const title = 'Headers' +export const extra_css = ['headers.css'] --- diff --git a/site/content/docs/5.3/examples/heroes/bootstrap-docs.png b/site/src/assets/examples/heroes/bootstrap-docs.png similarity index 100% rename from site/content/docs/5.3/examples/heroes/bootstrap-docs.png rename to site/src/assets/examples/heroes/bootstrap-docs.png diff --git a/site/content/docs/5.3/examples/heroes/bootstrap-themes.png b/site/src/assets/examples/heroes/bootstrap-themes.png similarity index 100% rename from site/content/docs/5.3/examples/heroes/bootstrap-themes.png rename to site/src/assets/examples/heroes/bootstrap-themes.png diff --git a/site/content/docs/5.3/examples/heroes/heroes.css b/site/src/assets/examples/heroes/heroes.css similarity index 100% rename from site/content/docs/5.3/examples/heroes/heroes.css rename to site/src/assets/examples/heroes/heroes.css diff --git a/site/content/docs/5.3/examples/heroes/index.html b/site/src/assets/examples/heroes/index.astro similarity index 96% rename from site/content/docs/5.3/examples/heroes/index.html rename to site/src/assets/examples/heroes/index.astro index 7f5daa9b9099..853776e7bc90 100644 --- a/site/content/docs/5.3/examples/heroes/index.html +++ b/site/src/assets/examples/heroes/index.astro @@ -1,16 +1,15 @@ --- -layout: examples -title: Heroes -extra_css: - - "heroes.css" -body_class: "" +import { getVersionedDocsPath } from '@libs/path' + +export const title = 'Heroes' +export const extra_css = ['heroes.css'] ---

      Heroes examples

      - +

      Centered hero

      Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

      diff --git a/site/content/docs/5.3/examples/jumbotron/index.html b/site/src/assets/examples/jumbotron/index.astro similarity index 97% rename from site/content/docs/5.3/examples/jumbotron/index.html rename to site/src/assets/examples/jumbotron/index.astro index 049684df68b7..6874af1ca363 100644 --- a/site/content/docs/5.3/examples/jumbotron/index.html +++ b/site/src/assets/examples/jumbotron/index.astro @@ -1,6 +1,5 @@ --- -layout: examples -title: Jumbotron example +export const title = 'Jumbotron example' ---
      @@ -38,7 +37,7 @@

      Add borders

      - © {{< year >}} + © {new Date().getFullYear()}
      diff --git a/site/content/docs/5.3/examples/jumbotrons/index.html b/site/src/assets/examples/jumbotrons/index.astro similarity index 98% rename from site/content/docs/5.3/examples/jumbotrons/index.html rename to site/src/assets/examples/jumbotrons/index.astro index 92994b797c6a..587e793024c3 100644 --- a/site/content/docs/5.3/examples/jumbotrons/index.html +++ b/site/src/assets/examples/jumbotrons/index.astro @@ -1,9 +1,6 @@ --- -layout: examples -title: Jumbotrons -extra_css: - - "jumbotrons.css" -body_class: "" +export const title = 'Jumbotrons' +export const extra_css = ['jumbotrons.css'] --- diff --git a/site/content/docs/5.3/examples/jumbotrons/jumbotrons.css b/site/src/assets/examples/jumbotrons/jumbotrons.css similarity index 100% rename from site/content/docs/5.3/examples/jumbotrons/jumbotrons.css rename to site/src/assets/examples/jumbotrons/jumbotrons.css diff --git a/site/content/docs/5.3/examples/list-groups/index.html b/site/src/assets/examples/list-groups/index.astro similarity index 99% rename from site/content/docs/5.3/examples/list-groups/index.html rename to site/src/assets/examples/list-groups/index.astro index aee155ec9164..220678f07ef4 100644 --- a/site/content/docs/5.3/examples/list-groups/index.html +++ b/site/src/assets/examples/list-groups/index.astro @@ -1,9 +1,6 @@ --- -layout: examples -title: List groups -extra_css: - - "list-groups.css" -body_class: "" +export const title = 'List groups' +export const extra_css = ['list-groups.css'] --- diff --git a/site/content/docs/5.3/examples/list-groups/list-groups.css b/site/src/assets/examples/list-groups/list-groups.css similarity index 100% rename from site/content/docs/5.3/examples/list-groups/list-groups.css rename to site/src/assets/examples/list-groups/list-groups.css diff --git a/site/content/docs/5.3/examples/masonry/index.html b/site/src/assets/examples/masonry/index.astro similarity index 83% rename from site/content/docs/5.3/examples/masonry/index.html rename to site/src/assets/examples/masonry/index.astro index c554deb4865f..58aea3f14f76 100644 --- a/site/content/docs/5.3/examples/masonry/index.html +++ b/site/src/assets/examples/masonry/index.astro @@ -1,10 +1,11 @@ --- -layout: examples -title: Masonry example -extra_js: - - src: "https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" - integrity: "sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" - async: true +export const title = 'Masonry example' +export const extra_js = [{ + src: 'https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js', + integrity: 'sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D', + async: true +}] +import Placeholder from "@shortcodes/Placeholder.astro" ---
      @@ -17,14 +18,14 @@

      Bootstrap and Masonry

      <script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script> -

      By adding data-masonry='{"percentPosition": true }' to the .row wrapper, we can combine the powers of Bootstrap's responsive grid and Masonry's positioning.

      +

      By adding data-masonry='}"percentPosition": true }' to the .row wrapper, we can combine the powers of Bootstrap's responsive grid and Masonry's positioning.

      - {{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}} +
      Card title that wraps to a new line

      This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

      @@ -45,7 +46,7 @@
      Card title that wraps to a new line
      - {{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}} +
      Card title

      This card has supporting text below as a natural lead-in to additional content.

      @@ -76,7 +77,7 @@
      Card title
      - {{< placeholder width="100%" height="260" class="card-img" text="Card image" >}} +
      diff --git a/site/content/docs/5.3/examples/modals/index.html b/site/src/assets/examples/modals/index.astro similarity index 99% rename from site/content/docs/5.3/examples/modals/index.html rename to site/src/assets/examples/modals/index.astro index a79c1e07eae7..9514f6f1fb0b 100644 --- a/site/content/docs/5.3/examples/modals/index.html +++ b/site/src/assets/examples/modals/index.astro @@ -1,9 +1,6 @@ --- -layout: examples -title: Modals -extra_css: - - "modals.css" -body_class: "" +export const title = 'Modals' +export const extra_css = ['modals.css'] --- diff --git a/site/content/docs/5.3/examples/modals/modals.css b/site/src/assets/examples/modals/modals.css similarity index 99% rename from site/content/docs/5.3/examples/modals/modals.css rename to site/src/assets/examples/modals/modals.css index 924952ae37d6..194e16aca6eb 100644 --- a/site/content/docs/5.3/examples/modals/modals.css +++ b/site/src/assets/examples/modals/modals.css @@ -5,4 +5,3 @@ .modal-sheet .modal-footer { padding-bottom: 2rem; } - diff --git a/site/content/docs/5.3/examples/navbar-bottom/index.html b/site/src/assets/examples/navbar-bottom/index.astro similarity index 87% rename from site/content/docs/5.3/examples/navbar-bottom/index.html rename to site/src/assets/examples/navbar-bottom/index.astro index 123cd0bf35cd..35aa348c69b2 100644 --- a/site/content/docs/5.3/examples/navbar-bottom/index.html +++ b/site/src/assets/examples/navbar-bottom/index.astro @@ -1,13 +1,14 @@ --- -layout: examples -title: Bottom navbar example +import { getVersionedDocsPath } from '@libs/path' + +export const title = 'Bottom navbar example' ---

      Bottom Navbar example

      This example is a quick exercise to illustrate how the bottom navbar works.

      - }}" role="button">View navbar docs » + View navbar docs »
      - Created by the Bootstrap team · © {{< year >}} + Created by the Bootstrap team · © {new Date().getFullYear()}
      diff --git a/site/content/docs/5.3/examples/sticky-footer-navbar/index.html b/site/src/assets/examples/sticky-footer-navbar/index.astro similarity index 83% rename from site/content/docs/5.3/examples/sticky-footer-navbar/index.html rename to site/src/assets/examples/sticky-footer-navbar/index.astro index 36bbff50e866..9b9b5ebb9893 100644 --- a/site/content/docs/5.3/examples/sticky-footer-navbar/index.html +++ b/site/src/assets/examples/sticky-footer-navbar/index.astro @@ -1,10 +1,10 @@ --- -layout: examples -title: Sticky Footer Navbar Template -extra_css: - - "sticky-footer-navbar.css" -html_class: "h-100" -body_class: "d-flex flex-column h-100" +import { getVersionedDocsPath } from '@libs/path' + +export const title = 'Sticky Footer Navbar Template' +export const extra_css = ['sticky-footer-navbar.css'] +export const html_class = 'h-100' +export const body_class = 'd-flex flex-column h-100' ---
      @@ -41,7 +41,7 @@

      Sticky footer with fixed navbar

      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 padding-top: 60px; on the main > .container.

      -

      Back to }}">the default sticky footer minus the navbar.

      +

      Back to the default sticky footer minus the navbar.

      diff --git a/site/content/docs/5.3/examples/sticky-footer-navbar/sticky-footer-navbar.css b/site/src/assets/examples/sticky-footer-navbar/sticky-footer-navbar.css similarity index 100% rename from site/content/docs/5.3/examples/sticky-footer-navbar/sticky-footer-navbar.css rename to site/src/assets/examples/sticky-footer-navbar/sticky-footer-navbar.css diff --git a/site/content/docs/5.3/examples/sticky-footer/index.html b/site/src/assets/examples/sticky-footer/index.astro similarity index 54% rename from site/content/docs/5.3/examples/sticky-footer/index.html rename to site/src/assets/examples/sticky-footer/index.astro index 631addabe433..b436ad0c4d9a 100644 --- a/site/content/docs/5.3/examples/sticky-footer/index.html +++ b/site/src/assets/examples/sticky-footer/index.astro @@ -1,10 +1,10 @@ --- -layout: examples -title: Sticky Footer Template -extra_css: - - "sticky-footer.css" -html_class: "h-100" -body_class: "d-flex flex-column h-100" +import { getVersionedDocsPath } from '@libs/path' + +export const title = 'Sticky Footer Template' +export const extra_css = ['sticky-footer.css'] +export const html_class = 'h-100' +export const body_class = 'd-flex flex-column h-100' --- @@ -12,7 +12,7 @@

      Sticky footer

      Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.

      -

      Use }}">the sticky footer with a fixed navbar if need be, too.

      +

      Use the sticky footer with a fixed navbar if need be, too.

      diff --git a/site/content/docs/5.3/examples/sticky-footer/sticky-footer.css b/site/src/assets/examples/sticky-footer/sticky-footer.css similarity index 100% rename from site/content/docs/5.3/examples/sticky-footer/sticky-footer.css rename to site/src/assets/examples/sticky-footer/sticky-footer.css diff --git a/site/assets/js/partials/sidebar.js b/site/src/assets/partials/sidebar.js similarity index 100% rename from site/assets/js/partials/sidebar.js rename to site/src/assets/partials/sidebar.js diff --git a/site/assets/js/partials/snippets.js b/site/src/assets/partials/snippets.js similarity index 100% rename from site/assets/js/partials/snippets.js rename to site/src/assets/partials/snippets.js diff --git a/site/assets/js/search.js b/site/src/assets/search.js similarity index 84% rename from site/assets/js/search.js rename to site/src/assets/search.js index b2bd660a4cf7..1077babdb376 100644 --- a/site/assets/js/search.js +++ b/site/src/assets/search.js @@ -10,11 +10,15 @@ */ import docsearch from '@docsearch/js' -// https://gohugo.io/hugo-pipes/js/#options -// eslint-disable-next-line import/no-unresolved -import { appId, apiKey, indexName } from '@params'; (() => { + // These values will be replaced by Astro's Vite plugin + const CONFIG = { + apiKey: '__API_KEY__', + indexName: '__INDEX_NAME__', + appId: '__APP_ID__' + } + const searchElement = document.getElementById('docsearch') if (!searchElement) { @@ -24,9 +28,9 @@ import { appId, apiKey, indexName } from '@params'; const siteDocsVersion = searchElement.getAttribute('data-bd-docs-version') docsearch({ - apiKey, - indexName, - appId, + apiKey: CONFIG.apiKey, + indexName: CONFIG.indexName, + appId: CONFIG.appId, container: searchElement, searchParameters: { facetFilters: [`version:${siteDocsVersion}`] diff --git a/site/assets/js/snippets.js b/site/src/assets/snippets.js similarity index 100% rename from site/assets/js/snippets.js rename to site/src/assets/snippets.js diff --git a/site/assets/js/stackblitz.js b/site/src/assets/stackblitz.js similarity index 64% rename from site/assets/js/stackblitz.js rename to site/src/assets/stackblitz.js index 35bd39df3386..0b450a7d4dc3 100644 --- a/site/assets/js/stackblitz.js +++ b/site/src/assets/stackblitz.js @@ -12,10 +12,15 @@ */ import sdk from '@stackblitz/sdk' -// https://gohugo.io/hugo-pipes/js/#options -import { - cssCdn, docsVersion, jsBundleCdn, jsSnippetFile -} from '@params' // eslint-disable-line import/no-unresolved +// eslint-disable-next-line import/no-unresolved +import snippetsContent from './partials/snippets.js?raw' + +// These values will be replaced by Astro's Vite plugin +const CONFIG = { + cssCdn: '__CSS_CDN__', + jsBundleCdn: '__JS_BUNDLE_CDN__', + docsVersion: '__DOCS_VERSION__' +} // Open in StackBlitz logic document.querySelectorAll('.btn-edit').forEach(btn => { @@ -38,23 +43,41 @@ const openBootstrapSnippet = (htmlSnippet, jsSnippet, classes) => { - - + + Bootstrap Example - <${'script'} defer src="${jsBundleCdn}"> + ${htmlSnippet.trimStart().replace(/^/gm, ' ').replace(/^ {4}$/gm, '').trimEnd()} - -` +` + + // Modify the snippets content to convert export default to a variable and invoke it + let modifiedSnippetsContent = '' + + if (jsSnippet) { + // Replace export default with a variable assignment + modifiedSnippetsContent = snippetsContent.replace( + 'export default () => {', + 'const snippets_default = () => {' + ) + + // Add IIFE wrapper and execution + modifiedSnippetsContent = `(() => { + ${modifiedSnippetsContent} + + // + snippets_default(); +})();` + } const project = { files: { 'index.html': indexHtml, - ...(jsSnippet && { 'index.js': jsSnippetFile }) + ...(jsSnippet && { 'index.js': modifiedSnippetsContent }) }, title: 'Bootstrap Example', description: `Official example from ${window.location.href}`, diff --git a/site/src/components/Ads.astro b/site/src/components/Ads.astro new file mode 100644 index 000000000000..2a53c0a615f5 --- /dev/null +++ b/site/src/components/Ads.astro @@ -0,0 +1,9 @@ +--- +--- + + diff --git a/site/src/components/DocsSidebar.astro b/site/src/components/DocsSidebar.astro new file mode 100644 index 000000000000..1282ed7026e1 --- /dev/null +++ b/site/src/components/DocsSidebar.astro @@ -0,0 +1,84 @@ +--- +import { getData } from '@libs/data' +import { getConfig } from '@libs/config' +import { docsPages } from '@libs/content' +import { getSlug } from '@libs/utils' + +const sidebar = getData('sidebar') +--- + + diff --git a/site/src/components/Scripts.astro b/site/src/components/Scripts.astro new file mode 100644 index 000000000000..b17057d20a45 --- /dev/null +++ b/site/src/components/Scripts.astro @@ -0,0 +1,17 @@ +--- +import { getVersionedBsJsProps } from '@libs/bootstrap' +import type { Layout } from '@libs/layout' + +interface Props { + layout: Layout +} + +const { layout } = Astro.props +--- + + + + + + +{layout === 'docs' && diff --git a/site/src/components/head/Favicons.astro b/site/src/components/head/Favicons.astro new file mode 100644 index 000000000000..9c462c90bc77 --- /dev/null +++ b/site/src/components/head/Favicons.astro @@ -0,0 +1,11 @@ +--- +import { getVersionedDocsPath } from '@libs/path' +--- + + + + + + + + diff --git a/site/src/components/head/Head.astro b/site/src/components/head/Head.astro new file mode 100644 index 000000000000..434ba8359c46 --- /dev/null +++ b/site/src/components/head/Head.astro @@ -0,0 +1,54 @@ +--- +import { getConfig } from '@libs/config' +import { getVersionedDocsPath } from '@libs/path' +import type { Layout } from '@libs/layout' +import Stylesheet from '@components/head/Stylesheet.astro' +import Favicons from '@components/head/Favicons.astro' +import Social from '@components/head/Social.astro' +import Analytics from '@components/head/Analytics.astro' +import Scss from '@components/head/Scss.astro' + +interface Props { + description: string + direction?: 'rtl' + layout: Layout + robots: string | undefined + thumbnail: string + title: string +} + +const { description, direction, layout, robots, thumbnail, title } = Astro.props + +const canonicalUrl = new URL(Astro.url.pathname, Astro.site) + +const isHome = Astro.url.pathname === '/' +const pageTitle = isHome + ? `${getConfig().title} · ${getConfig().subtitle}` + : `${title} · ${getConfig().title} v${getConfig().docs_version}` +--- + + + + + + + + + + + + + + + +{pageTitle} + +{robots && } + + + + + + + + diff --git a/site/src/components/head/Scss.astro b/site/src/components/head/Scss.astro new file mode 100644 index 000000000000..fc10fe75ab8a --- /dev/null +++ b/site/src/components/head/Scss.astro @@ -0,0 +1,7 @@ +--- +--- + + diff --git a/site/src/components/head/Social.astro b/site/src/components/head/Social.astro new file mode 100644 index 000000000000..2e423c7bb317 --- /dev/null +++ b/site/src/components/head/Social.astro @@ -0,0 +1,34 @@ +--- +import { getConfig } from '@libs/config' +import { getVersionedDocsPath } from '@libs/path' +import { getStaticImageSize } from '@libs/image' +import type { Layout } from '@libs/layout' + +interface Props { + description: string + layout: Layout + thumbnail: string + title: string +} + +const { description, layout, thumbnail, title } = Astro.props + +const socialImageUrl = new URL(getVersionedDocsPath(`assets/${thumbnail}`), Astro.site) +const socialImageSize = getStaticImageSize(`/docs/[version]/assets/${thumbnail}`) +--- + + + + + + + + + + + + + + + + diff --git a/site/src/components/head/Stylesheet.astro b/site/src/components/head/Stylesheet.astro new file mode 100644 index 000000000000..d0203893a478 --- /dev/null +++ b/site/src/components/head/Stylesheet.astro @@ -0,0 +1,13 @@ +--- +import { getVersionedBsCssProps } from '@libs/bootstrap' +import type { Layout } from '@libs/layout' + +interface Props { + direction?: 'rtl' + layout: Layout +} + +const { direction } = Astro.props +--- + + diff --git a/site/src/components/header/Header.astro b/site/src/components/header/Header.astro new file mode 100644 index 000000000000..e68b160a198b --- /dev/null +++ b/site/src/components/header/Header.astro @@ -0,0 +1,20 @@ +--- +import type { CollectionEntry } from 'astro:content' +import type { Layout } from '@libs/layout' +import Skippy from '@components/header/Skippy.astro' +import Symbols from '@components/icons/Symbols.astro' +import Navigation from '@components/header/Navigation.astro' + +interface Props { + addedIn?: CollectionEntry<'docs'>['data']['added'] + layout: Layout + title: string +} + +const { addedIn, layout, title } = Astro.props +--- + + + + + diff --git a/site/src/components/header/LinkItem.astro b/site/src/components/header/LinkItem.astro new file mode 100644 index 000000000000..0b3f42f50e01 --- /dev/null +++ b/site/src/components/header/LinkItem.astro @@ -0,0 +1,24 @@ +--- +interface Props { + active?: boolean + class?: string + href: string + rel?: HTMLAnchorElement['rel'] + target?: HTMLAnchorElement['target'] + track?: boolean +} + +const { active, class: className, track, ...props } = Astro.props + +const content = await Astro.slots.render('default') +--- + +
    • + + + +
      • diff --git a/site/src/components/header/Navigation.astro b/site/src/components/header/Navigation.astro new file mode 100644 index 000000000000..4e55d54ff82f --- /dev/null +++ b/site/src/components/header/Navigation.astro @@ -0,0 +1,131 @@ +--- +import type { CollectionEntry } from 'astro:content' +import { getConfig } from '@libs/config' +import { getVersionedDocsPath } from '@libs/path' +import type { Layout } from '@libs/layout' +import BootstrapWhiteFillIcon from '@components/icons/BootstrapWhiteFillIcon.astro' +import GitHubIcon from '@components/icons/GitHubIcon.astro' +import HamburgerIcon from '@components/icons/HamburgerIcon.astro' +import LinkItem from '@components/header/LinkItem.astro' +import OpenCollectiveIcon from '@components/icons/OpenCollectiveIcon.astro' +import XIcon from '@components/icons/XIcon.astro' +import Versions from '@components/header/Versions.astro' +import ThemeToggler from '@layouts/partials/ThemeToggler.astro' + +interface Props { + addedIn?: CollectionEntry<'docs'>['data']['added'] + layout: Layout + title: string +} + +const { addedIn, layout, title } = Astro.props +--- + +
      + +
      diff --git a/site/src/components/header/Skippy.astro b/site/src/components/header/Skippy.astro new file mode 100644 index 000000000000..aa5ba1dbde1b --- /dev/null +++ b/site/src/components/header/Skippy.astro @@ -0,0 +1,22 @@ +--- +import type { Layout } from '@libs/layout' + +interface Props { + layout: Layout +} + +const { layout } = Astro.props +--- + +
      +
      + Skip to main content + { + layout === 'docs' && ( + + Skip to docs navigation + + ) + } +
      +
      diff --git a/site/src/components/header/Versions.astro b/site/src/components/header/Versions.astro new file mode 100644 index 000000000000..a1119e0a322d --- /dev/null +++ b/site/src/components/header/Versions.astro @@ -0,0 +1,96 @@ +--- +import type { CollectionEntry } from 'astro:content' +import { getConfig } from '@libs/config' +import type { Layout } from '@libs/layout' +import { getVersionedDocsPath } from '@libs/path' + +interface Props { + addedIn?: CollectionEntry<'docs'>['data']['added'] + layout: Layout +} + +const { addedIn, layout } = Astro.props +const { slug, version } = Astro.params + +const isHome = Astro.url.pathname === '/' + +let versionsLink = '' + +if (layout === 'docs' && version === getConfig().docs_version) { + versionsLink = `${slug}/` +} else if (layout === 'single' && Astro.url.pathname.startsWith(getVersionedDocsPath(''))) { + versionsLink = Astro.url.pathname.replace(getVersionedDocsPath(''), '') +} + +const addedIn51 = addedIn?.version === '5.1' +const addedIn52 = addedIn?.version === '5.2' +const addedIn53 = addedIn?.version === '5.3' +--- + +
    • + + +
      • diff --git a/site/layouts/partials/home/css-variables.html b/site/src/components/home/CSSVariables.astro similarity index 53% rename from site/layouts/partials/home/css-variables.html rename to site/src/components/home/CSSVariables.astro index dd59167fa629..92dad9dd2efb 100644 --- a/site/layouts/partials/home/css-variables.html +++ b/site/src/components/home/CSSVariables.astro @@ -1,3 +1,8 @@ +--- +import { getVersionedDocsPath } from '@libs/path' +import Code from '@shortcodes/Code.astro' +--- +
      @@ -5,10 +10,14 @@

      Build and extend in real-time with CSS variables

      - Bootstrap 5 is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities. We provide dozens of variables for colors, font styles, and more at a :root level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily be modified. + Bootstrap 5 is evolving with each release to better utilize CSS variables for global theme styles, individual + components, and even utilities. We provide dozens of variables for colors, font styles, and more at a :root level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily + be modified.

      - + Learn more about CSS variables @@ -17,8 +26,14 @@

      Build and extend in real-time with

      Using CSS variables

      -

      Use any of our global :root variables to write new styles. CSS variables use the var(--bs-variableName) syntax and can be inherited by children elements.

      - {{ highlight (printf `.component { +

      + Use any of our global :root variables to write new styles. CSS variables use the var(--bs-variableName) syntax and can be inherited by children + elements. +

      + Using CSS variables

      .component-header { color: var(--bs-purple); -}`) "scss" "" }} +}`} + lang="scss" + />

      Customizing via CSS variables

      -

      Override global, component, or utility class variables to customize Bootstrap just how you like. No need to redeclare each rule, just a new variable value.

      - {{ highlight (printf `body { +

      + Override global, component, or utility class variables to customize Bootstrap just how you like. No need to + redeclare each rule, just a new variable value. +

      + Customizing via CSS variables --bs-table-color: var(--bs-gray-600); --bs-table-bg: var(--bs-gray-100); --bs-table-border-color: transparent; -}`) "scss" "" }} +}`} + lang="scss" + />
      diff --git a/site/src/components/home/ComponentUtilities.astro b/site/src/components/home/ComponentUtilities.astro new file mode 100644 index 000000000000..b54d4e4084c3 --- /dev/null +++ b/site/src/components/home/ComponentUtilities.astro @@ -0,0 +1,158 @@ +--- +import { getVersionedDocsPath } from '@libs/path' +import Code from '@shortcodes/Code.astro' +--- + +
      +
      +
      + +
      + +
      + +
      +

      Components, meet the Utility API

      +

      + New in Bootstrap 5, our utilities are now generated by our Utility API. We built it as a feature-packed Sass map that can be quickly and easily customized. It's never been easier to + add, remove, or modify any utility classes. Make utilities responsive, add pseudo-class variants, and give them + custom names. +

      +
      +
      +
      +

      Quickly customize components

      +

      + Apply any of our included utility classes to our components to customize their appearance, like the navigation + example below. There are hundreds of classes available—from positioning and sizing to colors and effects. Mix them with CSS variable overrides for + even more control. +

      +
      + + +
      + + + + +
    `} + lang="html" + /> +

    + + Explore customized components + + +

    +
    +
    +

    Create and extend utilities

    +

    + Use Bootstrap's utility API to modify any of our included utilities or create your own custom utilities for any + project. Import Bootstrap first, then use Sass map functions to modify, add, or remove utilities. +

    + +

    + + Explore the utility API + + +

    +
    +
    + diff --git a/site/layouts/partials/home/customize.html b/site/src/components/home/Customize.astro similarity index 67% rename from site/layouts/partials/home/customize.html rename to site/src/components/home/Customize.astro index 2370df9a8502..7422c517c6e9 100644 --- a/site/layouts/partials/home/customize.html +++ b/site/src/components/home/Customize.astro @@ -1,13 +1,19 @@ +--- +import { getVersionedDocsPath } from '@libs/path' +import Code from '@shortcodes/Code.astro' +--- +

    Customize everything with Sass

    - Bootstrap utilizes Sass for a modular and customizable architecture. Import only the components you need, enable global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins. + Bootstrap utilizes Sass for a modular and customizable architecture. Import only the components you need, enable + global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins.

    - + Learn more about customizing @@ -18,20 +24,23 @@

    Customize everything with Sass

    Include all of Bootstrap’s Sass

    Import one stylesheet and you're off to the races with every feature of our CSS.

    - {{ highlight (printf `// Variable overrides first + Learn more about our global Sass options.

    +@import "../node_modules/bootstrap/scss/bootstrap";`} + lang="scss" + /> +

    Learn more about our global Sass options.

    Include what you need

    The easiest way to customize Bootstrap—include only the CSS you need.

    -{{ highlight (printf `// Functions first + Include what you need

    @import "../node_modules/bootstrap/scss/containers"; @import "../node_modules/bootstrap/scss/grid"; @import "../node_modules/bootstrap/scss/helpers"; -@import "../node_modules/bootstrap/scss/utilities/api"; -`) "scss" "" }} -

    Learn more about using Bootstrap with Sass.

    +@import "../node_modules/bootstrap/scss/utilities/api";`} + lang="scss" + /> +

    Learn more about using Bootstrap with Sass.

    diff --git a/site/src/components/home/GetStarted.astro b/site/src/components/home/GetStarted.astro new file mode 100644 index 000000000000..4ad6807c76b0 --- /dev/null +++ b/site/src/components/home/GetStarted.astro @@ -0,0 +1,115 @@ +--- +import { getConfig } from '@libs/config' +import { getVersionedDocsPath } from '@libs/path' +import Code from '@shortcodes/Code.astro' +--- + +
    +
    + +
    +

    Get started any way you want

    +

    + Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code. +

    +

    + + Read installation docs + + +

    +
    + +
    +
    + +

    Install via package manager

    +

    + Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package-managed + installs don’t include documentation or our full build scripts. You can also use any demo from our Examples repo to quickly jumpstart Bootstrap projects. +

    + + +

    + Read our installation docs for more info and additional + package managers. +

    +
    +
    + +

    Include via CDN

    +

    + When you only need to include Bootstrap’s compiled CSS or JS, you can use jsDelivr. See it in action with our simple quick start, or browse the examples to jumpstart your next project. You can also + choose to include Popper and our JS separately. +

    + `} + lang="html" + /> + `} + lang="html" + /> +
    + +
    +

    Read our getting started guides

    +

    Get a jump on including Bootstrap's source files in a new project with our official guides.

    +
    + + + Webpack + + + + Parcel + + + + Vite + +
    +
    +
    diff --git a/site/src/components/home/Icons.astro b/site/src/components/home/Icons.astro new file mode 100644 index 000000000000..4991dab599af --- /dev/null +++ b/site/src/components/home/Icons.astro @@ -0,0 +1,28 @@ +--- +import { getConfig } from '@libs/config' +import CircleSquareIcon from '@components/icons/CircleSquareIcon.astro' +import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro' +--- + +
    +
    +
    + +
    +

    Personalize it with Bootstrap Icons

    +

    + Bootstrap Icons is an open source SVG icon library featuring over 1,800 glyphs, with + more added every release. They're designed to work in any project, whether you use Bootstrap itself or not. Use them + as SVGs or icon fonts—both options give you vector scaling and easy customization via CSS. +

    +

    + + Get Bootstrap Icons + + +

    +
    +
    + +
    +
    diff --git a/site/src/components/home/MastHead.astro b/site/src/components/home/MastHead.astro new file mode 100644 index 000000000000..f9054bac34fe --- /dev/null +++ b/site/src/components/home/MastHead.astro @@ -0,0 +1,60 @@ +--- +import { getConfig } from '@libs/config' +import { getVersionedDocsPath } from '@libs/path' +import Ads from '@components/Ads.astro' +import Code from '@components/shortcodes/Code.astro' +import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro' +--- + +
    +
    +
    + + + Get Security Updates for Bootstrap 3 & 4 + + + + +

    Build fast, responsive sites with Bootstrap

    +

    + Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid + system and components, and bring projects to life with powerful JavaScript plugins. +

    +
    +
    + +
    + + + Read the docs + +
    +

    + Currently v{getConfig().current_version} + · + Download + · + All releases +

    + +
    +
    +
    diff --git a/site/layouts/partials/home/plugins.html b/site/src/components/home/Plugins.astro similarity index 51% rename from site/layouts/partials/home/plugins.html rename to site/src/components/home/Plugins.astro index 00cf8133a0db..236ac5a151d6 100644 --- a/site/layouts/partials/home/plugins.html +++ b/site/src/components/home/Plugins.astro @@ -1,3 +1,11 @@ +--- +import { getVersionedDocsPath } from '@libs/path' +import { getData } from '@libs/data' +import Code from '@shortcodes/Code.astro' + +const plugins = getData('plugins') +--- +
    @@ -5,10 +13,12 @@

    Powerful JavaScript plugins without jQuery

    - Add toggleable hidden elements, modals and offcanvas menus, popovers and tooltips, and so much more—all without jQuery. Bootstrap's JavaScript is HTML-first, meaning most plugins are added with data attributes in your HTML. Need more control? Include individual plugins programmatically. + Add toggleable hidden elements, modals and offcanvas menus, popovers and tooltips, and so much more—all without + jQuery. Bootstrap's JavaScript is HTML-first, meaning most plugins are added with data attributes in your + HTML. Need more control? Include individual plugins programmatically.

    - + Learn more about Bootstrap JavaScript @@ -17,7 +27,10 @@

    Powerful JavaScript plugins without

    Data attribute API

    -

    Why write more JavaScript when you can write HTML? Nearly all of Bootstrap's JavaScript plugins feature a first-class data API, allowing you to use JavaScript just by adding data attributes.

    +

    + Why write more JavaScript when you can write HTML? Nearly all of Bootstrap's JavaScript plugins feature a + first-class data API, allowing you to use JavaScript just by adding data attributes. +

    - - {{ highlight (printf `
    + @@ -40,27 +53,38 @@

    Data attribute API

    • -
    -`) "html" "" }} -

    Learn more about our JavaScript as modules and using the programmatic API.

    +
    `} + lang="html" + /> +

    + Learn more about our JavaScript as modules and using the programmatic API. +

    Comprehensive set of plugins

    -

    Bootstrap features a dozen plugins that you can drop into any project. Drop them in all at once, or choose just the ones you need.

    -
    +

    + Bootstrap features a dozen plugins that you can drop into any project. Drop them in all at once, or choose just + the ones you need. +

    +
    - {{- range $plugin := .Site.Data.plugins -}} - {{- /* TODO we should use urls.JoinPath here too, but the links include `#` which gets escaped */ -}} - {{- $href := printf "/docs/%s/%s" $.Site.Params.docs_version $plugin.link }} -
    - -

    {{ $plugin.name }}

    - {{ $plugin.description }} -     -
    - {{- end }} + { + plugins.map((plugin) => { + return ( +
    + +

    {plugin.name}

    + {plugin.description} +     +
    + ) + }) + }

    -
    diff --git a/site/src/components/home/Themes.astro b/site/src/components/home/Themes.astro new file mode 100644 index 000000000000..68dd5e12b603 --- /dev/null +++ b/site/src/components/home/Themes.astro @@ -0,0 +1,35 @@ +--- +import { getConfig } from '@libs/config' +import DropletFillIcon from '@components/icons/DropletFillIcon.astro' +import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro' +--- + +
    +
    +
    + +
    +

    Make it yours with official Bootstrap Themes

    +

    + Take Bootstrap to the next level with premium themes from the official Bootstrap Themes marketplace. Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins, + documentation, and powerful build tools. +

    +

    + + Browse Bootstrap Themes + + +

    +
    +
    + +
    +
    diff --git a/site/src/components/icons/BootstrapWhiteFillIcon.astro b/site/src/components/icons/BootstrapWhiteFillIcon.astro new file mode 100644 index 000000000000..ef40e6a42597 --- /dev/null +++ b/site/src/components/icons/BootstrapWhiteFillIcon.astro @@ -0,0 +1,18 @@ +--- +import type { SvgIconProps } from '@libs/icon' + +type Props = SvgIconProps + +const { class: className, height, width } = Astro.props +--- + + + Bootstrap + + + diff --git a/site/src/components/icons/CircleSquareIcon.astro b/site/src/components/icons/CircleSquareIcon.astro new file mode 100644 index 000000000000..d71895069132 --- /dev/null +++ b/site/src/components/icons/CircleSquareIcon.astro @@ -0,0 +1,23 @@ +--- +import type { SvgIconProps } from '@libs/icon' + +type Props = SvgIconProps + +const { class: className, height, width } = Astro.props +--- + + diff --git a/site/src/components/icons/DropletFillIcon.astro b/site/src/components/icons/DropletFillIcon.astro new file mode 100644 index 000000000000..d1fe5b519d99 --- /dev/null +++ b/site/src/components/icons/DropletFillIcon.astro @@ -0,0 +1,24 @@ +--- +import type { SvgIconProps } from '@libs/icon' + +type Props = SvgIconProps + +const { class: className, height, width } = Astro.props +--- + + diff --git a/site/src/components/icons/GitHubIcon.astro b/site/src/components/icons/GitHubIcon.astro new file mode 100644 index 000000000000..faa01434d22d --- /dev/null +++ b/site/src/components/icons/GitHubIcon.astro @@ -0,0 +1,24 @@ +--- +import type { SvgIconProps } from '@libs/icon' + +type Props = SvgIconProps + +const { class: className, height, width } = Astro.props +--- + + + GitHub + + + diff --git a/site/src/components/icons/HamburgerIcon.astro b/site/src/components/icons/HamburgerIcon.astro new file mode 100644 index 000000000000..8ff4730a8546 --- /dev/null +++ b/site/src/components/icons/HamburgerIcon.astro @@ -0,0 +1,23 @@ +--- +import type { SvgIconProps } from '@libs/icon' + +type Props = SvgIconProps + +const { class: className, height, width } = Astro.props +--- + + diff --git a/site/src/components/icons/OpenCollectiveIcon.astro b/site/src/components/icons/OpenCollectiveIcon.astro new file mode 100644 index 000000000000..fc501641102c --- /dev/null +++ b/site/src/components/icons/OpenCollectiveIcon.astro @@ -0,0 +1,26 @@ +--- +import type { SvgIconProps } from '@libs/icon' + +type Props = SvgIconProps + +const { class: className, height, width } = Astro.props +--- + + + Open Collective + + + + diff --git a/site/src/components/icons/Symbols.astro b/site/src/components/icons/Symbols.astro new file mode 100644 index 000000000000..44d3e7310f6a --- /dev/null +++ b/site/src/components/icons/Symbols.astro @@ -0,0 +1,148 @@ +--- +--- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/site/src/components/icons/XIcon.astro b/site/src/components/icons/XIcon.astro new file mode 100644 index 000000000000..ea0f4bd8e1ee --- /dev/null +++ b/site/src/components/icons/XIcon.astro @@ -0,0 +1,23 @@ +--- +import type { SvgIconProps } from '@libs/icon' + +type Props = SvgIconProps + +const { class: className, height, width } = Astro.props +--- + + + X + + + diff --git a/site/src/components/shortcodes/AddedIn.astro b/site/src/components/shortcodes/AddedIn.astro new file mode 100644 index 000000000000..d9a26ce50e7c --- /dev/null +++ b/site/src/components/shortcodes/AddedIn.astro @@ -0,0 +1,16 @@ +--- +/* + * Outputs badge to identify the first version something was added + */ + +interface Props { + version: string +} + +const { version } = Astro.props +--- + +Added in v{version} diff --git a/site/src/components/shortcodes/BsTable.astro b/site/src/components/shortcodes/BsTable.astro new file mode 100644 index 000000000000..df80455ff0c0 --- /dev/null +++ b/site/src/components/shortcodes/BsTable.astro @@ -0,0 +1,16 @@ +--- +interface Props { + /** + * The CSS class to apply to the table. + * Note that the prop is not used in this component, but in a rehype plugin applying the classes to the table element + * directly on the HTML AST (HAST) generated by Astro. + * @default "table" + * @see src/libs/rehype.ts + */ + class?: string +} +--- + +
    + +
    diff --git a/site/src/components/shortcodes/Callout.astro b/site/src/components/shortcodes/Callout.astro new file mode 100644 index 000000000000..11243c848271 --- /dev/null +++ b/site/src/components/shortcodes/Callout.astro @@ -0,0 +1,44 @@ +--- +import { getCalloutByName } from '@libs/content' +import type { MarkdownInstance } from 'astro' + +interface Props { + /** + * The name of an existing callout to display located in `src/content/callouts`. + * This will override any content passed in via the default slot. + */ + name?: + | 'danger-async-methods' + | 'info-mediaqueries-breakpoints' + | 'info-npm-starter' + | 'info-prefersreducedmotion' + | 'info-sanitizer' + | 'warning-color-assistive-technologies' + | 'warning-data-bs-title-vs-title' + | 'warning-input-support' + /** + * The type of callout to display. One of `info`, `danger`, or `warning`. + * @default 'info' + */ + type?: 'danger' | 'info' | 'warning' +} + +const { name, type = 'info' } = Astro.props + +let Content: MarkdownInstance<{}>['Content'] | undefined + +if (name) { + const callout = await getCalloutByName(name) + + if (!callout) { + throw new Error(`Could not find callout with name '${name}'.`) + } + + const namedCallout = await callout.render() + Content = namedCallout.Content +} +--- + +
    + {Content ? : } +
    diff --git a/site/src/components/shortcodes/CalloutDeprecatedDarkVariants.astro b/site/src/components/shortcodes/CalloutDeprecatedDarkVariants.astro new file mode 100644 index 000000000000..4033900d96e0 --- /dev/null +++ b/site/src/components/shortcodes/CalloutDeprecatedDarkVariants.astro @@ -0,0 +1,19 @@ +--- +/* + * Outputs message about dark mode component variants being deprecated in v5.3. + */ + +interface Props { + component: string +} + +const { component } = Astro.props +--- + +
    +

    + Heads up! Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. + Instead of adding .{component}-dark, set data-bs-theme="dark" on the root element, a parent + wrapper, or the component itself. +

    +
    diff --git a/site/src/components/shortcodes/Code.astro b/site/src/components/shortcodes/Code.astro new file mode 100644 index 000000000000..231002a50b62 --- /dev/null +++ b/site/src/components/shortcodes/Code.astro @@ -0,0 +1,156 @@ +--- +import fs from 'node:fs' +import path from 'node:path' +import { Prism } from '@astrojs/prism' + +interface Props { + /** + * The CSS class(es) to be added to the `pre` HTML element when rendering code blocks in Markdown. + * Note that this prop is not used when the component is invoked directly. + */ + class?: string + /** + * The code to highlight. + * If an array is passed, elements will be joined with a new line. + */ + code?: string | string[] + /** + * The CSS class(es) to be added to the `div` wrapper HTML element. + */ + containerClass?: string + /** + * The language to use for highlighting. + * @see https://prismjs.com/#supported-languages + */ + lang?: string + /** + * If the `filePath` prop is defined, this prop can be used to specify a regex containing a match group to extract + * only a part of the file. + */ + fileMatch?: string + /** + * A path to the file containing the code to highlight relative to the root of the repository. + * This takes precedence over the `code` prop. + */ + filePath?: string +} + +const { class: className, code, containerClass, fileMatch, filePath, lang } = Astro.props + +let codeToDisplay = filePath + ? fs.readFileSync(path.join(process.cwd(), filePath), 'utf8') + : Array.isArray(code) + ? code.join('\n') + : code + +if (filePath && fileMatch && codeToDisplay) { + const match = codeToDisplay.match(new RegExp(fileMatch)) + + if (!match || !match[0]) { + throw new Error(`The file at ${filePath} does not contains a match for the regex '${fileMatch}'.`) + } + + codeToDisplay = match[0] +} +--- + + + +
    + { + Astro.slots.has('pre') ? ( + + ) : ( +
    + +
    + ) + } +
    + { + codeToDisplay && lang ? ( + + ) : ( + /* prettier-ignore */
    + ) + } +
    +
    diff --git a/site/src/components/shortcodes/DeprecatedIn.astro b/site/src/components/shortcodes/DeprecatedIn.astro new file mode 100644 index 000000000000..50ba42b95d0d --- /dev/null +++ b/site/src/components/shortcodes/DeprecatedIn.astro @@ -0,0 +1,17 @@ +--- +/* + * Outputs badge to identify the version something was deprecated + */ + +interface Props { + version: string +} + +const { version } = Astro.props +--- + + + Deprecated in v{version} + diff --git a/site/src/components/shortcodes/Example.astro b/site/src/components/shortcodes/Example.astro new file mode 100644 index 000000000000..a09fffeb31fb --- /dev/null +++ b/site/src/components/shortcodes/Example.astro @@ -0,0 +1,105 @@ +--- +import { replacePlaceholdersInHtml } from '@libs/placeholder' +import { Prism } from '@astrojs/prism' + +interface Props { + /** + * Defines if extra JS snippet should be added to StackBlitz or not. + * @default false + */ + addStackblitzJs?: boolean + /** + * The example code. + * If an array is passed, elements will be joined with a new line. + */ + code: string | string[] + /** + * The CSS class(es) to be added to the preview wrapping `div` element. + */ + class?: string + /** + * The preview wrapping `div` element ID. + */ + id?: string + /** + * Language used to display the code. + * @default 'html' + */ + lang?: string + /** + * Defines if the markup should be visible or not. + * @default true + */ + showMarkup?: boolean + /** + * Defines if the preview should be visible or not. + * @default true + */ + showPreview?: boolean +} + +const { + addStackblitzJs = false, + code, + class: className, + id, + lang = 'html', + showMarkup = true, + showPreview = true +} = Astro.props + +let markup = Array.isArray(code) ? code.join('\n') : code +markup = replacePlaceholdersInHtml(markup) + +const simplifiedMarkup = markup + .replace( + //g, + (match, classes) => `...` + ) + .replace( + //g, + (match, classes) => `...` + ) +--- + +
    + { + showPreview && ( +
    + +
    + ) + } + + { + showMarkup && ( + <> + {showPreview && ( +
    + {lang} +
    + + +
    +
    + )} +
    + +
    + + ) + } +
    diff --git a/site/src/components/shortcodes/GuideFooter.mdx b/site/src/components/shortcodes/GuideFooter.mdx new file mode 100644 index 000000000000..426a71f271c2 --- /dev/null +++ b/site/src/components/shortcodes/GuideFooter.mdx @@ -0,0 +1,3 @@ +
    + +_See something wrong or out of date here? Please [open an issue on GitHub]([[config:repo]]/issues/new/choose). Need help troubleshooting? [Search or start a discussion]([[config:repo]]/discussions) on GitHub._ diff --git a/site/layouts/partials/js-data-attributes.md b/site/src/components/shortcodes/JsDataAttributes.mdx similarity index 81% rename from site/layouts/partials/js-data-attributes.md rename to site/src/components/shortcodes/JsDataAttributes.mdx index 3b3696ed85f9..b7c6c0a7a858 100644 --- a/site/layouts/partials/js-data-attributes.md +++ b/site/src/components/shortcodes/JsDataAttributes.mdx @@ -1,4 +1,4 @@ -As options can be passed via data attributes or JavaScript, you can append an option name to `data-bs-`, as in `data-bs-animation="{value}"`. Make sure to change the case type of the option name from "_camelCase_" to "_kebab-case_" when passing the options via data attributes. For example, use `data-bs-custom-class="beautifier"` instead of `data-bs-customClass="beautifier"`. +As options can be passed via data attributes or JavaScript, you can append an option name to `data-bs-`, as in `data-bs-animation="{value}"`. Make sure to change the case type of the option name from “_camelCase_” to “_kebab-case_” when passing the options via data attributes. For example, use `data-bs-custom-class="beautifier"` instead of `data-bs-customClass="beautifier"`. As of Bootstrap 5.2.0, all components support an **experimental** reserved data attribute `data-bs-config` that can house simple component configuration as a JSON string. When an element has `data-bs-config='{"delay":0, "title":123}'` and `data-bs-title="456"` attributes, the final `title` value will be `456` and the separate data attributes will override values given on `data-bs-config`. In addition, existing data attributes are able to house JSON values like `data-bs-delay='{"show":0,"hide":150}'`. diff --git a/site/src/components/shortcodes/JsDismiss.astro b/site/src/components/shortcodes/JsDismiss.astro new file mode 100644 index 000000000000..d1da8fc4d6ac --- /dev/null +++ b/site/src/components/shortcodes/JsDismiss.astro @@ -0,0 +1,29 @@ +--- +import Code from '@shortcodes/Code.astro' + +interface Props { + name: string +} + +const { name } = Astro.props +--- + +

    + Dismissal can be achieved with the data-bs-dismiss attribute on a button within the {name} as demonstrated below: +

    + +`} + lang="html" +/> + +

    + or on a button outside the {name} using the additional data-bs-target as demonstrated below: +

    + +`} + lang="html" +/> diff --git a/site/src/components/shortcodes/JsDocs.astro b/site/src/components/shortcodes/JsDocs.astro new file mode 100644 index 000000000000..cf756af8c700 --- /dev/null +++ b/site/src/components/shortcodes/JsDocs.astro @@ -0,0 +1,69 @@ +--- +import fs from 'node:fs' +import { getConfig } from '@libs/config' +import Code from '@shortcodes/Code.astro' + +// Prints everything between `// js-docs-start "name"` and `// js-docs-end "name"` +// comments in the docs. + +interface Props { + /** + * Reference name used to find the content to display within the content of the `file` prop. + */ + name: string + /** + * File path that contains the content to display relative to the root of the repository. + */ + file: string +} + +const { name, file } = Astro.props + +if (!name || !file) { + throw new Error( + `Missing required parameter(s) for the '' component, expected both 'name' and 'file' but got 'name: ${name}' and 'file: ${file}'.` + ) +} + +let content: string + +try { + const fileContent = fs.readFileSync(file, 'utf8') + + const matches = fileContent.match(new RegExp(`\/\/ js-docs-start ${name}\n((?:.|\n)*)\/\/ js-docs-end ${name}`, 'm')) + + if (!matches || !matches[1]) { + throw new Error( + `Failed to find the content named '${name}', make sure that '// js-docs-start ${name}' and '// js-docs-end ${name}' are defined.` + ) + } + + content = matches[1] + + // Fix the identation by removing extra spaces at the beginning of each line + const lines = content.split('\n') + const spaceCounts = lines.filter((line) => line.trim().length > 0).map((line) => line.match(/^ */)[0].length) + const minSpaces = spaceCounts.length ? Math.min(...spaceCounts) : 0 + content = lines.map((line) => line.slice(minSpaces)).join('\n') +} catch (error) { + throw new Error(`Failed to find the content to render in the '' component at '${file}'.`, { + cause: error + }) +} +--- + + +
    + + {file} + +
    + +
    +
    +     diff --git a/site/src/components/shortcodes/Placeholder.astro b/site/src/components/shortcodes/Placeholder.astro new file mode 100644 index 000000000000..3ebde32bcb31 --- /dev/null +++ b/site/src/components/shortcodes/Placeholder.astro @@ -0,0 +1,27 @@ +--- +import { getPlaceholder, type PlaceholderOptions } from '@libs/placeholder' + +type Props = Partial + +const { + options: { background, color, showText, showTitle, text, title }, + props, + type +} = getPlaceholder(Astro.props) +--- + +{ + type === 'img' ? ( + + ) : ( + + {showTitle && {title}} + + {showText && ( + + {text} + + )} + + ) +} diff --git a/site/src/components/shortcodes/ScssDocs.astro b/site/src/components/shortcodes/ScssDocs.astro new file mode 100644 index 000000000000..6c267570eb3e --- /dev/null +++ b/site/src/components/shortcodes/ScssDocs.astro @@ -0,0 +1,71 @@ +--- +import fs from 'node:fs' +import { getConfig } from '@libs/config' +import Code from '@shortcodes/Code.astro' + +// Prints everything between `// scss-docs-start "name"` and `// scss-docs-end "name"` +// comments in the docs. + +interface Props { + /** + * Reference name used to find the content to display within the content of the `file` prop. + */ + name: string + /** + * File path that contains the content to display relative to the root of the repository. + */ + file: string +} + +const { name, file } = Astro.props + +if (!name || !file) { + throw new Error( + `Missing required parameter(s) for the '' component, expected both 'name' and 'file' but got 'name: ${name}' and 'file: ${file}'.` + ) +} + +let content: string + +try { + const fileContent = fs.readFileSync(file, 'utf8') + + const matches = fileContent.match( + new RegExp(`\/\/ scss-docs-start ${name}\n((?:.|\n)*)\/\/ scss-docs-end ${name}`, 'm') + ) + + if (!matches || !matches[1]) { + throw new Error( + `Failed to find the content named '${name}', make sure that '// scss-docs-start ${name}' and '// scss-docs-end ${name}' are defined.` + ) + } + + content = matches[1].replaceAll(' !default', '') + + // Fix the identation by removing extra spaces at the beginning of each line + const lines = content.split('\n') + const spaceCounts = lines.filter((line) => line.trim().length > 0).map((line) => line.match(/^ */)[0].length) + const minSpaces = spaceCounts.length ? Math.min(...spaceCounts) : 0 + content = lines.map((line) => line.slice(minSpaces)).join('\n') +} catch (error) { + throw new Error(`Failed to find the content to render in the '' component at '${file}'.`, { + cause: error + }) +} +--- + + +
    + + {file} + +
    + +
    +
    +     diff --git a/site/src/components/shortcodes/Table.astro b/site/src/components/shortcodes/Table.astro new file mode 100644 index 000000000000..853b19701c57 --- /dev/null +++ b/site/src/components/shortcodes/Table.astro @@ -0,0 +1,31 @@ +--- +import Code from '@shortcodes/Code.astro' +import * as tableContent from '@shortcodes/TableContent.md' + +interface Props { + /** + * Any class(es) to be added to the `` element (both in the example and code snippet). + */ + class?: string + /** + * Show a simplified version in the example code snippet by replacing the table content inside `
    ` & `
    ` + * with `...`. + * @default true + */ + simplified?: boolean +} + +const { class: className, simplified = true } = Astro.props + +const tableCode = ` +${simplified ? ' ...' : await tableContent.compiledContent()} +` +--- + +
    + + +
    +
    + + diff --git a/site/layouts/partials/table-content.html b/site/src/components/shortcodes/TableContent.md similarity index 100% rename from site/layouts/partials/table-content.html rename to site/src/components/shortcodes/TableContent.md diff --git a/site/layouts/partials/callouts/danger-async-methods.md b/site/src/content/callouts/danger-async-methods.md similarity index 70% rename from site/layouts/partials/callouts/danger-async-methods.md rename to site/src/content/callouts/danger-async-methods.md index f067502d366a..7b7a654b72d8 100644 --- a/site/layouts/partials/callouts/danger-async-methods.md +++ b/site/src/content/callouts/danger-async-methods.md @@ -1 +1 @@ -**All API methods are asynchronous and start a transition.** They return to the caller as soon as the transition is started, but before it ends. In addition, a method call on a transitioning component will be ignored. [Learn more in our JavaScript docs.](/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#asynchronous-functions-and-transitions) +**All API methods are asynchronous and start a transition.** They return to the caller as soon as the transition is started, but before it ends. In addition, a method call on a transitioning component will be ignored. [Learn more in our JavaScript docs.](/docs/[[config:docs_version]]/getting-started/javascript/#asynchronous-functions-and-transitions) diff --git a/site/src/content/callouts/info-mediaqueries-breakpoints.md b/site/src/content/callouts/info-mediaqueries-breakpoints.md new file mode 100644 index 000000000000..52be67386a9d --- /dev/null +++ b/site/src/content/callouts/info-mediaqueries-breakpoints.md @@ -0,0 +1 @@ +**Why subtract .02px?** Browsers don’t currently support [range context queries](https://www.w3.org/TR/mediaqueries-4/#range-context), so we work around the limitations of [`min-` and `max-` prefixes](https://www.w3.org/TR/mediaqueries-4/#mq-min-max) and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision. diff --git a/site/layouts/partials/callouts/info-npm-starter.md b/site/src/content/callouts/info-npm-starter.md similarity index 100% rename from site/layouts/partials/callouts/info-npm-starter.md rename to site/src/content/callouts/info-npm-starter.md diff --git a/site/layouts/partials/callouts/info-prefersreducedmotion.md b/site/src/content/callouts/info-prefersreducedmotion.md similarity index 50% rename from site/layouts/partials/callouts/info-prefersreducedmotion.md rename to site/src/content/callouts/info-prefersreducedmotion.md index d258fbe4820d..49d81ef8ba93 100644 --- a/site/layouts/partials/callouts/info-prefersreducedmotion.md +++ b/site/src/content/callouts/info-prefersreducedmotion.md @@ -1 +1 @@ -The animation effect of this component is dependent on the `prefers-reduced-motion` media query. See the [reduced motion section of our accessibility documentation](/docs/{{ .Site.Params.docs_version }}/getting-started/accessibility/#reduced-motion). +The animation effect of this component is dependent on the `prefers-reduced-motion` media query. See the [reduced motion section of our accessibility documentation](/docs/[[config:docs_version]]/getting-started/accessibility/#reduced-motion). diff --git a/site/layouts/partials/callouts/info-sanitizer.md b/site/src/content/callouts/info-sanitizer.md similarity index 66% rename from site/layouts/partials/callouts/info-sanitizer.md rename to site/src/content/callouts/info-sanitizer.md index ee0eda48e5fb..516975b3206c 100644 --- a/site/layouts/partials/callouts/info-sanitizer.md +++ b/site/src/content/callouts/info-sanitizer.md @@ -1 +1 @@ -By default, this component uses the built-in content sanitizer, which strips out any HTML elements that are not explicitly allowed. See the [sanitizer section in our JavaScript documentation](/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#sanitizer) for more details. +By default, this component uses the built-in content sanitizer, which strips out any HTML elements that are not explicitly allowed. See the [sanitizer section in our JavaScript documentation](/docs/[[config:docs_version]]/getting-started/javascript/#sanitizer) for more details. diff --git a/site/layouts/partials/callouts/warning-color-assistive-technologies.md b/site/src/content/callouts/warning-color-assistive-technologies.md similarity index 52% rename from site/layouts/partials/callouts/warning-color-assistive-technologies.md rename to site/src/content/callouts/warning-color-assistive-technologies.md index 075bf360977b..8afa62ee8cdb 100644 --- a/site/layouts/partials/callouts/warning-color-assistive-technologies.md +++ b/site/src/content/callouts/warning-color-assistive-technologies.md @@ -1 +1 @@ -**Accessibility tip:** Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a [*sufficient* color contrast](/docs/{{ .Site.Params.docs_version }}/getting-started/accessibility/#color-contrast)) or is included through alternative means, such as additional text hidden with the `.visually-hidden` class. +**Accessibility tip:** Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a [_sufficient_ color contrast](/docs/[[config:docs_version]]/getting-started/accessibility/#color-contrast)) or is included through alternative means, such as additional text hidden with the `.visually-hidden` class. diff --git a/site/layouts/partials/callouts/warning-data-bs-title-vs-title.md b/site/src/content/callouts/warning-data-bs-title-vs-title.md similarity index 100% rename from site/layouts/partials/callouts/warning-data-bs-title-vs-title.md rename to site/src/content/callouts/warning-data-bs-title-vs-title.md diff --git a/site/layouts/partials/callouts/warning-input-support.md b/site/src/content/callouts/warning-input-support.md similarity index 100% rename from site/layouts/partials/callouts/warning-input-support.md rename to site/src/content/callouts/warning-input-support.md diff --git a/site/src/content/config.ts b/site/src/content/config.ts new file mode 100644 index 000000000000..387a0052ebef --- /dev/null +++ b/site/src/content/config.ts @@ -0,0 +1,45 @@ +import { z, defineCollection } from 'astro:content' + +const docsSchema = z.object({ + added: z + .object({ + show_badge: z.boolean().optional(), + version: z.string() + }) + .optional(), + aliases: z.string().or(z.string().array()).optional(), + description: z.string(), + direction: z.literal('rtl').optional(), + extra_js: z + .object({ + async: z.boolean().optional(), + src: z.string() + }) + .array() + .optional(), + sections: z + .object({ + description: z.string(), + title: z.string() + }) + .array() + .optional(), + thumbnail: z.string().optional(), + title: z.string(), + toc: z.boolean().optional() +}) + +const docsCollection = defineCollection({ + schema: docsSchema +}) + +const calloutsSchema = z.object({}) + +const calloutsCollection = defineCollection({ + schema: calloutsSchema +}) + +export const collections = { + docs: docsCollection, + callouts: calloutsCollection +} diff --git a/site/content/docs/5.3/about/brand.md b/site/src/content/docs/about/brand.mdx similarity index 56% rename from site/content/docs/5.3/about/brand.md rename to site/src/content/docs/about/brand.mdx index 59f262eff853..0b1716221308 100644 --- a/site/content/docs/5.3/about/brand.md +++ b/site/src/content/docs/about/brand.mdx @@ -1,29 +1,27 @@ --- -layout: docs title: Brand guidelines -description: Documentation and examples for Bootstrap's logo and brand usage guidelines. -group: about +description: Documentation and examples for Bootstrap’s logo and brand usage guidelines. toc: true --- -Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. +Have a need for Bootstrap’s brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. ## Logo -When referencing Bootstrap, use our logo mark. Do not modify our logos in any way. Do not use Bootstrap's branding for your own open or closed source projects. +When referencing Bootstrap, use our logo mark. Do not modify our logos in any way. Do not use Bootstrap’s branding for your own open or closed source projects.
    - Bootstrap + Bootstrap
    Our logo mark is also available in black and white. All rules for our primary logo apply to these as well.
    - Bootstrap + Bootstrap
    - Bootstrap + Bootstrap
    diff --git a/site/content/docs/5.3/about/license.md b/site/src/content/docs/about/license.mdx similarity index 72% rename from site/content/docs/5.3/about/license.md rename to site/src/content/docs/about/license.mdx index 8698b1a3b3c0..6479df67c999 100644 --- a/site/content/docs/5.3/about/license.md +++ b/site/src/content/docs/about/license.mdx @@ -1,15 +1,13 @@ --- -layout: docs title: License FAQs -description: Commonly asked questions about Bootstrap's open source license. -group: about +description: Commonly asked questions about Bootstrap’s open source license. --- -Bootstrap is released under the MIT license and is copyright {{< year >}}. Boiled down to smaller chunks, it can be described with the following conditions. +Bootstrap is released under the MIT license and is copyright {new Date().getFullYear()}. Boiled down to smaller chunks, it can be described with the following conditions. ## It requires you to: -- Keep the license and copyright notice included in Bootstrap's CSS and JavaScript files when you use them in your works +- Keep the license and copyright notice included in Bootstrap’s CSS and JavaScript files when you use them in your works ## It permits you to: @@ -31,4 +29,4 @@ Bootstrap is released under the MIT license and is copyright {{< year >}}. Boile - Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it - Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged) -The full Bootstrap license is located [in the project repository]({{< param repo >}}/blob/v{{< param current_version >}}/LICENSE) for more information. +The full Bootstrap license is located [in the project repository]([[config:repo]]/blob/v[[config:current_version]]/LICENSE) for more information. diff --git a/site/src/content/docs/about/overview.mdx b/site/src/content/docs/about/overview.mdx new file mode 100644 index 000000000000..efd16c543ed3 --- /dev/null +++ b/site/src/content/docs/about/overview.mdx @@ -0,0 +1,27 @@ +--- +title: About Bootstrap +description: Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved. +aliases: + - "/about/" + - "/docs/[[config:docs_version]]/about/" +--- + +## Team + +Bootstrap is maintained by a [small team of developers](https://github.com/orgs/twbs/people) on GitHub. We’re actively looking to grow this team and would love to hear from you if you’re excited about CSS at scale, writing and maintaining vanilla JavaScript plugins, and improving build tooling processes for frontend code. + +## History + +Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world. + +Bootstrap was created at Twitter in mid-2010 by [@mdo](https://x.com/mdo) and [@fat](https://x.com/fat). Prior to being an open-sourced framework, Bootstrap was known as _Twitter Blueprint_. A few months into development, Twitter held its [first Hack Week](https://blog.x.com/engineering/en_us/a/2010/hack-week) and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today. + +Originally [released](https://blog.x.com/developer/en_us/a/2011/bootstrap-twitter) on , we’ve since had over [twenty releases]([[config:repo]]/releases), including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach. + +With Bootstrap 4, we once again rewrote the project to account for two key architectural changes: a migration to Sass and the move to CSS’s flexbox. Our intention is to help in a small way to move the web development community forward by pushing for newer CSS properties, fewer dependencies, and new technologies across more modern browsers. + +Our latest release, Bootstrap 5, focuses on improving v4’s codebase with as few major breaking changes as possible. We improved existing features and components, removed support for older browsers, dropped jQuery for regular JavaScript, and embraced more future-friendly technologies like CSS custom properties as part of our tooling. + +## Get involved + +Get involved with Bootstrap development by [opening an issue]([[config:repo]]/issues/new/choose) or submitting a pull request. Read our [contributing guidelines]([[config:repo]]/blob/v[[config:current_version]]/.github/CONTRIBUTING.md) for information on how we develop. diff --git a/site/src/content/docs/about/team.mdx b/site/src/content/docs/about/team.mdx new file mode 100644 index 000000000000..46b03d87746c --- /dev/null +++ b/site/src/content/docs/about/team.mdx @@ -0,0 +1,23 @@ +--- +title: Team +description: An overview of the founding team and core contributors to Bootstrap. +--- + +import { getData } from '@libs/data' + +Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community. + +
    + {getData('core-team').map((member) => { + return ( + + {`@${member.user}`} + + {member.name} @{member.user} + + + ) + })} +
    + +Get involved with Bootstrap development by [opening an issue]([[config:repo]]/issues/new/choose) or submitting a pull request. Read our [contributing guidelines]([[config:repo]]/blob/v[[config:current_version]]/.github/CONTRIBUTING.md) for information on how we develop. diff --git a/site/src/content/docs/about/translations.mdx b/site/src/content/docs/about/translations.mdx new file mode 100644 index 000000000000..7db4ab846cc7 --- /dev/null +++ b/site/src/content/docs/about/translations.mdx @@ -0,0 +1,20 @@ +--- +title: Translations +description: Links to community-translated Bootstrap documentation sites. +--- + +import { getData } from '@libs/data' + +Community members have translated Bootstrap’s documentation into various languages. None are officially supported and they may not always be up-to-date. + + + +**We don’t help organize or host translations, we just link to them.** + +Finished a new or better translation? Open a pull request to add it to our list. diff --git a/site/src/content/docs/components/accordion.mdx b/site/src/content/docs/components/accordion.mdx new file mode 100644 index 000000000000..e452a07de4b2 --- /dev/null +++ b/site/src/content/docs/components/accordion.mdx @@ -0,0 +1,159 @@ +--- +title: Accordion +description: Build vertically collapsing accordions in combination with our Collapse JavaScript plugin. +aliases: + - "/components/" + - "/docs/[[config:docs_version]]/components/" +toc: true +--- + +## How it works + +The accordion uses [collapse]([[docsref:/components/collapse]]) internally to make it collapsible. + + + +## Example + +Click the accordions below to expand/collapse the accordion content. + +To render an accordion that’s expanded by default: +- add the `.show` class on the `.accordion-collapse` element. +- drop the `.collapsed` class from the `.accordion-button` element and set its `aria-expanded` attribute to `true`. + + +
    +

    + +

    +
    +
    + This is the first item’s accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
    +
    +
    +
    +

    + +

    +
    +
    + This is the second item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
    +
    +
    +
    +

    + +

    +
    +
    + This is the third item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
    +
    +
    +
    `} /> + +### Flush + +Add `.accordion-flush` to remove some borders and rounded corners to render accordions edge-to-edge with their parent container. + + +
    +

    + +

    +
    +
    Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item’s accordion body.
    +
    +
    +
    +

    + +

    +
    +
    Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item’s accordion body. Let’s imagine this being filled with some actual content.
    +
    +
    +
    +

    + +

    +
    +
    Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the third item’s accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.
    +
    +
    +
    `} /> + +### Always open + +Omit the `data-bs-parent` attribute on each `.accordion-collapse` to make accordion items stay open when another item is opened. + + +
    +

    + +

    +
    +
    + This is the first item’s accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
    +
    +
    +
    +

    + +

    +
    +
    + This is the second item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
    +
    +
    +
    +

    + +

    +
    +
    + This is the third item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
    +
    +
    +
    `} /> + +## Accessibility + +Please read the [collapse accessibility section]([[docsref:/components/collapse#accessibility]]) for more information. + +## CSS + +### Variables + + + +As part of Bootstrap’s evolving CSS variables approach, accordions now use local CSS variables on `.accordion` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + + + +### Sass variables + + diff --git a/site/src/content/docs/components/alerts.mdx b/site/src/content/docs/components/alerts.mdx new file mode 100644 index 000000000000..e25604462b26 --- /dev/null +++ b/site/src/content/docs/components/alerts.mdx @@ -0,0 +1,218 @@ +--- +title: Alerts +description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. +toc: true +--- + +import { getData } from '@libs/data' + +## Examples + +Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing). + + +**Heads up!** As of v5.3.0, the `alert-variant()` Sass mixin is deprecated. Alert variants now have their CSS variables overridden in [a Sass loop](#sass-loops). + + + ``)} /> + + + +### Live example + +Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button. + +
    +`} /> + +We use the following JavaScript to trigger our live alert demo: + + + +### Link color + +Use the `.alert-link` utility class to quickly provide matching colored links within any alert. + + ``)} /> + +### Additional content + +Alerts can also contain additional HTML elements like headings, paragraphs and dividers. + + +

    Well done!

    +

    Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

    +
    +

    Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

    +
    `} /> + +### Icons + +Similarly, you can use [flexbox utilities]([[docsref:/utilities/flex]]) and [Bootstrap Icons]([[config:icons]]) to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles. + + + + + +
    + An example alert with an icon +
    + `} /> + +Need more than one icon for your alerts? Consider using more Bootstrap Icons and making a local SVG sprite like so to easily reference the same icons repeatedly. + + + + + + + + + + + + + + + + + `} /> + +### Dismissing + +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. +- Add a [close button]([[docsref:/components/close-button]]) and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the close button. +- On the close button, add the `data-bs-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the ` + `} /> + + +When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the `closed.bs.alert` event and programmatically sets `focus()` to the most appropriate location in the page. If you’re planning to move focus to a non-interactive element that normally does not receive focus, make sure to add `tabindex="-1"` to the element. + + +## CSS + +### Variables + + + +As part of Bootstrap’s evolving CSS variables approach, alerts now use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + + + +### Sass variables + + + +### Sass mixins + + + + + +### Sass loops + +Loop that generates the modifier classes with an overriding of CSS variables. + + + +## JavaScript behavior + +### Initialize + +Initialize elements as alerts + +```js +const alertList = document.querySelectorAll('.alert') +const alerts = [...alertList].map(element => new bootstrap.Alert(element)) +``` + + +For the sole purpose of dismissing an alert, it isn’t necessary to initialize the component manually via the JS API. By making use of `data-bs-dismiss="alert"`, the component will be initialized automatically and properly dismissed. + +See the [triggers](#triggers) section for more details. + + +### Triggers + + + +**Note that closing an alert will remove it from the DOM.** + +### Methods + +You can create an alert instance with the alert constructor, for example: + +```js +const bsAlert = new bootstrap.Alert('#myAlert') +``` + +This makes an alert listen for click events on descendant elements which have the `data-bs-dismiss="alert"` attribute. (Not necessary when using the data-api’s auto-initialization.) + + +| Method | Description | +| --- | --- | +| `close` | Closes an alert by removing it from the DOM. If the `.fade` and `.show` classes are present on the element, the alert will fade out before it is removed. | +| `dispose` | Destroys an element’s alert. (Removes stored data on the DOM element) | +| `getInstance` | Static method which allows you to get the alert instance associated to a DOM element. For example: `bootstrap.Alert.getInstance(alert)`. | +| `getOrCreateInstance` | Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: `bootstrap.Alert.getOrCreateInstance(element)`. | + + +Basic usage: + +```js +const alert = bootstrap.Alert.getOrCreateInstance('#myAlert') +alert.close() +``` + +### Events + +Bootstrap’s alert plugin exposes a few events for hooking into alert functionality. + + +| Event | Description | +| --- | --- | +| `close.bs.alert` | Fires immediately when the `close` instance method is called. | +| `closed.bs.alert` | Fired when the alert has been closed and CSS transitions have completed. | + + +```js +const myAlert = document.getElementById('myAlert') +myAlert.addEventListener('closed.bs.alert', event => { + // do something, for instance, explicitly move focus to the most appropriate element, + // so it doesn’t get lost/reset to the start of the page + // document.getElementById('...').focus() +}) +``` diff --git a/site/src/content/docs/components/badge.mdx b/site/src/content/docs/components/badge.mdx new file mode 100644 index 000000000000..b3e574b6d899 --- /dev/null +++ b/site/src/content/docs/components/badge.mdx @@ -0,0 +1,83 @@ +--- +title: Badges +description: Documentation and examples for badges, our small count and labeling component. +toc: true +--- + +import { getData } from '@libs/data' + +## Examples + +Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units. As of v5, badges no longer have focus or hover styles for links. + +### Headings + +Example heading New +

    Example heading New

    +

    Example heading New

    +

    Example heading New

    +
    Example heading New
    +
    Example heading New
    `} /> + +### Buttons + +Badges can be used as part of links or buttons to provide a counter. + + + Notifications 4 + `} /> + +Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button. + +Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text. + +### Positioned + +Use utilities to modify a `.badge` and position it in the corner of a link or button. + + + Inbox + + 99+ + + + `} /> + +You can also replace the `.badge` class with a few more utilities without a count for a more generic indicator. + + + Profile + + + + `} /> + +## Background colors + + + +Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]([[docsref:helpers/color-background]]). Previously it was required to manually pair your choice of [`.text-{color}`]([[docsref:/utilities/colors]]) and [`.bg-{color}`]([[docsref:/utilities/background]]) utilities for styling, which you still may use if you prefer. + + `${themeColor.title}`)} /> + + + +## Pill badges + +Use the `.rounded-pill` utility class to make badges more rounded with a larger `border-radius`. + + `${themeColor.title}`)} /> + +## CSS + +### Variables + + + +As part of Bootstrap’s evolving CSS variables approach, badges now use local CSS variables on `.badge` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + + + +### Sass variables + + diff --git a/site/src/content/docs/components/breadcrumb.mdx b/site/src/content/docs/components/breadcrumb.mdx new file mode 100644 index 000000000000..50cceb1cc190 --- /dev/null +++ b/site/src/content/docs/components/breadcrumb.mdx @@ -0,0 +1,98 @@ +--- +title: Breadcrumb +description: Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. +toc: true +--- + +## Example + +Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired. + + +
      +
    1. Home
      2. +
    + + + + + `} /> + +## Dividers + +Dividers are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content). They can be changed by modifying a local CSS custom property `--bs-breadcrumb-divider`, or through the `$breadcrumb-divider` Sass variable — and `$breadcrumb-divider-flipped` for its RTL counterpart, if needed. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time. + + +
      +
    1. Home
      2. +
    2. Library
      3. +
    + `} /> + +When modifying via Sass, the [quote](https://sass-lang.com/documentation/modules/string/#quote) function is required to generate the quotes around a string. For example, using `>` as the divider, you can use this: + +```scss +$breadcrumb-divider: quote(">"); +``` + +It’s also possible to use an **embedded SVG icon**. Apply it via our CSS custom property, or use the Sass variable. + + +**Inlined SVG requires properly escaped characters.** Some reserved characters, such as `<`, `>` and `#`, must be URL-encoded or escaped. We do this with the `$breadcrumb-divider` variable using our [`escape-svg()` Sass function]([[docsref:/customize/sass#escape-svg]]). When customizing the CSS variable, you must handle this yourself. Read [Kevin Weber’s explanations on CodePen](https://codepen.io/kevinweber/pen/dXWoRw ) for more info. + + + +
      +
    1. Home
      2. +
    2. Library
      3. +
    + `} /> + +```scss +$breadcrumb-divider: url("data:image/svg+xml,"); +``` + +You can also remove the divider setting `--bs-breadcrumb-divider: '';` (empty strings in CSS custom properties counts as a value), or setting the Sass variable to `$breadcrumb-divider: none;`. + + +
      +
    1. Home
      2. +
    2. Library
      3. +
    + `} /> + + +```scss +$breadcrumb-divider: none; +``` + +## Accessibility + +Since breadcrumbs provide a navigation, it’s a good idea to add a meaningful label such as `aria-label="breadcrumb"` to describe the type of navigation provided in the ``} /> ## Directions -{{< callout info >}} + **Directions are flipped in RTL mode.** As such, `.dropstart` will appear on the right side. -{{< /callout >}} + ### Centered Make the dropdown menu centered below the toggle with `.dropdown-center` on the parent element. -{{< example >}} -
    - - -
    -{{< /example >}} + + + + `} /> ### Dropup Trigger dropdown menus above elements by adding `.dropup` to the parent element. -
    -
    + @@ -438,9 +417,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
    - + @@ -451,8 +428,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
  • Separated link
    • -
    -
    + `} /> ```html @@ -483,25 +459,22 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element. Make the dropup menu centered above the toggle with `.dropup-center` on the parent element. -{{< example >}} -
    - - -
    -{{< /example >}} + + + + `} /> ### Dropend Trigger dropdown menus at the right of the elements by adding `.dropend` to the parent element. -
    -
    + @@ -514,9 +487,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropend` to the
    - + @@ -527,8 +498,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropend` to the
  • Separated link
    • -
    -
    + `} /> ```html @@ -559,8 +529,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropend` to the Trigger dropdown menus at the left of the elements by adding `.dropstart` to the parent element. -
    -
    + @@ -583,11 +552,8 @@ Trigger dropdown menus at the left of the elements by adding `.dropstart` to the
  • Separated link
    • - -
    -
    + + `} /> ```html @@ -618,53 +584,45 @@ Trigger dropdown menus at the left of the elements by adding `.dropstart` to the You can use `` or ` -
      -
      • -
      • -
      • -
    - -{{< /example >}} + + +
      +
      • +
      • +
      • +
    + `} /> You can also create non-interactive dropdown items with `.dropdown-item-text`. Feel free to style further with custom CSS or text utilities. -{{< example >}} -     -{{< /example >}} + +
  • Dropdown item text
    • +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • + `} /> ### Active Add `.active` to items in the dropdown to **style them as active**. To convey the active state to assistive technologies, use the `aria-current` attribute — using the `page` value for the current page, or `true` for the current item in a set. -{{< example >}} - -{{< /example >}} + +
  • Regular link
    • +
  • Active link
    • +
  • Another link
    • + `} /> ### Disabled Add `.disabled` to items in the dropdown to **style them as disabled**. -{{< example >}} - -{{< /example >}} + +
  • Regular link
    • +
  • Disabled link
    • +
  • Another link
    • + `} /> ## Menu alignment @@ -672,22 +630,20 @@ By default, a dropdown menu is automatically positioned 100% from the top and al Add `.dropdown-menu-end` to a `.dropdown-menu` to right align the dropdown menu. Directions are mirrored when using Bootstrap in RTL, meaning `.dropdown-menu-end` will appear on the left side. -{{< callout info >}} + **Heads up!** Dropdowns are positioned thanks to Popper except when they are contained in a navbar. -{{< /callout >}} + -{{< example >}} -
    - -
      -
      • -
      • -
      • -
    -
    -{{< /example >}} + + +
      +
      • +
      • +
      • +
    + `} /> ### Responsive alignment @@ -695,118 +651,112 @@ If you want to use responsive alignment, disable dynamic positioning by adding t To align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end`. -{{< example >}} -
    - -
      -
      • -
      • -
      • -
    -
    -{{< /example >}} + + +
      +
      • +
      • +
      • +
    + `} /> To align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-end` and `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start`. -{{< example >}} -
    - -
      -
      • -
      • -
      • -
    -
    -{{< /example >}} + + +
      +
      • +
      • +
      • +
    + `} /> -Note that you don't need to add a `data-bs-display="static"` attribute to dropdown buttons in navbars, since Popper isn't used in navbars. +Note that you don’t need to add a `data-bs-display="static"` attribute to dropdown buttons in navbars, since Popper isn’t used in navbars. ### Alignment options -Taking most of the options shown above, here's a small kitchen sink demo of various dropdown alignment options in one place. +Taking most of the options shown above, here’s a small kitchen sink demo of various dropdown alignment options in one place. -{{< example >}} -
    - - -
    + + + + -
    - - -
    +
    + + +
    -
    - - -
    +
    + + +
    -
    - - -
    +
    + + +
    -
    - - -
    +
    + + +
    -
    - - -
    +
    + + +
    -
    - - -
    -{{< /example >}} +
    + + +
    `} /> ## Menu content @@ -814,230 +764,216 @@ Taking most of the options shown above, here's a small kitchen sink demo of vari Add a header to label sections of actions in any dropdown menu. -{{< example >}} - -{{< /example >}} + +
  • Dropdown header
    • +
  • Action
    • +
  • Another action
    • + `} /> ### Dividers Separate groups of related menu items with a divider. -{{< example >}} - -{{< /example >}} + +
  • Action
    • +
  • Another action
    • +
  • Something else here
    • +
    • +
  • Separated link
    • + `} /> ### Text -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. +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 >}} -
    -

    - Some example text that's free-flowing within the dropdown menu. -

    -

    - And this is more example text. -

    -
    -{{< /example >}} + +

    + Some example text that’s free-flowing within the dropdown menu. +

    +

    + And this is more example text. +

    + `} /> ### Forms -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. +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 >}} -
    -
    -
    - - -
    -
    - - -
    -
    -
    - - + + +
    + +
    -
    - - -
    - New around here? Sign up - Forgot password? -
    -{{< /example >}} - -{{< example >}} -
    - -
    -
    - - -
    -
    - - -
    -
    -
    - - +
    + +
    -
    - - -
    -{{< /example >}} +
    +
    + + +
    +
    + + +
    + New around here? Sign up + Forgot password? +
    `} /> + + + +
    +
    + + +
    +
    + + +
    +
    +
    + + +
    +
    + +
    +
    `} /> ## Dropdown options Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdown. -{{< example >}} -
    -
    - + +
    +
    + + + +
    +
    `} /> + +### Auto close behavior + +By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the `autoClose` option to change this behavior of the dropdown. + + + +
    - -
    - -{{< /example >}} -### Auto close behavior - -By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the `autoClose` option to change this behavior of the dropdown. - -{{< example >}} -
    - - -
    - -
    - - -
    - -
    - - -
    +
    + + +
    -
    - - -
    -{{< /example >}} +
    + + +
    `} /> ## CSS ### Variables -{{< added-in "5.2.0" >}} + -As part of Bootstrap's evolving CSS variables approach, dropdowns now use local CSS variables on `.dropdown-menu` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. +As part of Bootstrap’s evolving CSS variables approach, dropdowns now use local CSS variables on `.dropdown-menu` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. -{{< scss-docs name="dropdown-css-vars" file="scss/_dropdown.scss" >}} + -{{< callout info >}} + Dropdown items include at least one variable that is not set on `.dropdown`. This allows you to provide a new value while Bootstrap defaults to a fallback value. - `--bs-dropdown-item-border-radius` -{{< /callout >}} + Customization through CSS variables can be seen on the `.dropdown-menu-dark` class where we override specific values without adding duplicate CSS selectors. -{{< scss-docs name="dropdown-dark-css-vars" file="scss/_dropdown.scss" >}} + ### Sass variables Variables for all dropdowns: -{{< scss-docs name="dropdown-variables" file="scss/_variables.scss" >}} + Variables for the [dark dropdown](#dark-dropdowns): -{{< scss-docs name="dropdown-dark-variables" file="scss/_variables.scss" >}} + -Variables for the CSS-based carets that indicate a dropdown's interactivity: +Variables for the CSS-based carets that indicate a dropdown’s interactivity: -{{< scss-docs name="caret-variables" file="scss/_variables.scss" >}} + ### Sass mixins Mixins are used to generate the CSS-based carets and can be found in `scss/mixins/_caret.scss`. -{{< scss-docs name="caret-mixins" file="scss/mixins/_caret.scss" >}} + ## Usage -Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent `.dropdown-menu`. The `data-bs-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it. +Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent `.dropdown-menu`. The `data-bs-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it’s a good idea to always use it. -{{< callout info >}} -On touch-enabled devices, opening a dropdown adds empty `mouseover` handlers to the immediate children of the `` element. This admittedly ugly hack is necessary to work around a [quirk in iOS' event delegation](https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html), which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty `mouseover` handlers are removed. -{{< /callout >}} + +On touch-enabled devices, opening a dropdown adds empty `mouseover` handlers to the immediate children of the `` element. This admittedly ugly hack is necessary to work around a [quirk in iOs’ event delegation](https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html), which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty `mouseover` handlers are removed. + ### Via data attributes @@ -1056,9 +992,9 @@ Add `data-bs-toggle="dropdown"` to a link or button to toggle a dropdown. ### Via JavaScript -{{< callout warning >}} + Dropdowns must have `data-bs-toggle="dropdown"` on their trigger element, regardless of whether you call your dropdown via JavaScript or use the data-api. -{{< /callout >}} + Call the dropdowns via JavaScript: @@ -1069,20 +1005,18 @@ const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootst ### Options -{{< markdown >}} -{{< partial "js-data-attributes.md" >}} -{{< /markdown >}} + -{{< bs-table "table" >}} + | Name | Type | Default | Description | | --- | --- | --- | --- | | `autoClose` | boolean, string | `true` | Configure the auto close behavior of the dropdown:
    • `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
    • `false` - the dropdown will be closed by clicking the toggle button and manually calling `hide` or `toggle` method. (Also will not be closed by pressing Esc key)
    • `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
    • `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
    Note: the dropdown can always be closed with the Esc key. | -| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the dropdown menu (applies only to Popper's preventOverflow modifier). By default it's `clippingParents` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). | +| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the dropdown menu (applies only to Popper’s preventOverflow modifier). By default it’s `clippingParents` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper’s [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). | | `display` | string | `'dynamic'` | By default, we use Popper for dynamic positioning. Disable this with `static`. | -| `offset` | array, string, function | `[0, 2]` | Offset of the dropdown 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). | -| `popperConfig` | null, object, function | `null` | To change Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. | -| `reference` | string, element, object | `'toggle'` | Reference element of the dropdown menu. Accepts the values of `'toggle'`, `'parent'`, an HTMLElement reference or an object providing `getBoundingClientRect`. For more information refer to Popper's [constructor docs](https://popper.js.org/docs/v2/constructors/#createpopper) and [virtual element docs](https://popper.js.org/docs/v2/virtual-elements/). | -{{< /bs-table >}} +| `offset` | array, string, function | `[0, 2]` | Offset of the dropdown 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). | +| `popperConfig` | null, object, function | `null` | To change Bootstrap’s default Popper config, see [Popper’s configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it’s called with an object that contains the Bootstrap’s default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. | +| `reference` | string, element, object | `'toggle'` | Reference element of the dropdown menu. Accepts the values of `'toggle'`, `'parent'`, an HTMLElement reference or an object providing `getBoundingClientRect`. For more information refer to Popper’s [constructor docs](https://popper.js.org/docs/v2/constructors/#createpopper) and [virtual element docs](https://popper.js.org/docs/v2/virtual-elements/). | +     #### Using function with `popperConfig` @@ -1098,30 +1032,30 @@ const dropdown = new bootstrap.Dropdown(element, { ### Methods -{{< bs-table >}} + | Method | Description | | --- | --- | -| `dispose` | Destroys an element's dropdown. (Removes stored data on the DOM element) | +| `dispose` | Destroys an element’s dropdown. (Removes stored data on the DOM element) | | `getInstance` | Static method which allows you to get the dropdown instance associated to a DOM element, you can use it like this: `bootstrap.Dropdown.getInstance(element)`. | -| `getOrCreateInstance` | Static method which returns a dropdown instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Dropdown.getOrCreateInstance(element)`. | +| `getOrCreateInstance` | Static method which returns a dropdown instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: `bootstrap.Dropdown.getOrCreateInstance(element)`. | | `hide` | Hides the dropdown menu of a given navbar or tabbed navigation. | | `show` | Shows the dropdown menu of a given navbar or tabbed navigation. | | `toggle` | Toggles the dropdown menu of a given navbar or tabbed navigation. | -| `update` | Updates the position of an element's dropdown. | -{{< /bs-table >}} +| `update` | Updates the position of an element’s dropdown. | + ### Events -All dropdown events are fired at the toggling element and then bubbled up. So you can also add event listeners on the `.dropdown-menu`'s parent element. `hide.bs.dropdown` and `hidden.bs.dropdown` events have a `clickEvent` property (only when the original Event type is `click`) that contains an Event Object for the click event. +All dropdown events are fired at the toggling element and then bubbled up. So you can also add event listeners on the `.dropdown-menu`’s parent element. `hide.bs.dropdown` and `hidden.bs.dropdown` events have a `clickEvent` property (only when the original Event type is `click`) that contains an Event Object for the click event. -{{< bs-table >}} + | Event type | Description | | --- | --- | | `hide.bs.dropdown` | Fires immediately when the `hide` instance method has been called. | | `hidden.bs.dropdown` | Fired when the dropdown has finished being hidden from the user and CSS transitions have completed. | | `show.bs.dropdown` | Fires immediately when the `show` instance method is called. | | `shown.bs.dropdown` | Fired when the dropdown has been made visible to the user and CSS transitions have completed. | -{{< /bs-table >}} + ```js const myDropdown = document.getElementById('myDropdown') diff --git a/site/content/docs/5.3/components/list-group.md b/site/src/content/docs/components/list-group.mdx similarity index 54% rename from site/content/docs/5.3/components/list-group.md rename to site/src/content/docs/components/list-group.mdx index 7f7e1457c0ee..311c0a041c7c 100644 --- a/site/content/docs/5.3/components/list-group.md +++ b/site/src/content/docs/components/list-group.mdx @@ -1,98 +1,86 @@ --- -layout: docs title: List group description: List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within. -group: components toc: true --- +import { getData } from '@libs/data' + ## Basic example The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed. -{{< example >}} -
      -
    • An item
      • -
    • A second item
      • -
    • A third item
      • -
    • A fourth item
      • -
    • And a fifth one
      • -
    -{{< /example >}} + +
  • An item
    • +
  • A second item
    • +
  • A third item
    • +
  • A fourth item
    • +
  • And a fifth one
    • + `} /> ## Active items Add `.active` to a `.list-group-item` to indicate the current active selection. -{{< example >}} -
      -
    • An active item
      • -
    • A second item
      • -
    • A third item
      • -
    • A fourth item
      • -
    • And a fifth one
      • -
    -{{< /example >}} + +
  • An active item
    • +
  • A second item
    • +
  • A third item
    • +
  • A fourth item
    • +
  • And a fifth one
    • + `} /> ## Disabled items Add `.disabled` to a `.list-group-item` to make it _appear_ disabled. Note that some elements with `.disabled` will also require custom JavaScript to fully disable their click events (e.g., links). -{{< example >}} -
      -
    • A disabled item
      • -
    • A second item
      • -
    • A third item
      • -
    • A fourth item
      • -
    • And a fifth one
      • -
    -{{< /example >}} + +
  • A disabled item
    • +
  • A second item
    • +
  • A third item
    • +
  • A fourth item
    • +
  • And a fifth one
    • + `} /> ## Links and buttons -Use ``s or ` - - - - - -{{< /example >}} + + + The current link item + + A second link item + A third link item + A fourth link item + A disabled link item + `} /> + +With ` + + + + + `} /> ## Flush Add `.list-group-flush` to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards). -{{< example >}} -
      -
    • An item
      • -
    • A second item
      • -
    • A third item
      • -
    • A fourth item
      • -
    • And a fifth one
      • -
    -{{< /example >}} + +
  • An item
    • +
  • A second item
    • +
  • A third item
    • +
  • A fourth item
    • +
  • And a fifth one
    • + `} /> ## Numbered @@ -100,234 +88,206 @@ Add the `.list-group-numbered` modifier class (and optionally use an `
      ` elem Numbers are generated by `counter-reset` on the `
        `, and then styled and placed with a `::before` pseudo-element on the `
      1. ` with `counter-increment` and `content`. -{{< example >}} -
          -
        1. A list item
          2. -
        2. A list item
          3. -
        3. A list item
          4. -
        -{{< /example >}} + +
      2. A list item
        3. +
      3. A list item
        4. +
      4. A list item
        5. +
      `} /> These work great with custom content as well. -{{< example >}} -
        -
      1. -
        -
        Subheading
        - Content for list item -
        - 14 -
        2. -
      2. -
        -
        Subheading
        - Content for list item -
        - 14 -
        3. -
      3. -
        -
        Subheading
        - Content for list item -
        - 14 -
        4. -
      -{{< /example >}} + +
    1. +
      +
      Subheading
      + Content for list item +
      + 14 +
      2. +
    2. +
      +
      Subheading
      + Content for list item +
      + 14 +
      3. +
    3. +
      +
      Subheading
      + Content for list item +
      + 14 +
      4. +
    `} /> ## Horizontal -Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|xxl}` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.** +Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|xxl}` to make a list group horizontal starting at that breakpoint’s `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.** **ProTip:** Want equal-width list group items when horizontal? Add `.flex-fill` to each list group item. -{{< example >}} -{{< list-group.inline >}} -{{- range $.Site.Data.breakpoints }} -
      -
    • An item
      • -
    • A second item
      • -
    • A third item
      • -
    -{{- end -}} -{{< /list-group.inline >}} -{{< /example >}} + `
      +
    • An item
      • +
    • A second item
      • +
    • A third item
      • +
    `)} /> ## Variants -{{< callout info >}} + **Heads up!** As of v5.3.0, the `list-group-item-variant()` Sass mixin is deprecated. List group item variants now have their CSS variables overridden in [a Sass loop](#sass-loops). -{{< /callout >}} + Use contextual classes to style list items with a stateful background and color. -{{< example >}} -
      -
    • A simple default list group item
      • -{{< list.inline >}} -{{- range (index $.Site.Data "theme-colors") }} -
    • A simple {{ .name }} list group item
      • -{{- end -}} -{{< /list.inline >}} -
    -{{< /example >}} + +
  • A simple default list group item
    • + `, + ...getData('theme-colors').map((themeColor) => `
  • A simple ${themeColor.name} list group item
    • `), + `` + ]} /> ### For links and buttons Contextual classes also work with `.list-group-item-action` for `    ` and `
    -

    Woo-hoo, you're reading this text in a modal!

    +

    Woo-hoo, you’re reading this text in a modal!

    @@ -105,9 +101,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
    - +
    ```html @@ -148,7 +142,7 @@ When backdrop is set to static, the modal will not close when clicking outside o
    -

    I will not close if you click outside of me. Don't even try to press escape key.

    +

    I will not close if you click outside of me. Don’t even try to press escape key.

    @@ -159,9 +153,7 @@ When backdrop is set to static, the modal will not close when clicking outside o
    - +
    ```html @@ -192,7 +184,7 @@ When backdrop is set to static, the modal will not close when clicking outside o ### Scrolling long content -When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean. +When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.

    This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.

    -







































    +







































    This content should appear at the bottom after you scroll.

    @@ -241,9 +231,7 @@ You can also create a scrollable modal that allows scrolling the modal body by a
    - +
    ```html @@ -257,52 +245,46 @@ You can also create a scrollable modal that allows scrolling the modal body by a Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. -`} /> + +## Striped + +Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar’s background color. + + +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    `} /> + +## Animated stripes + +The striped gradient can also be animated. Add `.progress-bar-animated` to `.progress-bar` to animate the stripes right to left via CSS3 animations. + + +
    + `} /> + +## CSS + +### Variables + + + +As part of Bootstrap’s evolving CSS variables approach, progress bars now use local CSS variables on `.progress` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + + + +### Sass variables + + + +### Keyframes + +Used for creating the CSS animations for `.progress-bar-animated`. Included in `scss/_progress-bar.scss`. + + diff --git a/site/content/docs/5.3/components/scrollspy.md b/site/src/content/docs/components/scrollspy.mdx similarity index 81% rename from site/content/docs/5.3/components/scrollspy.md rename to site/src/content/docs/components/scrollspy.mdx index d1abf75e3e7d..ffaeca3629da 100644 --- a/site/content/docs/5.3/components/scrollspy.md +++ b/site/src/content/docs/components/scrollspy.mdx @@ -1,20 +1,18 @@ --- -layout: docs title: Scrollspy description: Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport. -group: components toc: true --- ## How it works -Scrollspy toggles the `.active` class on anchor (``) elements when the element with the `id` referenced by the anchor's `href` is scrolled into view. Scrollspy is best used in conjunction with a Bootstrap [nav component]({{< docsref "/components/navs-tabs" >}}) or [list group]({{< docsref "/components/list-group" >}}), but it will also work with any anchor elements in the current page. Here's how it works. +Scrollspy toggles the `.active` class on anchor (``) elements when the element with the `id` referenced by the anchor’s `href` is scrolled into view. Scrollspy is best used in conjunction with a Bootstrap [nav component]([[docsref:/components/navs-tabs]]) or [list group]([[docsref:/components/list-group]]), but it will also work with any anchor elements in the current page. Here’s how it works. - To start, scrollspy requires two things: a navigation, list group, or a simple set of links, plus a scrollable container. The scrollable container can be the `` or a custom element with a set `height` and `overflow-y: scroll`. - On the scrollable container, add `data-bs-spy="scroll"` and `data-bs-target="#navId"` where `navId` is the unique `id` of the associated navigation. If there is no focusable element inside the element, be sure to also include a `tabindex="0"` to ensure keyboard access. -- As you scroll the "spied" container, an `.active` class is added and removed from anchor links within the associated navigation. Links must have resolvable `id` targets, otherwise they're ignored. For example, a `home` must correspond to something in the DOM like `
    ` +- As you scroll the “spied” container, an `.active` class is added and removed from anchor links within the associated navigation. Links must have resolvable `id` targets, otherwise they’re ignored. For example, a `home` must correspond to something in the DOM like `
    ` - Target elements that are not visible will be ignored. See the [Non-visible elements](#non-visible-elements) section below. @@ -24,8 +22,7 @@ Scrollspy toggles the `.active` class on anchor (``) elements when the elemen Scroll the area below the navbar and watch the active class change. Open the dropdown menu and watch the dropdown items be highlighted as well. -
    -

    First heading

    -

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    +

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    Second heading

    -

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    +

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    Third heading

    -

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    +

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    Fourth heading

    -

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    +

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    Fifth heading

    -

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    -
    -
    +

    This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

    + `} /> ```html