From f927a95b6ccbb12b812c0a6acc9b6d188acadb3b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 28 Sep 2020 00:57:42 -0700 Subject: [PATCH] Backport #31300 (#31769) * Manually backport JS bundle guidance Co-authored-by: XhmikosR --- site/docs/4.5/getting-started/download.md | 5 +-- site/docs/4.5/getting-started/introduction.md | 31 +++++++++++++++---- site/index.html | 9 +++--- 3 files changed, 32 insertions(+), 13 deletions(-) diff --git a/site/docs/4.5/getting-started/download.md b/site/docs/4.5/getting-started/download.md index fc5b938190..7e0cb4a1eb 100644 --- a/site/docs/4.5/getting-started/download.md +++ b/site/docs/4.5/getting-started/download.md @@ -40,14 +40,15 @@ Skip the download with [BootstrapCDN](https://www.bootstrapcdn.com/) to deliver {% highlight html %} - + {% endhighlight %} -If you're using our compiled JavaScript, don't forget to include jQuery and Popper.js, via a CDN preferably, before our JS. +If you're using our compiled JavaScript and prefer to include Popper.js separately, add Popper.js before our JS, via a CDN preferably. {% highlight html %} + {% endhighlight %} ## Package managers diff --git a/site/docs/4.5/getting-started/introduction.md b/site/docs/4.5/getting-started/introduction.md index c5e7ed07e8..6e83611b1a 100644 --- a/site/docs/4.5/getting-started/introduction.md +++ b/site/docs/4.5/getting-started/introduction.md @@ -26,9 +26,22 @@ Copy-paste the stylesheet `` into your `` before all other styleshee ### JS -Many of our components require the use of JavaScript to function. Specifically, they require [jQuery](https://jquery.com/), [Popper.js](https://popper.js.org/), and our own JavaScript plugins. Place the following ` + +{% endhighlight %} + +#### Separate + +If you decide to go with the separate scripts solution, Popper.js must come first, and then our JavaScript plugins. {% highlight html %} @@ -36,9 +49,9 @@ We use [jQuery's slim build](https://blog.jquery.com/2016/06/09/jquery-3-0-final {% endhighlight %} -Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you're at all unsure about the general page structure, keep reading for an example page template. +#### Components -Our `bootstrap.bundle.js` and `bootstrap.bundle.min.js` include [Popper](https://popper.js.org/), but not [jQuery](https://jquery.com/). For more information about what's included in Bootstrap, please see our [contents]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/contents/#precompiled-bootstrap) section. +Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you're unsure about the page structure, keep reading for an example page template.
Show components requiring JavaScript @@ -77,11 +90,17 @@ Be sure to have your pages set up with the latest design and development standar

Hello, world!

- - + + + + + + + {% endhighlight %} diff --git a/site/index.html b/site/index.html index a626864298..23850bcf85 100644 --- a/site/index.html +++ b/site/index.html @@ -61,19 +61,18 @@ gem install bootstrap -v {{ site.current_ruby_version }} When you only need to include Bootstrap’s compiled CSS or JS, you can use BootstrapCDN.

- See it in action with our simple starter template, or browse the examples to jumpstart your next project. + See it in action with our simple starter template, or browse the examples to jumpstart your next project. You can also choose to include Popper.js and our JS separately.

Explore the docs
{% highlight html %} - + - + - - + {% endhighlight %}