kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Rewrite quick start JS sections in getting started page so things are more clearly organized

Browse source
This commit is contained in:
Mark Otto 2020-09-14 15:19:29 -07:00 committed by XhmikosR
parent 85d00e6d85
commit e3b7880abf
1 changed files with 17 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
site/content/docs/5.0/getting-started/introduction.md
View file

@ -24,22 +24,32 @@ Copy-paste the stylesheet `<link>` into your `<head>` before all other styleshee
### JS ### JS
Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and [Popper.js](https://popper.js.org/). Place **one of following `<script>`s** near the end of your pages, right before the closing `</body>` tag, to enable them. If you decide to go with the separate scripts solution, Popper.js must come first, and then our JavaScript plugins. Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and [Popper.js](https://popper.js.org/). Place **one of following `<script>`s** near the end of your pages, right before the closing `</body>` tag, to enable them.
#### 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/). For more information about what's included in Bootstrap, please see our [contents]({{< docsref "/getting-started/contents#precompiled-bootstrap" >}}) section.
{{< highlight html >}} {{< highlight html >}}
<script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script> <script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script>
{{< /highlight >}} {{< /highlight >}}
#### Separate
If you decide to go with the separate scripts solution, Popper.js must come first, and then our JavaScript plugins.
{{< highlight html >}} {{< highlight html >}}
<script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script> <script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script>
<script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script> <script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script>
{{< /highlight >}} {{< /highlight >}}
#### Modules
If you use `<script type="module">`, please refer to our [using Bootstrap as a module]({{< docsref "/getting-started/javascript#using-bootstrap-as-a-module" >}}) section. If you use `<script type="module">`, please refer to our [using Bootstrap as a module]({{< docsref "/getting-started/javascript#using-bootstrap-as-a-module" >}}) section.
Curious which components explicitly require our JavaScript 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/). For more information about what's included in Bootstrap, please see our [contents]({{< docsref "/getting-started/contents#precompiled-bootstrap" >}}) section. Curious which components explicitly require our JavaScript 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.
{{< partial "getting-started/components-requiring-javascript" >}} {{< partial "getting-started/components-requiring-javascript" >}}
@ -64,12 +74,14 @@ Be sure to have your pages set up with the latest design and development standar
<h1>Hello, world!</h1> <h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! --> <!-- Optional JavaScript; choose one of the two! -->
<!-- Bootstrap Bundle with Popper.js -->
<!-- Option 1: Bootstrap Bundle with Popper.js -->
<script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script> <script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script>
<!-- Or Popper.js first, then Bootstrap JS --> <!-- Option 2: Separate Popper.js and Bootstrap JS
<script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script> <script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script>
<script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script> <script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script>
-->
</body> </body>
</html> </html>
{{< /highlight >}} {{< /highlight >}}