aboutsummaryrefslogtreecommitdiff
path: root/docs/components/dropdowns.md
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2017-05-26 22:28:09 -0700
committerMark Otto <[email protected]>2017-05-26 22:28:09 -0700
commit6c3f833076a9fa68601741e3e21bd07ad79b7d8a (patch)
treefe016946d77f9ffff15bbe9cdc593fd098b5bcc7 /docs/components/dropdowns.md
parentc581564a780974c6430ac5897740006f623f2277 (diff)
parent5d7db507396275fcda96935aff47b09e1d79ddc1 (diff)
downloadbootstrap-6c3f833076a9fa68601741e3e21bd07ad79b7d8a.tar.xz
bootstrap-6c3f833076a9fa68601741e3e21bd07ad79b7d8a.zip
Merge branch 'v4-docs-streamlined' of https://github.com/twbs/bootstrap into v4-docs-streamlined
Diffstat (limited to 'docs/components/dropdowns.md')
-rw-r--r--docs/components/dropdowns.md20
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.**