diff options
Diffstat (limited to 'site')
| -rw-r--r-- | site/content/docs/5.3/customize/color-modes.md | 4 | ||||
| -rw-r--r-- | site/content/docs/5.3/examples/_index.md | 8 | ||||
| -rw-r--r-- | site/content/docs/5.3/getting-started/javascript.md | 3 | ||||
| -rw-r--r-- | site/data/examples.yml | 28 |
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." |