rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Fixes #14116: Use <button> elements over empty anchors

Browse Source
This commit is contained in:
Mark Otto 2014-07-12 15:16:43 -07:00
parent bd292ca3b8
commit 7ec6c9fd13
1 changed files with 32 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
docs/_includes/js/dropdowns.html
View File

@ -20,7 +20,10 @@
<div class="collapse navbar-collapse bs-example-js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<button id="drop1" type="button" class="dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
@ -30,7 +33,10 @@
</ul>
</li>
<li class="dropdown">
<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <span class="caret"></span></a>
<button id="drop2" type="button" class="dropdown-toggle" data-toggle="dropdown">
Dropdown 2
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
@ -42,7 +48,10 @@
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="fat-menu" class="dropdown">
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <span class="caret"></span></a>
<button id="drop3" type="button" class="dropdown-toggle" data-toggle="dropdown">
Dropdown 3
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
@ -62,7 +71,10 @@
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Regular link</a></li>
<li role="presentation" class="dropdown">
<a id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>
<button id="drop4" type="button" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
@ -72,7 +84,10 @@
</ul>
</li>
<li role="presentation" class="dropdown">
<a id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <span class="caret"></span></a>
<button id="drop5" type="button" data-toggle="dropdown">
Dropdown 2
<span class="caret"></span>
</button>
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
@ -82,7 +97,10 @@
</ul>
</li>
<li role="presentation" class="dropdown">
<a id="drop6" role="button" data-toggle="dropdown" href="#">Dropdown 3 <span class="caret"></span></a>
<button id="drop6" type="button" data-toggle="dropdown">
Dropdown 3
<span class="caret"></span>
</button>
<ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
@ -104,7 +122,10 @@
<p>Add <code>data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p>
{% highlight html %}
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" href="#">Dropdown trigger</a>
<button id="dLabel" type="button" data-toggle="dropdown">
Dropdown trigger
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
@ -113,9 +134,10 @@
<p>To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p>
{% highlight html %}
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<button id="dLabel" type="button" data-toggle="dropdown">Dropdown trigger</button>
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...