mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-12 00:08:59 +01:00
9f2aeafe85
Conflicts: Gruntfile.js dist/css/bootstrap-theme.css.map dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css dist/fonts/glyphicons-halflings-regular.svg docs/_includes/components/badges.html docs/_includes/components/input-groups.html docs/_includes/components/pagination.html docs/_includes/css/forms.html docs/_includes/footer.html docs/_includes/getting-started/browser-device-support.html docs/_includes/getting-started/grunt.html docs/_includes/home-nav.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/modal.html docs/_includes/js/popovers.html docs/_includes/js/tooltips.html docs/_includes/nav/getting-started.html docs/_includes/nav/javascript.html docs/assets/css/docs.min.css docs/assets/css/src/docs.css docs/assets/js/customize.min.js docs/assets/js/raw-files.min.js docs/browser-bugs.html docs/dist/css/bootstrap-theme.css.map docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/dist/fonts/glyphicons-halflings-regular.svg fonts/glyphicons-halflings-regular.svg less/_button-group.less less/_jumbotron.less less/_variables.less less/mixins/vendor-prefixes.less less/panels.less less/thumbnails.less package.json
101 lines
3.1 KiB
Markdown
101 lines
3.1 KiB
Markdown
---
|
|
layout: page
|
|
title: Dropdowns
|
|
---
|
|
|
|
Toggleable, contextual menu for displaying lists of links. Made interactive with the [dropdown JavaScript plugin]({{ site.bsaeurl }}javascript/#dropdowns).
|
|
|
|
### Example
|
|
|
|
Wrap the dropdown's trigger and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Then add the menu's HTML.
|
|
|
|
{% example html %}
|
|
<div class="dropdown">
|
|
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
|
|
Dropdown
|
|
</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>
|
|
</ul>
|
|
</div>
|
|
{% endexample %}
|
|
|
|
### Alignment
|
|
|
|
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu.
|
|
|
|
<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>
|
|
|
|
{% highlight html %}
|
|
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
|
|
...
|
|
</ul>
|
|
{% endhighlight %}
|
|
|
|
### Menu headers
|
|
|
|
Add a header to label sections of actions in any dropdown menu.
|
|
|
|
{% example html %}
|
|
<ul class="dropdown-menu" role="menu">
|
|
<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>
|
|
</ul>
|
|
{% endexample %}
|
|
|
|
### Menu dividers
|
|
|
|
Separate groups of related menu items with a divider.
|
|
|
|
{% example html %}
|
|
<ul class="dropdown-menu" role="menu">
|
|
<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="dropdown-divider"></li>
|
|
<li role="presentation">
|
|
<a role="menuitem" tabindex="-1" href="#">Separated link</a>
|
|
</li>
|
|
</ul>
|
|
{% endexample %}
|
|
|
|
### Disabled menu items
|
|
|
|
Add `.disabled` to a `<li>` in the dropdown to disable the link.
|
|
|
|
{% example html %}
|
|
<ul class="dropdown-menu" role="menu">
|
|
<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>
|
|
{% endexample %}
|