mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-24 14:04:09 +03:00
Code Activity

Assorted accessibility (and some consistency) fixes for documentation

Browse Source 
Closes #14951 by merging it.
This commit is contained in:
Patrick H. Lauke
2014-10-30 16:45:33 +00:00
committed by Heinrich Fenkart
parent 99919c0364
commit bb89657bcb
24 changed files with 322 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/_includes/components/button-dropdowns.html
+23 -23
View File
@@ -12,7 +12,7 @@
<p>Turn a button into a dropdown toggle with some basic markup changes.</p>
<div class="bs-example">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Default <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -22,7 +22,7 @@
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary <span class="caret"></span></button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Primary <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -32,7 +32,7 @@
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Success <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -42,7 +42,7 @@
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Info <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -52,7 +52,7 @@
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Warning <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -62,7 +62,7 @@
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Danger <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -75,7 +75,7 @@
{% highlight html %}
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
@@ -93,7 +93,7 @@
<div class="bs-example">
<div class="btn-group">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
@@ -107,7 +107,7 @@
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
@@ -121,7 +121,7 @@
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
@@ -135,7 +135,7 @@
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
@@ -149,7 +149,7 @@
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
@@ -163,7 +163,7 @@
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
@@ -180,7 +180,7 @@
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
@@ -199,7 +199,7 @@
<div class="bs-example">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
@@ -213,7 +213,7 @@
</div><!-- /btn-toolbar -->
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
@@ -227,7 +227,7 @@
</div><!-- /btn-toolbar -->
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
@@ -243,7 +243,7 @@
{% highlight html %}
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
@@ -253,7 +253,7 @@
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
@@ -263,7 +263,7 @@
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
@@ -278,7 +278,7 @@
<div class="btn-toolbar" role="toolbar">
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
@@ -292,7 +292,7 @@
</div><!-- /btn-group -->
<div class="btn-group dropup">
<button type="button" class="btn btn-primary">Right dropup</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
@@ -309,7 +309,7 @@
{% highlight html %}
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
docs/_includes/components/button-groups.html
+75 -68
View File
@@ -8,17 +8,24 @@
<p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
</div>
<div class="bs-callout bs-callout-warning">
<h4>Ensure correct <code>role</code> and provide a label</h4>
<p>In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate <code>role</code> attribute needs to be provided. For button groups, this would be <code>role="group"</code>, while toolbars should have a <code>role="toolbar"</code>.</p>
<p>One exception are groups which only contain a single control (for instance the <a href="#btn-groups-justified">justified button groups</a> with <code>&lt;button&gt;</code> elements) or a dropdown.</p>
<p>In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct <code>role</code> attribute. In the examples provided here, we use <code>aria-label</code>, but alternatives such as <code>aria-labelledby</code> can also be used.</p>
</div>
<h3 id="btn-groups-single">Basic example</h3>
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
<div class="bs-example">
<div class="btn-group" style="margin: 9px 0 5px;">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
{% highlight html %}
<div class="btn-group">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
@@ -28,79 +35,74 @@
<h3 id="btn-groups-toolbar">Button toolbar</h3>
<p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p>
<div class="bs-example">
<div class="btn-toolbar" role="toolbar" style="margin: 0;">
<div class="btn-group">
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="First group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
<button type="button" class="btn btn-default">4</button>
</div>
<div class="btn-group">
<div class="btn-group" role="group" aria-label="Second group">
<button type="button" class="btn btn-default">5</button>
<button type="button" class="btn btn-default">6</button>
<button type="button" class="btn btn-default">7</button>
</div>
<div class="btn-group">
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-default">8</button>
</div>
</div>
</div>
{% highlight html %}
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">...</div>
<div class="btn-group">...</div>
<div class="btn-group">...</div>
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>
{% endhighlight %}
<h3 id="btn-groups-sizing">Sizing</h3>
<p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to the <code>.btn-group</code>.</p>
<div class="bs-example">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<br>
<div class="btn-group" role="group" aria-label="Default button group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<br>
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<br>
<div class="btn-group btn-group-xs" role="group" aria-label="Extra-small button group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
{% highlight html %}
<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
{% endhighlight %}
<h3 id="btn-groups-nested">Nesting</h3>
<p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
<div class="bs-example">
<div class="btn-group">
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group">
<button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
@@ -112,12 +114,12 @@
</div>
</div>
{% highlight html %}
<div class="btn-group">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
@@ -132,11 +134,11 @@
<h3 id="btn-groups-vertical">Vertical variation</h3>
<p>Make a set of buttons appear vertically stacked rather than horizontally. <strong class="text-danger">Split button dropdowns are not supported here.</strong></p>
<div class="bs-example">
<div class="btn-group-vertical">
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-default">Button</button>
<button type="button" class="btn btn-default">Button</button>
<div class="btn-group">
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
@@ -147,8 +149,8 @@
</div>
<button type="button" class="btn btn-default">Button</button>
<button type="button" class="btn btn-default">Button</button>
<div class="btn-group">
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
@@ -157,8 +159,8 @@
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group">
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
@@ -167,8 +169,8 @@
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group">
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
@@ -180,7 +182,7 @@
</div>
</div>
{% highlight html %}
<div class="btn-group-vertical">
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
{% endhighlight %}
@@ -201,17 +203,17 @@
<h4>With <code>&lt;a&gt;</code> elements</h4>
<p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.</p>
<div class="bs-example">
<div class="btn-group btn-group-justified">
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
<a href="#" class="btn btn-default" role="button">Left</a>
<a href="#" class="btn btn-default" role="button">Middle</a>
<a href="#" class="btn btn-default" role="button">Right</a>
</div>
<br>
<div class="btn-group btn-group-justified">
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group with nested dropdown">
<a href="#" class="btn btn-default" role="button">Left</a>
<a href="#" class="btn btn-default" role="button">Middle</a>
<div class="btn-group">
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<div class="btn-group" role="group">
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
@@ -225,35 +227,40 @@
</div>
</div>
{% highlight html %}
<div class="btn-group btn-group-justified">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<h4>Links acting as buttons</h4>
<p>If the <code>&lt;a&gt;</code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
</div>
<h4>With <code>&lt;button&gt;</code> elements</h4>
<p>To use justified button groups with <code>&lt;button&gt;</code> elements, <strong class="text-danger">you must wrap each button in a button group</strong>. Most browsers don't properly apply our CSS for justification to <code>&lt;button&gt;</code> elements, but since we support button dropdowns, we can workaround that.</p>
<p>To use justified button groups with <code>&lt;button&gt;</code> elements, <strong class="text-danger">you must wrap each button in a button group</strong>. Most browsers don't properly apply our CSS for justification to <code>&lt;button&gt;</code> elements, but since we support button dropdowns, we can work around that.</p>
<div class="bs-example">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
{% highlight html %}
<div class="btn-group btn-group-justified">
<div class="btn-group">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
docs/_includes/components/dropdowns.html
+5 -5
View File
@@ -7,7 +7,7 @@
<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 btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
@@ -21,7 +21,7 @@
</div><!-- /example -->
{% highlight html %}
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
@@ -54,7 +54,7 @@
<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">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
@@ -80,7 +80,7 @@
<p>Add a divider to separate series of links in a dropdown menu.</p>
<div class="bs-example">
<div class="dropdown clearfix">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
@@ -105,7 +105,7 @@
<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">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
docs/_includes/components/input-groups.html
+6 -6
View File
@@ -187,7 +187,7 @@
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -203,7 +203,7 @@
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -221,7 +221,7 @@
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -237,7 +237,7 @@
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -258,7 +258,7 @@
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default" tabindex="-1">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
@@ -278,7 +278,7 @@
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default" tabindex="-1">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
docs/_includes/components/navbar.html
+2 -2
View File
@@ -40,7 +40,7 @@
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
@@ -95,7 +95,7 @@
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
docs/_includes/components/navs.html
+31 -24
View File
@@ -3,38 +3,45 @@
<p class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>
<div class="bs-callout bs-callout-info">
<h4>Using navs for tab panels requires JavaScript tabs plugin</h4>
<p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>. The markup will also require additional <code>role</code> and ARIA attributes – see the plugin's <a href="../javascript/#tabs-usage">example markup</a> for further details.</p>
</div>
<div class="bs-callout bs-callout-warning">
<h4>Make navs used as navigation accessible</h4>
<p>If you are using navs to provide a navigation bar, be sure to add a <code>role="navigation"</code> to the most logical parent container of the <code>&lt;ul&gt;</code>, or wrap a <code>&lt;nav&gt;</code> element around the whole navigation. Do not add the role to the <code>&lt;ul&gt;</code> itself, as this would prevent it from being announced as an actual list by assistive technologies.</p>
</div>
<h2 id="nav-tabs">Tabs</h2>
<p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
<div class="bs-example">
<ul class="nav nav-tabs" role="tablist">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-tabs" role="tablist">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
{% endhighlight %}
<div class="bs-callout bs-callout-info">
<h4>Requires JavaScript tabs plugin</h4>
<p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>.</p>
</div>
<h2 id="nav-pills">Pills</h2>
<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
<div class="bs-example">
<ul class="nav nav-pills" role="tablist">
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-pills" role="tablist">
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
@@ -42,14 +49,14 @@
{% endhighlight %}
<p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
<div class="bs-example">
<ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 300px;">
<ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-pills nav-stacked" role="tablist">
<ul class="nav nav-pills nav-stacked">
...
</ul>
{% endhighlight %}
@@ -63,23 +70,23 @@
<p>As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p>
</div>
<div class="bs-example">
<ul class="nav nav-tabs nav-justified" role="tablist">
<ul class="nav nav-tabs nav-justified">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
<br>
<ul class="nav nav-pills nav-justified" role="tablist">
<ul class="nav nav-pills nav-justified">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-tabs nav-justified" role="tablist">
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified" role="tablist">
<ul class="nav nav-pills nav-justified">
...
</ul>
{% endhighlight %}
@@ -94,14 +101,14 @@
</div>
<div class="bs-example">
<ul class="nav nav-pills" role="tablist">
<ul class="nav nav-pills">
<li role="presentation"><a href="#">Clickable link</a></li>
<li role="presentation"><a href="#">Clickable link</a></li>
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-pills" role="tablist">
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
@@ -114,11 +121,11 @@
<h3>Tabs with dropdowns</h3>
<div class="bs-example">
<ul class="nav nav-tabs" role="tablist">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Help</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
@@ -132,10 +139,10 @@
</ul>
</div>
{% highlight html %}
<ul class="nav nav-tabs" role="tablist">
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
@@ -148,11 +155,11 @@
<h3>Pills with dropdowns</h3>
<div class="bs-example">
<ul class="nav nav-pills" role="tablist">
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Help</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
@@ -166,10 +173,10 @@
</ul>
</div><!-- /example -->
{% highlight html %}
<ul class="nav nav-pills" role="tablist">
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
docs/_includes/components/pagination.html
+23 -23
View File
@@ -8,26 +8,26 @@
<div class="bs-example">
<nav>
<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
</ul>
</nav>
</div>
{% highlight html %}
<nav>
<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
</ul>
</nav>
{% endhighlight %}
@@ -37,30 +37,30 @@
<div class="bs-example">
<nav>
<ul class="pagination">
<li class="disabled"><a href="#">&laquo;</a></li>
<li class="disabled"><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
</ul>
</nav>
</div>
{% highlight html %}
<nav>
<ul class="pagination">
<li class="disabled"><a href="#">&laquo;</a></li>
<li class="disabled"><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>
{% endhighlight %}
<p>You can optionally swap out active or disabled anchors for <code>&lt;span&gt;</code> to remove click functionality while retaining intended styles.</p>
<p>You can optionally swap out active or disabled anchors for <code>&lt;span&gt;</code>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.</p>
{% highlight html %}
<nav>
<ul class="pagination">
<li class="disabled"><span>&laquo;</span></li>
<li class="disabled"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></li>
<li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
...
</ul>
@@ -73,35 +73,35 @@
<div class="bs-example">
<nav>
<ul class="pagination pagination-lg">
<li><a href="#">&laquo;</a></li>
<li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
</ul>
</nav>
<nav>
<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-sm">
<li><a href="#">&laquo;</a></li>
<li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
</ul>
</nav>
</div>
@@ -139,16 +139,16 @@
<div class="bs-example">
<nav>
<ul class="pager">
<li class="previous"><a href="#">&larr; Older</a></li>
<li class="next"><a href="#">Newer &rarr;</a></li>
<li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
</ul>
</nav>
</div>
{% highlight html %}
<nav>
<ul class="pager">
<li class="previous"><a href="#">&larr; Older</a></li>
<li class="next"><a href="#">Newer &rarr;</a></li>
<li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
</ul>
</nav>
{% endhighlight %}
@@ -159,16 +159,16 @@
<div class="bs-example">
<nav>
<ul class="pager">
<li class="previous disabled"><a href="#">&larr; Older</a></li>
<li class="next"><a href="#">Newer &rarr;</a></li>
<li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
</ul>
</nav>
</div>
{% highlight html %}
<nav>
<ul class="pager">
<li class="previous disabled"><a href="#">&larr; Older</a></li>
<li class="next"><a href="#">Newer &rarr;</a></li>
<li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
</ul>
</nav>
{% endhighlight %}