mirror of
https://github.com/twbs/bootstrap.git
synced 2025-03-13 13:29:25 +01:00
Docs: add missing twbs/examples
and change sorting (#38407)
* Docs: add missing twbs/examples * Change sorting of examples.yml --------- Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
parent
b62fd60a6d
commit
d0cc42c009
@ -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.
|
||||
|
@ -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>
|
||||
|
@ -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/)
|
||||
|
||||
|
@ -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: Parcel
|
||||
description: "Import and bundle Bootstrap's source Sass and JavaScript via Parcel."
|
||||
url: /examples/tree/main/parcel
|
||||
htmlIndexLocation: src
|
||||
- name: Vite
|
||||
description: "Import and bundle Bootstrap's source Sass and JavaScript with Vite."
|
||||
url: /examples/tree/main/vite
|
||||
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
|
||||
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
|
||||
- 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."
|
||||
|
Loading…
x
Reference in New Issue
Block a user