diff options
| author | Mark Otto <[email protected]> | 2020-09-29 21:42:22 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2020-09-29 21:42:22 -0700 |
| commit | 614593c379c7ccdfebf7d15cdf0fbb2c46eb9311 (patch) | |
| tree | 8b61c54539f96255eb43a748669079490ebcb79c /site/docs/4.5/getting-started/introduction.md | |
| parent | f927a95b6ccbb12b812c0a6acc9b6d188acadb3b (diff) | |
| download | bootstrap-v4-sass-deps.tar.xz bootstrap-v4-sass-deps.zip | |
WIP: Add dependencies to our Sass filesv4-sass-deps
Diffstat (limited to 'site/docs/4.5/getting-started/introduction.md')
| -rw-r--r-- | site/docs/4.5/getting-started/introduction.md | 31 |
1 files changed, 6 insertions, 25 deletions
diff --git a/site/docs/4.5/getting-started/introduction.md b/site/docs/4.5/getting-started/introduction.md index 6e83611b1..c5e7ed07e 100644 --- a/site/docs/4.5/getting-started/introduction.md +++ b/site/docs/4.5/getting-started/introduction.md @@ -26,22 +26,9 @@ Copy-paste the stylesheet `<link>` into your `<head>` 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. We use [jQuery's slim build](https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/), but the full version is also supported. +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 `<script>`s near the end of your pages, right before the closing `</body>` tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins. -Place **one of the following `<script>`s** near the end of your pages, right before the closing `</body>` tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins. - -#### Bundle - -Include everything you need in one script with our bundle. 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. - -{% highlight html %} -<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script> -<script src="{{ site.cdn.js_bundle }}" integrity="{{ site.cdn.js_bundle_hash }}" crossorigin="anonymous"></script> -{% endhighlight %} - -#### Separate - -If you decide to go with the separate scripts solution, Popper.js must come first, and then our JavaScript plugins. +We use [jQuery's slim build](https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/), but the full version is also supported. {% highlight html %} <script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script> @@ -49,9 +36,9 @@ If you decide to go with the separate scripts solution, Popper.js must come firs <script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script> {% endhighlight %} -#### Components +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. -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. +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. <details> <summary class="text-primary mb-3">Show components requiring JavaScript</summary> @@ -90,17 +77,11 @@ Be sure to have your pages set up with the latest design and development standar <body> <h1>Hello, world!</h1> - <!-- Optional JavaScript; choose one of the two! --> - - <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) --> - <script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script> - <script src="{{ site.cdn.js_bundle }}" integrity="{{ site.cdn.js_bundle_hash }}" crossorigin="anonymous"></script> - - <!-- Option 2: jQuery, Popper.js, and Bootstrap JS + <!-- Optional JavaScript --> + <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script> <script src="{{ site.cdn.popper }}" integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"></script> <script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script> - --> </body> </html> {% endhighlight %} |