diff options
| author | Johann-S <[email protected]> | 2016-10-24 10:57:32 +0200 |
|---|---|---|
| committer | Johann-S <[email protected]> | 2016-10-25 14:07:41 +0200 |
| commit | 9d129a43d6c24d9e60cc8fc7cfbddaaa4c586fdf (patch) | |
| tree | d2bebaf0ed5680d7a3c86c22e5528afde936a7de /docs/components/dropdowns.md | |
| parent | f11f630acd4b0cfad3188d125241a41b6ab11627 (diff) | |
| download | bootstrap-9d129a43d6c24d9e60cc8fc7cfbddaaa4c586fdf.tar.xz bootstrap-9d129a43d6c24d9e60cc8fc7cfbddaaa4c586fdf.zip | |
Use a single class name for opened/expanded/shown state of widgets
Diffstat (limited to 'docs/components/dropdowns.md')
| -rw-r--r-- | docs/components/dropdowns.md | 8 |
1 files changed, 4 insertions, 4 deletions
diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md index 68c388f21..621b666f1 100644 --- a/docs/components/dropdowns.md +++ b/docs/components/dropdowns.md @@ -21,7 +21,7 @@ Wrap the dropdown's toggle (your button or link) and the dropdown menu within `. Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here's how you can put them to work with either `<button>` elements: {% example html %} -<div class="dropdown open"> +<div class="dropdown active"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button> @@ -36,7 +36,7 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes. And with `<a>` elements: {% example html %} -<div class="dropdown open"> +<div class="dropdown active"> <a class="btn btn-secondary dropdown-toggle" href="https://example.com" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> @@ -407,7 +407,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element. Historically dropdown menu contents *had* to be links, but that's no longer the case with v4. Now you can optionally use `<button>` elements in your dropdowns instead of just `<a>`s. {% example html %} -<div class="dropdown open"> +<div class="dropdown active"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> @@ -480,7 +480,7 @@ Add `.disabled` to items in the dropdown to **style them as disabled**. ## Usage -Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.open` class on the parent list item. +Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.active` class on the parent list item. On mobile devices, opening a dropdown adds a `.dropdown-backdrop` as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. **This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile.** |