rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

updated button groups section

Browse Source
This commit is contained in:
Mark Otto 2012-06-10 20:50:49 -07:00
parent 017b7cb804
commit 081a07c168
2 changed files with 68 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
docs/components.html
View File

@ -110,6 +110,7 @@
</header>
<!-- Button Groups
================================================== -->
<section id="buttonGroups">
@ -117,10 +118,9 @@
<h1>Button groups <small>Join buttons for more toolbar-like functionality</small></h1>
</div>
<h3>Button groups</h3>
<p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements.</p>
<h3>Best practices</h3>
<p>We recommend the following guidelines for using button groups and toolbars:</p>
<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>&lt;a&gt;</code> or <code>&lt;button&gt;</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>&lt;a&gt;</code> or <code>&lt;button&gt;</code>.</li>
<li>Don't mix buttons of different colors in the same button group.</li>
@ -128,10 +128,17 @@
</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>
<h3>Default example</h3>
<p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
<div class="">
<div class="btn-group" style="margin: 9px 0;">
<hr class="bs-docs-separator">
<h2>Examples and variations</h2>
<p>Two basic options, along with two more specific variations.</p>
<h3>Basic 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;">
<button class="btn">Left</button>
<button class="btn">Middle</button>
<button class="btn">Right</button>
@ -144,22 +151,25 @@
&lt;button class="btn"&gt;3&lt;/button&gt;
&lt;/div&gt;
</pre>
<h3>Toolbar example</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="btn-toolbar">
<div class="btn-group">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
</div>
<div class="btn-group">
<button class="btn">5</button>
<button class="btn">6</button>
<button class="btn">7</button>
</div>
<div class="btn-group">
<button class="btn">8</button>
<div class="bs-docs-example">
<div class="btn-toolbar" style="margin: 0;">
<div class="btn-group">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
</div>
<div class="btn-group">
<button class="btn">5</button>
<button class="btn">6</button>
<button class="btn">7</button>
</div>
<div class="btn-group">
<button class="btn">8</button>
</div>
</div>
</div>
<pre class="prettyprint linenums">
@ -169,9 +179,10 @@
&lt;/div&gt;
&lt;/div&gt;
</pre>
<h3>Checkbox and radio flavors</h3>
<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>
<p><a class="btn js-btn" href="./javascript.html#buttons">Get the javascript &raquo;</a></p>
<h3>Dropdowns in button groups</h3>
<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>

57
docs/templates/pages/components.mustache vendored
View File

@ -33,6 +33,7 @@
</header>
<!-- Button Groups
================================================== -->
<section id="buttonGroups">
@ -40,10 +41,9 @@
<h1>{{_i}}Button groups{{/i}} <small>{{_i}}Join buttons for more toolbar-like functionality{{/i}}</small></h1>
</div>
<h3>{{_i}}Button groups{{/i}}</h3>
<p>{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements.{{/i}}</p>
<h3>{{_i}}Best practices{{/i}}</h3>
<p>{{_i}}We recommend the following guidelines for using button groups and toolbars:{{/i}}</p>
<h2>{{_i}}Description and best practices{{/i}}</h2>
<p>{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements. We recommend the following guidelines for using button groups and toolbars:{{/i}}</p>
<ul>
<li>{{_i}}Always use the same element in a single button group, <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code>.{{/i}}</li>
<li>{{_i}}Don't mix buttons of different colors in the same button group.{{/i}}</li>
@ -51,10 +51,17 @@
</ul>
<p>{{_i}}<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.{{/i}}</p>
<h3>{{_i}}Default example{{/i}}</h3>
<p>{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}</p>
<div class="">
<div class="btn-group" style="margin: 9px 0;">
<hr class="bs-docs-separator">
<h2>{{_i}}Examples and variations{{/i}}</h2>
<p>{{_i}}Two basic options, along with two more specific variations.{{/i}}</p>
<h3>{{_i}}Basic button group{{/i}}</h3>
<p>{{_i}}Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.{{/i}}</p>
<div class="bs-docs-example">
<div class="btn-group" style="margin: 9px 0 5px;">
<button class="btn">{{_i}}Left{{/i}}</button>
<button class="btn">{{_i}}Middle{{/i}}</button>
<button class="btn">{{_i}}Right{{/i}}</button>
@ -67,22 +74,25 @@
&lt;button class="btn"&gt;3&lt;/button&gt;
&lt;/div&gt;
</pre>
<h3>{{_i}}Toolbar example{{/i}}</h3>
<p>{{_i}}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.{{/i}}</p>
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
</div>
<div class="btn-group">
<button class="btn">5</button>
<button class="btn">6</button>
<button class="btn">7</button>
</div>
<div class="btn-group">
<button class="btn">8</button>
<div class="bs-docs-example">
<div class="btn-toolbar" style="margin: 0;">
<div class="btn-group">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
</div>
<div class="btn-group">
<button class="btn">5</button>
<button class="btn">6</button>
<button class="btn">7</button>
</div>
<div class="btn-group">
<button class="btn">8</button>
</div>
</div>
</div>
<pre class="prettyprint linenums">
@ -92,9 +102,10 @@
&lt;/div&gt;
&lt;/div&gt;
</pre>
<h3>{{_i}}Checkbox and radio flavors{{/i}}</h3>
<p>{{_i}}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.{{/i}}</p>
<p><a class="btn js-btn" href="./javascript.html#buttons">{{_i}}Get the javascript &raquo;{{/i}}</a></p>
<h3>{{_i}}Dropdowns in button groups{{/i}}</h3>
<p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.{{/i}}</p>
</section>