mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-30 15:24:08 +03:00
Code Activity

Improve callout shortcode. (#31802)

Browse Source 
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 %}}
This commit is contained in:
XhmikosR
2020-10-12 09:06:06 +03:00
committed by GitHub
parent c8523d71e7
commit 5c6925385e
35 changed files with 131 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/5.0/getting-started/javascript.md
+8 -8
View File
@@ -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