diff options
| author | XhmikosR <[email protected]> | 2020-10-12 09:06:06 +0300 |
|---|---|---|
| committer | GitHub <[email protected]> | 2020-10-12 09:06:06 +0300 |
| commit | 5c6925385ee926a749ead6a4f2ebbfc64e701f36 (patch) | |
| tree | 162029a69460a3ceb18a27192377d8f47634f94f /site/content/docs/5.0/getting-started/javascript.md | |
| parent | c8523d71e7fa361ca478a27b3d0b55c1b7bf4212 (diff) | |
| download | bootstrap-5c6925385ee926a749ead6a4f2ebbfc64e701f36.tar.xz bootstrap-5c6925385ee926a749ead6a4f2ebbfc64e701f36.zip | |
Improve callout shortcode. (#31802)
Remove the `markdownify` call, and instead rely on Hugo's proper syntax; `{{% callout %}}` when we want to the content to be processed as Markdown.
This allows for stuff like:
{{% callout info %}}
##### I'm an info callout!
```css
.foo {
color: #fff;
}
```
{{< example >}}
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
</div>
{{< /example >}}
{{% /callout %}}
Diffstat (limited to 'site/content/docs/5.0/getting-started/javascript.md')
| -rw-r--r-- | site/content/docs/5.0/getting-started/javascript.md | 16 |
1 files changed, 8 insertions, 8 deletions
diff --git a/site/content/docs/5.0/getting-started/javascript.md b/site/content/docs/5.0/getting-started/javascript.md index 38b226623..836220363 100644 --- a/site/content/docs/5.0/getting-started/javascript.md +++ b/site/content/docs/5.0/getting-started/javascript.md @@ -25,11 +25,11 @@ We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootst </script> {{< /highlight >}} -{{< callout warning >}} +{{% callout warning %}} ## 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://v8.dev/features/modules#specifiers). -{{< /callout >}} +{{% /callout %}} ## Dependencies @@ -45,12 +45,12 @@ Bootstrap 5 is designed to be used without jQuery, but it's still possible to us Nearly all Bootstrap plugins can be enabled and configured through HTML alone with data attributes (our preferred way of using JavaScript functionality). Be sure to **only use one set of data attributes on a single element** (e.g., you cannot trigger a tooltip and modal from the same button.) -{{< callout warning >}} +{{% callout warning %}} ## Selectors Currently to query DOM elements we use the native methods `querySelector` and `querySelectorAll` for performance reasons, so you have to use [valid selectors](https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier). If you use special selectors, for example: `collapse:Example` be sure to escape them. -{{< /callout >}} +{{% /callout %}} ## Events @@ -68,7 +68,7 @@ myModal.addEventListener('show.bs.modal', function (e) { }) {{< /highlight >}} -{{< callout warning >}} +{{% callout warning %}} ## jQuery events Bootstrap will detect jQuery if `jQuery` is present in the `window` object and there is no `data-no-jquery` attribute set on `<body>`. If jQuery is found, Bootstrap will emit events thanks to jQuery's event system. So if you want to listen to Bootstrap's events, you'll have to use the jQuery methods (`.on`, `.one`) instead of `addEventListener`. @@ -78,7 +78,7 @@ $('#myTab a').on('shown.bs.tab', function () { // do something... }) {{< /highlight >}} -{{< /callout >}} +{{% /callout %}} ## Programmatic API @@ -151,11 +151,11 @@ bootstrap.Tooltip.VERSION // => "{{< param current_version >}}" Bootstrap's plugins don't fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use [`<noscript>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript) to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks. -{{< callout warning >}} +{{% callout warning %}} ##### Third-party libraries **Bootstrap does not officially support third-party JavaScript libraries** like Prototype or jQuery UI. Despite `.noConflict` and namespaced events, there may be compatibility problems that you need to fix on your own. -{{< /callout >}} +{{% /callout %}} ## Sanitizer |