diff options
Diffstat (limited to 'docs/_includes/components/dropdowns.html')
| -rw-r--r-- | docs/_includes/components/dropdowns.html | 44 |
1 files changed, 38 insertions, 6 deletions
diff --git a/docs/_includes/components/dropdowns.html b/docs/_includes/components/dropdowns.html index 601b13d6a..f2ddfb28b 100644 --- a/docs/_includes/components/dropdowns.html +++ b/docs/_includes/components/dropdowns.html @@ -33,6 +33,38 @@ </div> {% endhighlight %} + <h3>Dropup Variation</h3> + <p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p> + + <h3 id="dropdowns-dropup-variation">Example</h3> + <div class="bs-example" data-example-id="static-dropdown"> + <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="dropup"> + <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> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> + </ul> +</div> +{% endhighlight %} + <h3 id="dropdowns-alignment">Alignment</h3> <p>By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add <code>.dropdown-menu-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p> <div class="bs-callout bs-callout-warning" id="callout-dropdown-positioning"> @@ -53,11 +85,11 @@ <p>Add a header to label sections of actions in any dropdown menu.</p> <div class="bs-example"> <div class="dropdown clearfix"> - <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true"> + <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-expanded="true"> Dropdown <span class="caret"></span> </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2"> + <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3"> <li role="presentation" class="dropdown-header">Dropdown header</li> <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> @@ -68,7 +100,7 @@ </div> </div><!-- /example --> {% highlight html %} -<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2"> +<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3"> ... <li role="presentation" class="dropdown-header">Dropdown header</li> ... @@ -104,11 +136,11 @@ <p>Add <code>.disabled</code> to a <code><li></code> in the dropdown to disable the link.</p> <div class="bs-example"> <div class="dropdown clearfix"> - <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-expanded="true"> + <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu4" data-toggle="dropdown" aria-expanded="true"> Dropdown <span class="caret"></span> </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3"> + <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li> <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li> @@ -116,7 +148,7 @@ </div> </div><!-- /example --> {% highlight html %} -<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3"> +<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li> <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li> |