From: Mark Otto Date: Tue, 2 Jun 2026 06:12:17 +0000 (-0700) Subject: v6: More docs updates (#42450) X-Git-Url: http://git.ipfire.org/gitweb/index.cgi?a=commitdiff_plain;h=c6919d20a6b23d02aa2c9682b8dc7e6bf54de9f3;p=thirdparty%2Fbootstrap.git v6: More docs updates (#42450) * Add "new" badge to Stepper It's new. * Remove commented out * Rearrange docs sidebar again to remove components groups, tweak a few things * New default components page * Fix swatch, update some content * Revamp how we're doing themes in docs to be more instant --------- Co-authored-by: nextgenthemes --- diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index e3dd2e1eda..3be5874321 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -7,12 +7,10 @@ icon_color: indigo pages: - title: Install - # - title: Introduction - title: Approach - title: CSS variables - title: JavaScript - title: Accessibility - # - title: Community - title: Guides section: Guides @@ -111,64 +109,54 @@ icon: menu-button-wide-fill icon_color: cyan pages: - - group: Buttons - pages: - - title: Buttons - - title: Button group - - title: Close button - - group: Feedback - pages: - - title: Alert - - title: Badge - - title: Placeholder - - title: Progress - - title: Spinner - - group: Overlays - pages: - - title: Menu - meta: - - added: 6.0.0 - - title: Dialog - meta: - - added: 6.0.0 - - title: Drawer - meta: - - added: 6.0.0 - - title: Popover - - title: Toasts - - title: Tooltip - - group: Navigation - pages: - - title: Breadcrumb - - title: Nav - - title: Tab - - title: Nav overflow - meta: - - added: 6.0.0 - - title: Navbar - meta: - - added: 6.0.0 - - title: Pagination - - title: Stepper - - group: Layout - pages: - - title: Card - - title: List group - - group: Interactions - pages: - - title: Accordion - - title: Carousel - - title: Collapse - - title: Scrollspy - - title: Toggler - meta: - - added: 6.0.0 + - title: Accordion + meta: + - added: 6.0.0 + - title: Alert + - title: Avatar + meta: + - added: 6.0.0 + - title: Badge + - title: Breadcrumb + - title: Button + - title: Button group + - title: Card + - title: Carousel + - title: Close button + - title: Collapse + - title: Dialog + meta: + - added: 6.0.0 + - title: Drawer + meta: + - added: 6.0.0 + - title: List group + - title: Menu + meta: + - added: 6.0.0 + - title: Nav + - title: Nav overflow + meta: + - added: 6.0.0 + - title: Navbar + meta: + - added: 6.0.0 - - group: Miscellaneous - pages: - - title: Avatar - meta: - - added: 6.0.0 + - title: Pagination + - title: Placeholder + - title: Popover + - title: Progress + - title: Scrollspy + - title: Spinner + - title: Stepper + meta: + - added: 6.0.0 + - title: Tab + - title: Toasts + - title: Toggler + meta: + - added: 6.0.0 + - title: Tooltip - title: Helpers section: Helpers diff --git a/site/src/assets/application.js b/site/src/assets/application.js index 2a758ca314..6ec0266da4 100644 --- a/site/src/assets/application.js +++ b/site/src/assets/application.js @@ -10,11 +10,13 @@ import sidebarScroll from './partials/sidebar.js' import snippets from './partials/snippets.js' import stickyNav from './partials/sticky.js' +import theme from './partials/theme.js' import tocDrawer from './partials/toc.js' export default () => { sidebarScroll() snippets() stickyNav() + theme() tocDrawer() } diff --git a/site/src/assets/partials/theme.js b/site/src/assets/partials/theme.js new file mode 100644 index 0000000000..836d46fbe7 --- /dev/null +++ b/site/src/assets/partials/theme.js @@ -0,0 +1,28 @@ +// NOTICE: Internal docs helpers — not shipped in Bootstrap; not for reuse. + +/* + * JavaScript for Bootstrap's docs (https://getbootstrap.com/) + * Copyright 2011-2026 The Bootstrap Authors + * Licensed under the Creative Commons Attribution 3.0 Unported License. + * For details, see https://creativecommons.org/licenses/by/3.0/. + */ + +import { Menu } from '@bootstrap' + +export default () => { + const themeSwitcher = document.getElementById('bd-theme') + + if (!themeSwitcher) { + return + } + + document.addEventListener('click', event => { + const toggle = event.target.closest('[data-bs-theme-value]') + + if (!toggle) { + return + } + + Menu.getOrCreateInstance(themeSwitcher).hide() + }, true) +} diff --git a/site/src/components/DocsSidebar.astro b/site/src/components/DocsSidebar.astro index 4da2d840b4..9c2c7581b7 100644 --- a/site/src/components/DocsSidebar.astro +++ b/site/src/components/DocsSidebar.astro @@ -19,7 +19,7 @@ const sidebar = getData('sidebar') {group.icon && ( ` and `` elements. toc: true +aliases: + - "/docs/[[config:docs_version]]/components/" + - "/docs/components/" + - "/components/" css_layer: components --- diff --git a/site/src/content/docs/components/buttons.mdx b/site/src/content/docs/components/button.mdx similarity index 99% rename from site/src/content/docs/components/buttons.mdx rename to site/src/content/docs/components/button.mdx index 8b482e74ac..c32e0c020c 100644 --- a/site/src/content/docs/components/buttons.mdx +++ b/site/src/content/docs/components/button.mdx @@ -1,10 +1,8 @@ --- -title: Buttons +title: Button description: Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. aliases: - - "/docs/[[config:docs_version]]/components/" - - "/docs/components/" - - "/components/" + - "/docs/[[config:docs_version]]/components/buttons/" toc: true css_layer: components --- diff --git a/site/src/content/docs/customize/color-modes.mdx b/site/src/content/docs/customize/color-modes.mdx index 58aa8c838c..875e1cce5a 100644 --- a/site/src/content/docs/customize/color-modes.mdx +++ b/site/src/content/docs/customize/color-modes.mdx @@ -1,6 +1,6 @@ --- title: Color modes -description: Bootstrap now supports color modes, or themes, as of v5.3.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template. +description: Bootstrap supports light and dark color modes. Dark mode is available globally by default, but can also be applied to specific components and elements via `data-bs-theme` attribute. toc: true --- diff --git a/site/src/content/docs/customize/theme.mdx b/site/src/content/docs/customize/theme.mdx index b77652b660..32c9de2664 100644 --- a/site/src/content/docs/customize/theme.mdx +++ b/site/src/content/docs/customize/theme.mdx @@ -1,6 +1,6 @@ --- title: Theme -description: The Bootstrap theme is a set of semantically named colors that are used to style our components, utilities, and more. The theme is configurable, responds to color modes, and can be consumed via Sass or CSS. +description: The Bootstrap theme is a set of semantically named tokens that are used to style our components, utilities, and more. The theme is configurable, responds to color modes, and can be consumed via Sass or CSS. toc: true --- diff --git a/site/src/content/docs/guides/quickstart.mdx b/site/src/content/docs/guides/quickstart.mdx index 50f56aedf5..0ba6085846 100644 --- a/site/src/content/docs/guides/quickstart.mdx +++ b/site/src/content/docs/guides/quickstart.mdx @@ -1,6 +1,7 @@ --- title: CDN Quickstart description: The official guide for how to include Bootstrap’s CSS and JavaScript in your project using a CDN. +toc: true aliases: - "/docs/[[config:docs_version]]/guides/" - "/docs/guides/" @@ -9,9 +10,11 @@ aliases: Get started using Bootstrap in seconds by including our production-ready CSS and JavaScript by [using a CDN]([[docsref:/getting-started/install#cdn]]) without the need for any build steps. CDNs provide copies of Bootstrap’s codebase that’s ready to be used in any environment with minimal code changes required on your part. - -**Got the gist already?** See the end result in this [Bootstrap CodePen demo](https://codepen.io/team/bootstrap/pen/qBamdLj). - +## Live demo + +**Already familiar with setting up HTML pages?** See the end result in this [Bootstrap CodePen demo](https://codepen.io/team/bootstrap/pen/qBamdLj). + +## Steps 1. **Create a new `index.html` file in your project root.** Include the `` tag as well for [proper responsive behavior](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport) in mobile devices. @@ -62,3 +65,43 @@ Get started using Bootstrap in seconds by including our production-ready CSS and ``` 3. **Hello, world!** Open the page in your browser of choice to see your Bootstrapped page. Now you can start building with Bootstrap by creating your own [layout]([[docsref:/layout/grid]]), adding dozens of [components]([[docsref:/components/buttons]]), and utilizing [our official examples]([[docsref:/examples]]). + +## Optional font + +Bootstrap's source code defaults to a [native font stack]([[docsref:/content/reboot#native-font-stack]]), but we use a custom font for our hosted documentation to for more consistent styling across platforms. We use [Geist](https://fonts.google.com/specimen/Geist) and Geist Mono, and recommend using the same or similar in your project. + +1. **Add the Geist web font from Google Fonts.** Add the following to your ``, before Bootstrap’s CSS: + + ```html + + + + + + Bootstrap demo + + + + + + +

Hello, world!

+ + + + ``` + +2. **Apply the fonts by overriding Bootstrap’s CSS variables.** You can do this in a ` + ``` + + You can also do the same in your custom Sass file should you graduate from a CDN setup to one that includes Bootstrap via a package manager. + +Learn more about Bootstrap’s typography defaults in [Typography]([[docsref:/content/typography]]) and [Reboot]([[docsref:/content/reboot#native-font-stack]]). diff --git a/site/src/libs/highlight.ts b/site/src/libs/highlight.ts index c643c73ce1..0629bf26a6 100644 --- a/site/src/libs/highlight.ts +++ b/site/src/libs/highlight.ts @@ -58,6 +58,7 @@ export async function highlightCode( light: { ...(bootstrapLight as any), name: '' }, dark: { ...(bootstrapDark as any), name: '' } }, + defaultColor: 'light-dark()', transformers }) diff --git a/site/src/scss/_ads.scss b/site/src/scss/_ads.scss index 009dd25d67..e6df8dbb23 100644 --- a/site/src/scss/_ads.scss +++ b/site/src/scss/_ads.scss @@ -2,21 +2,13 @@ // stylelint-disable selector-max-id, declaration-no-important -// -// Carbon ads -// - @layer custom { #carbon-responsive .carbon-responsive-wrap { padding: 1rem !important; background-color: var(--bs-bg-1) !important; border: 0 !important; - @include border-radius(var(--radius-7) !important); + @include border-radius(var(--radius-8) !important); } - // #carbon-responsive a, - // .carbon-description { - // color: var(--bs-fg-1) !important; - // } .carbon-img { position: relative; overflow: hidden; diff --git a/site/src/scss/_navbar.scss b/site/src/scss/_navbar.scss index 6dd8627475..a38dafd71f 100644 --- a/site/src/scss/_navbar.scss +++ b/site/src/scss/_navbar.scss @@ -3,7 +3,7 @@ @layer custom { :root { - --bd-navbar-offset: 6rem; + --bd-navbar-offset: 5.75rem; } body { diff --git a/site/src/scss/_sidebar.scss b/site/src/scss/_sidebar.scss index ed9c61fafe..4652f81e1e 100644 --- a/site/src/scss/_sidebar.scss +++ b/site/src/scss/_sidebar.scss @@ -38,7 +38,7 @@ } .nav-link { - margin-inline-start: 1rem; + margin-inline-start: .75rem; } @include media-breakpoint-between(xs, lg) { @@ -65,7 +65,7 @@ } .bd-links-subgroup { - margin-inline-start: 1.75rem; + margin-inline-start: 1.5rem; color: var(--bs-fg-body); } diff --git a/site/src/scss/_syntax.scss b/site/src/scss/_syntax.scss index 4900b5449e..f4091550b5 100644 --- a/site/src/scss/_syntax.scss +++ b/site/src/scss/_syntax.scss @@ -39,17 +39,8 @@ background-color: color-mix(in oklch, var(--primary-bg) 10%, transparent); } -// Dark mode theming for Shiki -// When using dual themes, Shiki generates inline styles with CSS variables -// We need to switch from the light theme vars to dark theme vars [data-bs-theme="dark"] { --shell-prompt-color: #868e96; - - .astro-code span, - .astro-code-themes span { - // Override Shiki's inline color with the dark theme color - color: var(--shiki-dark) !important; // stylelint-disable-line declaration-no-important - } } // Shell prompts - these work with Shiki's transformer that adds .line class diff --git a/site/static/docs/[version]/assets/js/color-modes.js b/site/static/docs/[version]/assets/js/color-modes.js index cbedd7d8e3..ed862c4ded 100644 --- a/site/static/docs/[version]/assets/js/color-modes.js +++ b/site/static/docs/[version]/assets/js/color-modes.js @@ -19,11 +19,19 @@ return 'auto' } - const setTheme = theme => { + const resolveTheme = theme => { if (theme === 'auto') { - document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')) - } else { - document.documentElement.setAttribute('data-bs-theme', theme) + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' + } + + return theme + } + + const setTheme = theme => { + const resolved = resolveTheme(theme) + + if (document.documentElement.getAttribute('data-bs-theme') !== resolved) { + document.documentElement.setAttribute('data-bs-theme', resolved) } } @@ -70,8 +78,11 @@ toggle.addEventListener('click', () => { const theme = toggle.getAttribute('data-bs-theme-value') setStoredTheme(theme) - setTheme(theme) - showActiveTheme(theme, true) + + requestAnimationFrame(() => { + setTheme(theme) + showActiveTheme(theme) + }) }) }) })