diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2023-06-24 12:44:36 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2023-06-24 12:44:36 +0000 |
commit | c1d5a801b4bc66e3866f815be00e11d1b20d3539 (patch) | |
tree | 394cfedf644640ac80b78aaddaff93ceb8eefa5e /site/content/docs/5.3/getting-started/javascript.md | |
parent | Adding upstream version 5.2.3+dfsg. (diff) | |
download | bootstrap-html-c1d5a801b4bc66e3866f815be00e11d1b20d3539.tar.xz bootstrap-html-c1d5a801b4bc66e3866f815be00e11d1b20d3539.zip |
Adding upstream version 5.3.0+dfsg.upstream/5.3.0+dfsg
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r-- | site/content/docs/5.3/getting-started/javascript.md (renamed from site/content/docs/5.2/getting-started/javascript.md) | 59 |
1 files changed, 17 insertions, 42 deletions
diff --git a/site/content/docs/5.2/getting-started/javascript.md b/site/content/docs/5.3/getting-started/javascript.md index c4ba6b0..8efb2fb 100644 --- a/site/content/docs/5.2/getting-started/javascript.md +++ b/site/content/docs/5.3/getting-started/javascript.md @@ -19,6 +19,9 @@ While the Bootstrap CSS can be used with any framework, **the Bootstrap JavaScri A better alternative for those using this type of frameworks is to use a framework-specific package **instead of** the Bootstrap JavaScript. Here are some of the most popular options: - React: [React Bootstrap](https://react-bootstrap.github.io/) + {{< callout >}} + **Try it yourself!** Download the source code and working demo for using Bootstrap with React, Next.js, and React Bootstrap from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/react-nextjs). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/react-nextjs?file=src%2Fpages%2Findex.tsx). + {{< /callout >}} - Vue: [BootstrapVue](https://bootstrap-vue.org/) (currently only supports Vue 2 and Bootstrap 4) - Angular: [ng-bootstrap](https://ng-bootstrap.github.io/) @@ -30,6 +33,7 @@ A better alternative for those using this type of frameworks is to use a framewo 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 the browser, if your [targeted browsers support it](https://caniuse.com/es6-module). +<!-- eslint-skip --> ```html <script type="module"> import { Toast } from 'bootstrap.esm.min.js' @@ -54,6 +58,7 @@ Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relativ To fix this, you can use an `importmap` to resolve the arbitrary module names to complete paths. If your [targeted browsers](https://caniuse.com/?search=importmap) do not support `importmap`, you'll need to use the [es-module-shims](https://github.com/guybedford/es-module-shims) project. Here's how it works for Bootstrap and Popper: +<!-- eslint-skip --> ```html <!doctype html> <html lang="en"> @@ -65,13 +70,13 @@ To fix this, you can use an `importmap` to resolve the arbitrary module names to </head> <body> <h1>Hello, modularity!</h1> - <button id="popoverButton" 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!">Custom popover</button> + <button id="popoverButton" type="button" class="btn btn-primary btn-lg" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button> <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js" crossorigin="anonymous"></script> <script type="importmap"> { "imports": { - "@popperjs/core": "{{< param "cdn.popper" >}}", + "@popperjs/core": "{{< param "cdn.popper_esm" >}}", "bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@{{< param "current_version" >}}/dist/js/bootstrap.esm.min.js" } } @@ -125,7 +130,6 @@ All constructors accept an optional options object or nothing (which initiates a ```js const myModalEl = document.querySelector('#myModal') - const modal = new bootstrap.Modal(myModalEl) // initialized with defaults const configObject = { keyboard: false } @@ -232,42 +236,7 @@ Tooltips and Popovers use our built-in sanitizer to sanitize options which accep The default `allowList` value is the following: -```js -const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i -const DefaultAllowlist = { - // Global attributes allowed on any supplied element below. - '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN], - a: ['target', 'href', 'title', 'rel'], - area: [], - b: [], - br: [], - col: [], - code: [], - div: [], - em: [], - hr: [], - h1: [], - h2: [], - h3: [], - h4: [], - h5: [], - h6: [], - i: [], - img: ['src', 'srcset', 'alt', 'title', 'width', 'height'], - li: [], - ol: [], - p: [], - pre: [], - s: [], - small: [], - span: [], - sub: [], - sup: [], - strong: [], - u: [], - ul: [] -} -``` +{{< js-docs name="allow-list" file="js/src/util/sanitizer.js" >}} If you want to add new values to this default `allowList` you can do the following: @@ -302,11 +271,17 @@ const tooltip = new bootstrap.Tooltip(yourTooltipEl, { **You don't need jQuery in Bootstrap 5**, but it's still possible to use our components with jQuery. If Bootstrap detects `jQuery` in the `window` object, it'll add all of our components in jQuery's plugin system. This allows you to do the following: ```js -$('[data-bs-toggle="tooltip"]').tooltip() // to enable tooltips, with default configuration +// to enable tooltips with the default configuration +$('[data-bs-toggle="tooltip"]').tooltip() -$('[data-bs-toggle="tooltip"]').tooltip({ boundary: 'clippingParents', customClass: 'myClass' }) // to initialize tooltips with given configuration +// to initialize tooltips with given configuration +$('[data-bs-toggle="tooltip"]').tooltip({ + boundary: 'clippingParents', + customClass: 'myClass' +}) -$('#myTooltip').tooltip('show') // to trigger `show` method +// to trigger the `show` method +$('#myTooltip').tooltip('show') ``` The same goes for our other components. |