diff options
Diffstat (limited to 'docs/components.html')
| -rw-r--r-- | docs/components.html | 32 |
1 files changed, 7 insertions, 25 deletions
diff --git a/docs/components.html b/docs/components.html index 213247821..719a8ad48 100644 --- a/docs/components.html +++ b/docs/components.html @@ -214,27 +214,13 @@ ================================================== --> <section id="buttonGroups"> <div class="page-header"> - <h1>Button groups <small>Join buttons for more toolbar-like functionality</small></h1> + <h1>Button groups</h1> </div> - - <h2>Description and best practices</h2> - <p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements. We recommend the following guidelines for using button groups and toolbars:</p> - <ul> - <li>Always use the same element in a single button group, <code><a></code> or <code><button></code>.</li> - <li>Don't mix buttons of different colors in the same button group.</li> - <li>Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.</li> - </ul> - <p><span class="label label-info">Related</span> Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.</p> - - - <hr class="bs-docs-separator"> - - - <h2>Examples and variations</h2> + <h2>Examples</h2> <p>Two basic options, along with two more specific variations.</p> - <h3>Basic button group</h3> + <h3>Single button group</h3> <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p> <div class="bs-docs-example"> <div class="btn-group" style="margin: 9px 0 5px;"> @@ -251,7 +237,7 @@ </div> </pre> - <h3>Toolbar example</h3> + <h3>Multiple button groups</h3> <p>Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.</p> <div class="bs-docs-example"> <div class="btn-toolbar" style="margin: 0;"> @@ -279,11 +265,7 @@ </div> </pre> - - <hr class="bs-docs-separator"> - - - <h2>Vertical button groups</h2> + <h3>Vertical button groups</h3> <p>Make a set of buttons appear vertically stacked rather than horizontally.</p> <div class="bs-docs-example"> <div class="btn-group btn-group-vertical"> @@ -303,10 +285,10 @@ <hr class="bs-docs-separator"> - <h3>Checkbox and radio flavors</h3> + <h4>Checkbox and radio flavors</h4> <p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the Javascript docs</a> for that.</p> - <h3>Dropdowns in button groups</h3> + <h4>Dropdowns in button groups</h4> <p><span class="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p> </section> |