aboutsummaryrefslogtreecommitdiff
path: root/site
diff options
context:
space:
mode:
authorJulien Déramond <[email protected]>2023-04-05 08:10:47 +0200
committerGitHub <[email protected]>2023-04-05 09:10:47 +0300
commitd0cc42c009c2f680e2fdfd3df4cf06b90d0bfd09 (patch)
treedf87e51483f2260d5278805e4f4eef32438e2636 /site
parentb62fd60a6dd3e5171bf045e7dc0750fdd45a0b27 (diff)
downloadbootstrap-d0cc42c009c2f680e2fdfd3df4cf06b90d0bfd09.tar.xz
bootstrap-d0cc42c009c2f680e2fdfd3df4cf06b90d0bfd09.zip
Docs: add missing `twbs/examples` and change sorting (#38407)
* Docs: add missing twbs/examples * Change sorting of examples.yml --------- Co-authored-by: XhmikosR <[email protected]>
Diffstat (limited to 'site')
-rw-r--r--site/content/docs/5.3/customize/color-modes.md4
-rw-r--r--site/content/docs/5.3/examples/_index.md8
-rw-r--r--site/content/docs/5.3/getting-started/javascript.md3
-rw-r--r--site/data/examples.yml28
4 files changed, 30 insertions, 13 deletions
diff --git a/site/content/docs/5.3/customize/color-modes.md b/site/content/docs/5.3/customize/color-modes.md
index c6f9bef20..2f1b774cb 100644
--- a/site/content/docs/5.3/customize/color-modes.md
+++ b/site/content/docs/5.3/customize/color-modes.md
@@ -7,6 +7,10 @@ toc: true
added: "5.3"
---
+{{< callout >}}
+**Try it yourself!** Download the source code and working demo for using Bootstrap with Stylelint, and the color modes from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/color-modes). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/color-modes?file=index.html).
+{{< /callout >}}
+
## Dark mode
**Bootstrap now supports color modes, starting with dark mode!** With v5.3.0 you can implement your own color mode toggler (see below for an example from Bootstrap's docs) and apply the different color modes as you see fit. We support a light mode (default) and now dark mode. Color modes can be toggled globally on the `<html>` element, or on specific components and elements, thanks to the `data-bs-theme` attribute.
diff --git a/site/content/docs/5.3/examples/_index.md b/site/content/docs/5.3/examples/_index.md
index 2fa9a4528..c3c242312 100644
--- a/site/content/docs/5.3/examples/_index.md
+++ b/site/content/docs/5.3/examples/_index.md
@@ -32,11 +32,11 @@ aliases: "/examples/"
</h3>
<p class="text-body-secondary">{{ $example.description }}</p>
<p>
- {{- $htmlIndexLocation := "index.html" -}}
- {{- if $example.htmlIndexLocation -}}
- {{- $htmlIndexLocation = printf "%s/index.html" $example.htmlIndexLocation -}}
+ {{- $indexPath := "index.html" -}}
+ {{- if $example.indexPath -}}
+ {{- $indexPath = $example.indexPath -}}
{{- end }}
- <a class="icon-link small link-secondary link-offset-1" href="https://stackblitz.com/github/twbs{{ $example.url }}?file={{ $htmlIndexLocation | urlquery }}" target="_blank" rel="noopener">
+ <a class="icon-link small link-secondary link-offset-1" href="https://stackblitz.com/github/twbs{{ $example.url }}?file={{ $indexPath | urlquery }}" target="_blank" rel="noopener">
<svg class="bi flex-shrink-0"><use xlink:href="#lightning-charge-fill"></use></svg>
Edit in StackBlitz
</a>
diff --git a/site/content/docs/5.3/getting-started/javascript.md b/site/content/docs/5.3/getting-started/javascript.md
index ef3c3ba64..8efb2fb00 100644
--- a/site/content/docs/5.3/getting-started/javascript.md
+++ b/site/content/docs/5.3/getting-started/javascript.md
@@ -19,6 +19,9 @@ While the Bootstrap CSS can be used with any framework, **the Bootstrap JavaScri
A better alternative for those using this type of frameworks is to use a framework-specific package **instead of** the Bootstrap JavaScript. Here are some of the most popular options:
- React: [React Bootstrap](https://react-bootstrap.github.io/)
+ {{< callout >}}
+ **Try it yourself!** Download the source code and working demo for using Bootstrap with React, Next.js, and React Bootstrap from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/react-nextjs). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/react-nextjs?file=src%2Fpages%2Findex.tsx).
+ {{< /callout >}}
- Vue: [BootstrapVue](https://bootstrap-vue.org/) (currently only supports Vue 2 and Bootstrap 4)
- Angular: [ng-bootstrap](https://ng-bootstrap.github.io/)
diff --git a/site/data/examples.yml b/site/data/examples.yml
index 4b85c57b1..99d34752b 100644
--- a/site/data/examples.yml
+++ b/site/data/examples.yml
@@ -11,21 +11,31 @@
- name: Sass & ESM JS
description: "Import and compile Bootstrap's Sass with Autoprefixer and Stylelint, and compile our source JavaScript with an ESM shim."
url: /examples/tree/main/sass-js-esm
- - name: Webpack
- description: "Import and bundle Bootstrap's source Sass and JavaScript with Webpack."
- url: /examples/tree/main/webpack
- htmlIndexLocation: src
+ - name: Bootstrap color modes
+ description: "Import and compile Bootstrap's Sass with Stylelint, and the Bootstrap color modes."
+ url: /examples/tree/main/color-modes
+ - name: Bootstrap Icons
+ description: "Import and compile Bootstrap's Sass with Stylelint, PurgeCSS, and the Bootstrap Icons web font."
+ url: /examples/tree/main/icons-font
- name: Parcel
description: "Import and bundle Bootstrap's source Sass and JavaScript via Parcel."
url: /examples/tree/main/parcel
- htmlIndexLocation: src
+ indexPath: src/index.html
+ indexPath: src/index.html
+ - name: React
+ description: "Import and bundle Bootstrap's source Sass and JavaScript with React, Next.js, and React Bootstrap."
+ url: /examples/tree/main/react-nextjs
+ indexPath: src/pages/index.tsx
- name: Vite
description: "Import and bundle Bootstrap's source Sass and JavaScript with Vite."
url: /examples/tree/main/vite
- htmlIndexLocation: src
- - name: Bootstrap Icons
- description: "Import and compile Bootstrap's Sass with Stylelint, PurgeCSS, and the Bootstrap Icons web font."
- url: /examples/tree/main/icons-font
+ - name: Vue
+ description: "Import and bundle Bootstrap's source Sass and JavaScript with Vue and Vite."
+ url: /examples/tree/main/vue
+ - name: Webpack
+ description: "Import and bundle Bootstrap's source Sass and JavaScript with Webpack."
+ url: /examples/tree/main/webpack
+ indexPath: src/index.html
- category: Snippets
description: "Common patterns for building sites and apps that build on existing components and utilities with custom CSS and more."
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 04:46:08 +0000