diff options
| author | m5o <[email protected]> | 2018-01-16 00:49:36 +0200 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2018-03-12 21:50:21 +0200 |
| commit | b5e6eb22a6da98c489c00e6266daa4599e3ce097 (patch) | |
| tree | ca46ac63204c54c0e6c63a78f33f2a2262d82ac3 /docs/4.0/components/dropdowns.md | |
| parent | 7b2427cc6b790b2b66dee32ba55b8fa694b789e2 (diff) | |
| download | bootstrap-b5e6eb22a6da98c489c00e6266daa4599e3ce097.tar.xz bootstrap-b5e6eb22a6da98c489c00e6266daa4599e3ce097.zip | |
Use callout without custom Jekyll plugin.
Diffstat (limited to 'docs/4.0/components/dropdowns.md')
| -rw-r--r-- | docs/4.0/components/dropdowns.md | 15 |
1 files changed, 9 insertions, 6 deletions
diff --git a/docs/4.0/components/dropdowns.md b/docs/4.0/components/dropdowns.md index 80d461cac..137b2a726 100644 --- a/docs/4.0/components/dropdowns.md +++ b/docs/4.0/components/dropdowns.md @@ -591,9 +591,10 @@ Add `.disabled` to items in the dropdown to **style them as disabled**. By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu. -{% callout info %} +{% capture callout %} **Heads up!** Dropdowns are positioned thanks to Popper.js (except when they are contained in a navbar). -{% endcallout %} +{% endcapture %} +{% include callout.html content=callout type="info" %} {% example html %} <div class="btn-group"> @@ -736,9 +737,10 @@ Use `data-offset` or `data-reference` to change the location of the dropdown. Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent list item. The `data-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it. -{% callout info %} +{% capture callout %} On touch-enabled devices, opening a dropdown adds empty (`$.noop`) `mouseover` handlers to the immediate children of the `<body>` element. This admittedly ugly hack is necessary to work around a [quirk in iOS' event delegation](https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html), which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty `mouseover` handlers are removed. -{% endcallout %} +{% endcapture %} +{% include callout.html content=callout type="info" %} ### Via data attributes @@ -763,11 +765,12 @@ Call the dropdowns via JavaScript: $('.dropdown-toggle').dropdown() {% endhighlight %} -{% callout info %} +{% capture callout %} ##### `data-toggle="dropdown"` still required Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-toggle="dropdown"` is always required to be present on the dropdown's trigger element. -{% endcallout %} +{% endcapture %} +{% include callout.html content=callout type="info" %} ### Options |