diff options
| author | Mark Otto <[email protected]> | 2015-04-25 22:04:08 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2015-04-25 22:04:08 -0700 |
| commit | ebad91b9b591756c13123c6a0c648dd72ffda4f0 (patch) | |
| tree | b18a713b0ab7f5e7a49aab8932f2f90cf0e03067 /docs/_includes/components/dropdowns.html | |
| parent | 2900711db49a801035855ab786c40a64f0ea93dc (diff) | |
| parent | d46f6dcbdc784fab3bd475cd9d559daa4cb60073 (diff) | |
| download | bootstrap-ebad91b9b591756c13123c6a0c648dd72ffda4f0.tar.xz bootstrap-ebad91b9b591756c13123c6a0c648dd72ffda4f0.zip | |
Merge pull request #16369 from vsn4ik/split_docs_dropup
DOCS: Separation of .dropdown and .dropup.
Diffstat (limited to 'docs/_includes/components/dropdowns.html')
| -rw-r--r-- | docs/_includes/components/dropdowns.html | 32 |
1 files changed, 19 insertions, 13 deletions
diff --git a/docs/_includes/components/dropdowns.html b/docs/_includes/components/dropdowns.html index 2ad269282..4c7255d68 100644 --- a/docs/_includes/components/dropdowns.html +++ b/docs/_includes/components/dropdowns.html @@ -4,7 +4,7 @@ <p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="../javascript/#dropdowns">dropdown JavaScript plugin</a>.</p> <h2 id="dropdowns-example">Example</h2> - <p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML. Dropdown menus can be changed to expand upwards (instead of downwards) by adding <code>.dropup</code> to the parent.</p> + <p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p> <div class="bs-example" data-example-id="static-dropdown"> <div class="dropdown clearfix"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> @@ -17,17 +17,6 @@ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> </ul> </div> - <div class="dropup clearfix"> - <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true"> - Dropdown - <span class="caret"></span> - </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2"> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> - <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> - </ul> - </div> </div><!-- /example --> {% highlight html %} <div class="dropdown"> @@ -42,9 +31,26 @@ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div> +{% endhighlight %} + + <p>Dropdown menus can be changed to expand upwards (instead of downwards) by adding <code>.dropup</code> to the parent.</p> + <div class="bs-example" data-example-id="static-dropup"> + <div class="dropup clearfix"> + <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true"> + Dropup + <span class="caret"></span> + </button> + <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2"> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> + </ul> + </div> + </div><!-- /example --> +{% highlight html %} <div class="dropup"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true"> - Dropdown + Dropup <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2"> |