diff options
Diffstat (limited to 'site/content/docs/5.3/getting-started')
| -rw-r--r-- | site/content/docs/5.3/getting-started/download.md | 18 | ||||
| -rw-r--r-- | site/content/docs/5.3/getting-started/introduction.md | 13 | ||||
| -rw-r--r-- | site/content/docs/5.3/getting-started/javascript.md | 3 |
3 files changed, 23 insertions, 11 deletions
diff --git a/site/content/docs/5.3/getting-started/download.md b/site/content/docs/5.3/getting-started/download.md index a1b8bfd..f813e48 100644 --- a/site/content/docs/5.3/getting-started/download.md +++ b/site/content/docs/5.3/getting-started/download.md @@ -50,6 +50,24 @@ If you're using our compiled JavaScript and prefer to include Popper separately, <script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script> ``` +### Alternative CDNs + +We recommend [jsDelivr](https://www.jsdelivr.com/) and use it ourselves in our documentation. However, in some cases—like in some specific countries or environments—you may need to use other CDN providers like [cdnjs](https://cdnjs.com/) or [unpkg](https://unpkg.com/). + +You'll find the same files on these CDN providers, albeit with different URLs. With cdnjs, you can [use this direct Bootstrap package link](https://cdnjs.com/libraries/bootstrap) to copy and paste ready-to-use HTML snippets for each dist file from any version of Bootstrap. + +{{< callout warning>}} +**If the SRI hashes differ for a given file, you shouldn't use the files from that CDN, because it means that the file was modified by someone else.** +{{< /callout >}} + +Note that you should compare same length hashes, e.g. `sha384` with `sha384`, otherwise it's expected for them to be different. +As such, you can use an online tool like [SRI Hash Generator](https://www.srihash.org/) to make sure that the hashes are the same for a given file. +Alternatively, assuming you have OpenSSL installed, you can achieve the same from the CLI, for example: + +```sh +openssl dgst -sha384 -binary bootstrap.min.js | openssl base64 -A +``` + ## Package managers Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a [Sass compiler]({{< docsref "/getting-started/contribute#sass" >}}) and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions. diff --git a/site/content/docs/5.3/getting-started/introduction.md b/site/content/docs/5.3/getting-started/introduction.md index d296d18..538d319 100644 --- a/site/content/docs/5.3/getting-started/introduction.md +++ b/site/content/docs/5.3/getting-started/introduction.md @@ -75,20 +75,14 @@ You can also use the CDN to fetch any of our [additional builds listed in the Co ## Next steps - Read a bit more about some [important global environment settings](#important-globals) that Bootstrap utilizes. - - Read about what's included in Bootstrap in our [contents section]({{< docsref "/getting-started/contents/" >}}) and the list of [components that require JavaScript](#js-components) below. - - Need a little more power? Consider building with Bootstrap by [including the source files via package manager]({{< docsref "/getting-started/download#package-managers" >}}). - - Looking to use Bootstrap as a module with `<script type="module">`? Please refer to our [using Bootstrap as a module]({{< docsref "/getting-started/javascript#using-bootstrap-as-a-module" >}}) section. ## JS components -Curious which components explicitly require our JavaScript and Popper? Click the show components link below. If you're at all unsure about the general page structure, keep reading for an example page template. +Curious which components explicitly require our JavaScript and Popper? If you're at all unsure about the general page structure, keep reading for an example page template. -<details> -<summary class="bd-summary-link mb-3">Show components requiring JavaScript</summary> -{{< markdown >}} - Alerts for dismissing - Buttons for toggling states and checkbox/radio functionality - Carousel for all slide behaviors, controls, and indicators @@ -101,8 +95,6 @@ Curious which components explicitly require our JavaScript and Popper? Click the - Scrollspy for scroll behavior and navigation updates - Toasts for displaying and dismissing - Tooltips and popovers for displaying and positioning (also requires [Popper](https://popper.js.org/)) -{{< /markdown >}} -</details> ## Important globals @@ -154,7 +146,8 @@ For improved cross-browser rendering, we use [Reboot]({{< docsref "/content/rebo Stay up-to-date on the development of Bootstrap and reach out to the community with these helpful resources. - Read and subscribe to [The Official Bootstrap Blog]({{< param blog >}}). -- Ask and explore [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions). +- Ask questions and explore [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions). +- Discuss, ask questions, and more on [the community Discord](https://discord.gg/bZUvakRU3M) or [Bootstrap subreddit](https://reddit.com/r/bootstrap). - Chat with fellow Bootstrappers in IRC. On the `irc.libera.chat` server, in the `#bootstrap` channel. - Implementation help may be found at Stack Overflow (tagged [`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5)). - Developers should use the keyword `bootstrap` on packages that modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/search?q=keywords:bootstrap) or similar delivery mechanisms for maximum discoverability. diff --git a/site/content/docs/5.3/getting-started/javascript.md b/site/content/docs/5.3/getting-started/javascript.md index 80c222f..afa4ccd 100644 --- a/site/content/docs/5.3/getting-started/javascript.md +++ b/site/content/docs/5.3/getting-started/javascript.md @@ -22,7 +22,8 @@ A better alternative for those using this type of frameworks is to use a framewo {{< 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) +- Vue: [BootstrapVue](https://bootstrap-vue.org/) (Bootstrap 4) +- Vue 3: [BootstrapVueNext](https://bootstrap-vue-next.github.io/bootstrap-vue-next/) (Bootstrap 5, currently in alpha) - Angular: [ng-bootstrap](https://ng-bootstrap.github.io/) ## Using Bootstrap as a module |