Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix issue #15597 — Mention dropup variation in dropdown docs #15659

Closed
wants to merge 17 commits into from
Closed

Fix issue #15597 — Mention dropup variation in dropdown docs #15659

Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
b9bd82b
patch dropdowns for #7118
fat May 17, 2013
c9789f7
update versioning to 2.3.2
fat May 17, 2013
d9b502d
missed a few 2.3.1's
fat May 17, 2013
60b202d
Fix link to Bower in readme
mdo Jun 6, 2013
de683e9
Update README.md
mdo Jun 14, 2013
befcbf5
Merge branch 'master' of github.com:twbs/bootstrap
Jan 23, 2015
96f904a
Fix issue #15597 — Mention dropup variation in dropdown docs
kkirsche Jan 23, 2015
b240a4d
Replace single line comment with subsection
Jan 23, 2015
ad196b4
Fix duplicate ID's
Jan 23, 2015
899d6c3
Missed an aria label
Jan 23, 2015
a30dd2e
There's already a dropdownMenu2
Jan 23, 2015
58d550a
So many dropdown menus…
Jan 23, 2015
cb96844
Fix issue #15597 — Mention dropup variation in dropdown docs
kkirsche Jan 23, 2015
c9b8a3f
Merge branch 'patch-4' of github.com:kkirsche/bootstrap into patch-4
Jan 24, 2015
309c48a
Squash?
Jan 24, 2015
7e22ba3
Merge branch 'patch-4' of github.com:kkirsche/bootstrap into patch-4
Jan 24, 2015
3d196a5
Fix my mistakes
Jan 24, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
44 changes: 38 additions & 6 deletions docs/_includes/components/dropdowns.html
View file
Open in desktop
Expand Up @@ -31,6 +31,38 @@ <h3 id="dropdowns-example">Example</h3>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</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>
Expand All @@ -53,11 +85,11 @@ <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 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>
Expand All @@ -68,7 +100,7 @@ <h3 id="dropdowns-headers">Headers</h3>
</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>
...
Expand Down Expand Up @@ -104,19 +136,19 @@ <h3 id="dropdowns-disabled">Disabled menu items</h3>
<p>Add <code>.disabled</code> to a <code>&lt;li&gt;</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>
</ul>
</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>
Expand Down