rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Merge pull request #15885 from StevenBlack/headings-buttongroups

Browse Source 
docs>components>button-groups headings
This commit is contained in:
Mark Otto 2015-02-24 16:22:52 -08:00
commit 05d0e88dbb
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/_includes/components/button-groups.html
View File

@ -15,7 +15,7 @@
<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>
<h2 id="btn-groups-single">Basic example</h2>
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
<div class="bs-example" data-example-id="simple-button-group">
<div class="btn-group" role="group" aria-label="Basic example">
@ -32,7 +32,7 @@
</div>
{% endhighlight %}
<h3 id="btn-groups-toolbar">Button toolbar</h3>
<h2 id="btn-groups-toolbar">Button toolbar</h2>
<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" data-example-id="simple-button-toolbar">
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
@ -60,7 +60,7 @@
</div>
{% endhighlight %}
<h3 id="btn-groups-sizing">Sizing</h3>
<h2 id="btn-groups-sizing">Sizing</h2>
<p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to each <code>.btn-group</code>, including when nesting multiple groups.</p>
<div class="bs-example" data-example-id="button-group-sizing">
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
@ -94,7 +94,7 @@
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
{% endhighlight %}
<h3 id="btn-groups-nested">Nesting</h3>
<h2 id="btn-groups-nested">Nesting</h2>
<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" data-example-id="button-group-nesting">
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
@ -131,7 +131,7 @@
</div>
{% endhighlight %}
<h3 id="btn-groups-vertical">Vertical variation</h3>
<h2 id="btn-groups-vertical">Vertical variation</h2>
<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" data-example-id="vertical-button-group">
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
@ -187,7 +187,7 @@
</div>
{% endhighlight %}
<h3 id="btn-groups-justified">Justified button groups</h3>
<h2 id="btn-groups-justified">Justified button groups</h2>
<p>Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.</p>
<div class="bs-callout bs-callout-warning" id="callout-btn-group-justified-dbl-border">