diff options
Diffstat (limited to 'docs/components/dropdowns.md')
| -rw-r--r-- | docs/components/dropdowns.md | 20 |
1 files changed, 10 insertions, 10 deletions
diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md index 68c388f21..d26de6eef 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 show"> <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 show"> <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> @@ -53,7 +53,7 @@ The best part is you can do this with any button variant, too: <div class="bd-example"> <div class="btn-group"> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default</button> + <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> @@ -63,7 +63,7 @@ The best part is you can do this with any button variant, too: </div> </div><!-- /btn-group --> <div class="btn-group"> - <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button> + <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> @@ -138,8 +138,8 @@ We use this extra class to reduce the horizontal `padding` on either side of the <div class="bd-example"> <div class="btn-group"> - <button type="button" class="btn btn-secondary">Default</button> - <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <button type="button" class="btn btn-primary">Primary</button> + <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> @@ -151,8 +151,8 @@ We use this extra class to reduce the horizontal `padding` on either side of the </div> </div><!-- /btn-group --> <div class="btn-group"> - <button type="button" class="btn btn-primary">Primary</button> - <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <button type="button" class="btn btn-secondary">Secondary</button> + <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> @@ -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 show"> <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 `.show` 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.** |