diff options
| author | Johann-S <[email protected]> | 2019-03-03 12:01:29 +0200 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2019-03-11 17:59:08 +0200 |
| commit | ba9caacaa588cca41af9a899bca8a1020f784f18 (patch) | |
| tree | adabd646104f3acf48778d3ac4a7affe2d93f81f /site/docs/4.3/getting-started/javascript.md | |
| parent | e8684b55b8622473eca18b89d52cd1bc38bc7ef2 (diff) | |
| download | bootstrap-ba9caacaa588cca41af9a899bca8a1020f784f18.tar.xz bootstrap-ba9caacaa588cca41af9a899bca8a1020f784f18.zip | |
add docs about how to use the esm version
Diffstat (limited to 'site/docs/4.3/getting-started/javascript.md')
| -rw-r--r-- | site/docs/4.3/getting-started/javascript.md | 20 |
1 files changed, 20 insertions, 0 deletions
diff --git a/site/docs/4.3/getting-started/javascript.md b/site/docs/4.3/getting-started/javascript.md index 5659f6f93..bf9ebfe63 100644 --- a/site/docs/4.3/getting-started/javascript.md +++ b/site/docs/4.3/getting-started/javascript.md @@ -12,6 +12,26 @@ Plugins can be included individually (using Bootstrap's individual `js/dist/*.js If you use a bundler (Webpack, Rollup...), you can use `/js/dist/*.js` files which are UMD ready. +## Using Bootstrap as a module + +We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootstrap.esm.min.js`) which allows you to use Bootstrap as a module in your browser, if your [targeted browsers support it](https://caniuse.com/#feat=es6-module). + +{% highlight html %} +<script type="module"> + import { Toast } from 'bootstrap.esm.min.js' + + Array.from(document.querySelectorAll('.toast')) + .forEach(toastNode => new Toast(toastNode)) +</script> +{% endhighlight %} + +{% capture callout %} +## Incompatible plugins + +Due to browser limitations, some of our plugins, namely Dropdown, Tooltip and Popover plugins, cannot be used in a `<script>` tag with `module` type because they depend on Popper.js. For more information about the issue see [here](https://developers.google.com/web/fundamentals/primers/modules#specifiers). +{% endcapture %} +{% include callout.html content=callout type="warning" %} + ## Dependencies Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. |
