mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-05 16:42:29 +03:00
Code Activity

Use callout without custom Jekyll plugin.

Browse Source
This commit is contained in:
m5o
2018-01-16 00:49:36 +02:00
committed by XhmikosR
parent 7b2427cc6b
commit b5e6eb22a6
30 changed files with 110 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/4.0/components/dropdowns.md
+9 -6
View File
@@ -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