mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-29 11:24:18 +01:00
463e02511b
possibly less confusing option, as per discussion, is to always show the dropdown trigger button (both live and in that code example)
107 lines
5.7 KiB
HTML
107 lines
5.7 KiB
HTML
<div class="bs-docs-section">
|
|
<h1 id="dropdowns" class="page-header">Dropdowns</h1>
|
|
|
|
<p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="../javascript/#dropdowns">dropdown JavaScript plugin</a>.</p>
|
|
|
|
<h3 id="dropdowns-example">Example</h3>
|
|
<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">
|
|
<div class="dropdown clearfix">
|
|
<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
|
|
Dropdown
|
|
<span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
|
|
<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" class="divider"></li>
|
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div><!-- /example -->
|
|
{% highlight html %}
|
|
<div class="dropdown">
|
|
<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
|
|
Dropdown
|
|
<span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
|
|
<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" class="divider"></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">
|
|
<h4>May require additional positioning</h4>
|
|
<p>Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain <code>overflow</code> properties or appear out of bounds of the viewport. Address these issues on your own as they arise.</p>
|
|
</div>
|
|
<div class="bs-callout bs-callout-warning">
|
|
<h4>Deprecated <code>.pull-right</code> alignment</h4>
|
|
<p>As of v3.1.0, we've deprecated <code>.pull-right</code> on dropdown menus. To right-align a menu, use <code>.dropdown-menu-right</code>. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use <code>.dropdown-menu-left</code>.</p>
|
|
</div>
|
|
{% highlight html %}
|
|
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
|
|
...
|
|
</ul>
|
|
{% endhighlight %}
|
|
|
|
<h3 id="dropdowns-headers">Headers</h3>
|
|
<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 dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
|
|
Dropdown
|
|
<span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
|
|
<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>
|
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
|
<li role="presentation" class="divider"></li>
|
|
<li role="presentation" class="dropdown-header">Dropdown header</li>
|
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div><!-- /example -->
|
|
{% highlight html %}
|
|
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
|
|
<li role="presentation" class="dropdown-header">Dropdown header</li>
|
|
...
|
|
<li role="presentation" class="divider"></li>
|
|
<li role="presentation" class="dropdown-header">Dropdown header</li>
|
|
...
|
|
</ul>
|
|
{% endhighlight %}
|
|
|
|
<h3 id="dropdowns-disabled">Disabled menu items</h3>
|
|
<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 dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown">
|
|
Dropdown
|
|
<span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
|
|
<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>
|
|
</ul>
|
|
</div>
|
|
</div><!-- /example -->
|
|
{% highlight html %}
|
|
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
|
|
<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>
|
|
</ul>
|
|
{% endhighlight %}
|
|
</div>
|