diff options
| author | XhmikosR <xhmikosr@gmail.com> | 2022-03-15 11:07:11 +0300 |
|---|---|---|
| committer | Mark Otto <markdotto@gmail.com> | 2022-05-20 23:35:44 +0300 |
| commit | 0672ec7910eca0ceb586664af40dd7fcb41787a1 (patch) | |
| tree | cb13d09f71f74f3b70e193d6389a45d35a44453d | |
| parent | 93acc734d893f18b03ab451136216aa86f5f9982 (diff) | |
Update javascript.md
| -rw-r--r-- | site/content/docs/5.2/getting-started/javascript.md | 52 |
1 files changed, 26 insertions, 26 deletions
diff --git a/site/content/docs/5.2/getting-started/javascript.md b/site/content/docs/5.2/getting-started/javascript.md index 8768b9a4a8..16af23ce03 100644 --- a/site/content/docs/5.2/getting-started/javascript.md +++ b/site/content/docs/5.2/getting-started/javascript.md @@ -38,37 +38,37 @@ We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootst {{< callout warning >}} ## Dependencies for vanilla ESM in the browser requires an `importmap` -In order to support build tools, NPM dependencies, etc - external dependencies such as PopperJs are `import`ed with their NPM package name (e.g. `@popperjs/core`), to make this work in the browser you need to define an `importmap` which resolves arbitrary names to fully-qualified or relative URIs. +In order to support build tools, npm dependencies - external dependencies such as Popper are `import`ed with their npm package name (e.g. `@popperjs/core`), to make this work in the browser you need to define an `importmap` which resolves arbitrary names to fully-qualified or relative URIs. -If your [targeted browsers](https://caniuse.com/?search=importmap) do not support `importmap` then you will need to use the [es-module-shims](https://github.com/guybedford/es-module-shims) library. For example: +If your [targeted browsers](https://caniuse.com/?search=importmap) do not support `importmap` then you will need to use the [es-module-shims](https://github.com/guybedford/es-module-shims) library. For example: ```html <!doctype html> <html lang="en"> - <head> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha256-YvdLHPgkqJ8DVUxjjnGVlMMJtNimJ6dYkowFFvp4kKs=" crossorigin="anonymous"> - <title>Hello, modularity!</title> - </head> - <body> - <h1>Hello, modularity!</h1> - <button id="pops" type="button" class="btn btn-primary btn-lg" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Pop, over</button> - - <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1.4.7/dist/es-module-shims.js" integrity="sha256-nSakAbR1isjLi28AfJqaTRXkE1yTLYyjx785E+nX9mo=" crossorigin="anonymous"></script> - <script type="importmap"> - { - "imports": { - "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.4/dist/esm/index.js", - "@twbs/bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.esm.min.js" - } - } - </script> - <script type="module"> - import * as bootstrap from '@twbs/bootstrap' - - new bootstrap.Popover(document.getElementById('pops')) - </script> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link href="{{< param "cdn.css" >}}" rel="stylesheet" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous"> + <title>Hello, modularity!</title> + </head> + <body> + <h1>Hello, modularity!</h1> + <button id="popoverButtton" type="button" class="btn btn-primary btn-lg" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Pop, over</button> + + <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.js" crossorigin="anonymous"></script> + <script type="importmap"> + { + "imports": { + "@popperjs/core": "{{< param "cdn.popper" >}}", + "@twbs/bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@{{< param "current_version" >}}/dist/js/bootstrap.esm.min.js" + } + } + </script> + <script type="module"> + import * as bootstrap from '@twbs/bootstrap' + + new bootstrap.Popover(document.getElementById('popoverButtton')) + </script> </body> </html> ``` |