diff options
Diffstat (limited to 'docs/components/dropdowns.md')
| -rw-r--r-- | docs/components/dropdowns.md | 23 |
1 files changed, 12 insertions, 11 deletions
diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md index d43f5e17d..d26de6eef 100644 --- a/docs/components/dropdowns.md +++ b/docs/components/dropdowns.md @@ -1,6 +1,7 @@ --- layout: docs title: Dropdowns +description: Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin. group: components --- @@ -20,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> @@ -35,8 +36,8 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes. And with `<a>` elements: {% example html %} -<div class="dropdown open"> - <a class="btn btn-secondary dropdown-toggle" href="http://example.com" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> +<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> @@ -52,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> @@ -62,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> @@ -137,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"> @@ -150,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"> @@ -406,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> @@ -479,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.** |