<h1>Button groups <small>Join buttons for more toolbar-like functionality</small></h1>
<h1>Button groups <small>Join buttons for more toolbar-like functionality</small></h1>
</div>
</div>
<divclass="row">
<divclass="span4">
<h3>Button groups</h3>
<h3>Button groups</h3>
<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.</p>
<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.</p>
<h3>Best practices</h3>
<h3>Best practices</h3>
<p>We recommend the following guidelines for using button groups and toolbars:</p>
<p>We recommend the following guidelines for using button groups and toolbars:</p>
<ul>
<ul>
<li>Always use the same element in a single button group, <code><a></code> or <code><button></code>.</li>
<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>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>
<li>Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.</li>
</ul>
</ul>
<p><spanclass="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>
<p><spanclass="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>
<divclass="">
<divclass="btn-group"style="margin: 9px 0;">
<buttonclass="btn">Left</button>
<buttonclass="btn">Middle</button>
<buttonclass="btn">Right</button>
</div>
</div>
<divclass="span4">
</div>
<h3>Default example</h3>
<p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
<divclass="">
<divclass="btn-group"style="margin: 9px 0;">
<buttonclass="btn">Left</button>
<buttonclass="btn">Middle</button>
<buttonclass="btn">Right</button>
</div>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="btn-group">
<div class="btn-group">
<button class="btn">1</button>
<button class="btn">1</button>
...
@@ -148,24 +146,24 @@
...
@@ -148,24 +146,24 @@
<button class="btn">3</button>
<button class="btn">3</button>
</div>
</div>
</pre>
</pre>
<h3>Toolbar example</h3>
<h3>Toolbar example</h3>
<p>Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.</p>
<p>Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.</p>
<divclass="btn-toolbar">
<divclass="btn-toolbar">
<divclass="btn-group">
<divclass="btn-group">
<buttonclass="btn">1</button>
<buttonclass="btn">1</button>
<buttonclass="btn">2</button>
<buttonclass="btn">2</button>
<buttonclass="btn">3</button>
<buttonclass="btn">3</button>
<buttonclass="btn">4</button>
<buttonclass="btn">4</button>
</div>
</div>
<divclass="btn-group">
<divclass="btn-group">
<buttonclass="btn">5</button>
<buttonclass="btn">5</button>
<buttonclass="btn">6</button>
<buttonclass="btn">6</button>
<buttonclass="btn">7</button>
<buttonclass="btn">7</button>
</div>
</div>
<divclass="btn-group">
<divclass="btn-group">
<buttonclass="btn">8</button>
<buttonclass="btn">8</button>
</div>
</div>
</div>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="btn-toolbar">
<div class="btn-toolbar">
<div class="btn-group">
<div class="btn-group">
...
@@ -173,15 +171,11 @@
...
@@ -173,15 +171,11 @@
</div>
</div>
</div>
</div>
</pre>
</pre>
</div>
<h3>Checkbox and radio flavors</h3>
<divclass="span4">
<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 <ahref="./javascript.html#buttons">the Javascript docs</a> for that.</p>
<h3>Checkbox and radio flavors</h3>
<p><aclass="btn js-btn"href="./javascript.html#buttons">Get the javascript »</a></p>
<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 <ahref="./javascript.html#buttons">the Javascript docs</a> for that.</p>
<h3>Dropdowns in button groups</h3>
<p><aclass="btn js-btn"href="./javascript.html#buttons">Get the javascript »</a></p>
<p><spanclass="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>
<h3>Dropdowns in button groups</h3>
<p><spanclass="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>
</div>
</div>
</section>
</section>
...
@@ -194,88 +188,86 @@
...
@@ -194,88 +188,86 @@
</div>
</div>
<h2>Button dropdowns</h2>
<h2>Button dropdowns</h2>
<divclass="row">
<divclass="span4">
<h3>Overview and examples</h3>
<h3>Overview and examples</h3>
<p>Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
<p>Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
<p>Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.</p>
<h3>Example markup</h3>
<p>Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.</p>
<p>Button dropdowns require the <ahref="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p>
</div><!--/span-->
<p>In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.</p>
<divclass="span4">
<h3>Requires javascript</h3>
<p>Button dropdowns require the <ahref="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p>
<p>In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.</p>
</div><!--/span-->
</div><!--/row-->
<br>
<br>
<h2>Split button dropdowns</h2>
<h2>Split button dropdowns</h2>
<divclass="row">
<divclass="span4">
<h3>Overview and examples</h3>
<h3>Overview and examples</h3>
<p>Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.</p>
<p>Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.</p>
<p>We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.</p>
<p>We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="btn-group">
<div class="btn-group">
<button class="btn">Action</button>
<button class="btn">Action</button>
...
@@ -486,32 +471,32 @@
...
@@ -486,32 +471,32 @@
</ul>
</ul>
</div>
</div>
</pre>
</pre>
<h3>Dropup menus</h3>
<h3>Dropup menus</h3>
<p>Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of <code>.dropdown-menu</code>. It will flip the direction of the <code>.caret</code> and reposition the menu itself to move from the bottom up instead of top down.</p>
<p>Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of <code>.dropdown-menu</code>. It will flip the direction of the <code>.caret</code> and reposition the menu itself to move from the bottom up instead of top down.</p>
<h1>{{_i}}Button groups{{/i}}<small>{{_i}}Join buttons for more toolbar-like functionality{{/i}}</small></h1>
<h1>{{_i}}Button groups{{/i}}<small>{{_i}}Join buttons for more toolbar-like functionality{{/i}}</small></h1>
</div>
</div>
<divclass="row">
<divclass="span4">
<h3>{{_i}}Button groups{{/i}}</h3>
<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><a></code> or <code><button></code> elements.{{/i}}</p>
<p>{{_i}}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.{{/i}}</p>
<h3>{{_i}}Best practices{{/i}}</h3>
<h3>{{_i}}Best practices{{/i}}</h3>
<p>{{_i}}We recommend the following guidelines for using button groups and toolbars:{{/i}}</p>
<p>{{_i}}We recommend the following guidelines for using button groups and toolbars:{{/i}}</p>
<ul>
<ul>
<li>{{_i}}Always use the same element in a single button group, <code><a></code> or <code><button></code>.{{/i}}</li>
<li>{{_i}}Always use the same element in a single button group, <code><a></code> or <code><button></code>.{{/i}}</li>
<li>{{_i}}Don't mix buttons of different colors in the same button group.{{/i}}</li>
<li>{{_i}}Don't mix buttons of different colors in the same button group.{{/i}}</li>
<li>{{_i}}Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.{{/i}}</li>
<li>{{_i}}Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.{{/i}}</li>
</ul>
</ul>
<p>{{_i}}<spanclass="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>
<p>{{_i}}<spanclass="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>
<divclass="">
<divclass="btn-group"style="margin: 9px 0;">
<buttonclass="btn">{{_i}}Left{{/i}}</button>
<buttonclass="btn">{{_i}}Middle{{/i}}</button>
<buttonclass="btn">{{_i}}Right{{/i}}</button>
</div>
</div>
<divclass="span4">
</div>
<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>
<divclass="">
<divclass="btn-group"style="margin: 9px 0;">
<buttonclass="btn">{{_i}}Left{{/i}}</button>
<buttonclass="btn">{{_i}}Middle{{/i}}</button>
<buttonclass="btn">{{_i}}Right{{/i}}</button>
</div>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="btn-group">
<div class="btn-group">
<button class="btn">1</button>
<button class="btn">1</button>
...
@@ -70,24 +68,24 @@
...
@@ -70,24 +68,24 @@
<button class="btn">3</button>
<button class="btn">3</button>
</div>
</div>
</pre>
</pre>
<h3>{{_i}}Toolbar example{{/i}}</h3>
<h3>{{_i}}Toolbar example{{/i}}</h3>
<p>{{_i}}Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.{{/i}}</p>
<p>{{_i}}Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.{{/i}}</p>
<divclass="btn-toolbar">
<divclass="btn-toolbar">
<divclass="btn-group">
<divclass="btn-group">
<buttonclass="btn">1</button>
<buttonclass="btn">1</button>
<buttonclass="btn">2</button>
<buttonclass="btn">2</button>
<buttonclass="btn">3</button>
<buttonclass="btn">3</button>
<buttonclass="btn">4</button>
<buttonclass="btn">4</button>
</div>
</div>
<divclass="btn-group">
<divclass="btn-group">
<buttonclass="btn">5</button>
<buttonclass="btn">5</button>
<buttonclass="btn">6</button>
<buttonclass="btn">6</button>
<buttonclass="btn">7</button>
<buttonclass="btn">7</button>
</div>
</div>
<divclass="btn-group">
<divclass="btn-group">
<buttonclass="btn">8</button>
<buttonclass="btn">8</button>
</div>
</div>
</div>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="btn-toolbar">
<div class="btn-toolbar">
<div class="btn-group">
<div class="btn-group">
...
@@ -95,15 +93,11 @@
...
@@ -95,15 +93,11 @@
</div>
</div>
</div>
</div>
</pre>
</pre>
</div>
<h3>{{_i}}Checkbox and radio flavors{{/i}}</h3>
<divclass="span4">
<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 <ahref="./javascript.html#buttons">the Javascript docs</a> for that.{{/i}}</p>
<h3>{{_i}}Checkbox and radio flavors{{/i}}</h3>
<p><aclass="btn js-btn"href="./javascript.html#buttons">{{_i}}Get the javascript »{{/i}}</a></p>
<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 <ahref="./javascript.html#buttons">the Javascript docs</a> for that.{{/i}}</p>
<h3>{{_i}}Dropdowns in button groups{{/i}}</h3>
<p><aclass="btn js-btn"href="./javascript.html#buttons">{{_i}}Get the javascript »{{/i}}</a></p>
<p><spanclass="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>
<h3>{{_i}}Dropdowns in button groups{{/i}}</h3>
<p><spanclass="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>
</div>
</div>
</section>
</section>
...
@@ -116,88 +110,86 @@
...
@@ -116,88 +110,86 @@
</div>
</div>
<h2>{{_i}}Button dropdowns{{/i}}</h2>
<h2>{{_i}}Button dropdowns{{/i}}</h2>
<divclass="row">
<divclass="span4">
<h3>{{_i}}Overview and examples{{/i}}</h3>
<h3>{{_i}}Overview and examples{{/i}}</h3>
<p>{{_i}}Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.{{/i}}</p>
<p>{{_i}}Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.{{/i}}</p>
<p>{{_i}}Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.{{/i}}</p>
<h3>{{_i}}Example markup{{/i}}</h3>
<p>{{_i}}Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.{{/i}}</p>
<p>{{_i}}Button dropdowns work at any size. your button sizes to <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.{{/i}}</p>
<divclass="span4">
<divclass="btn-toolbar"style="margin-top: 18px;">
<h3>{{_i}}Works with all button sizes{{/i}}</h3>
<divclass="btn-group">
<p>{{_i}}Button dropdowns work at any size. your button sizes to <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.{{/i}}</p>
<p>{{_i}}Button dropdowns require the <ahref="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.{{/i}}</p>
</div><!--/span-->
<p>{{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}</p>
<divclass="span4">
<h3>{{_i}}Requires javascript{{/i}}</h3>
<p>{{_i}}Button dropdowns require the <ahref="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.{{/i}}</p>
<p>{{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}</p>
</div><!--/span-->
</div><!--/row-->
<br>
<br>
<h2>{{_i}}Split button dropdowns{{/i}}</h2>
<h2>{{_i}}Split button dropdowns{{/i}}</h2>
<divclass="row">
<divclass="span4">
<h3>{{_i}}Overview and examples{{/i}}</h3>
<h3>{{_i}}Overview and examples{{/i}}</h3>
<p>{{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}</p>
<p>{{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}</p>
<p>{{_i}}Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of <code>.dropdown-menu</code>. It will flip the direction of the <code>.caret</code> and reposition the menu itself to move from the bottom up instead of top down.{{/i}}</p>
<p>{{_i}}Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of <code>.dropdown-menu</code>. It will flip the direction of the <code>.caret</code> and reposition the menu itself to move from the bottom up instead of top down.{{/i}}</p>
