<pclass="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p>
<h1>Button groups <small>Join buttons for more toolbar-like functionality</small></h1>
</div>
<divclass="row">
<divclass="span4">
<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>You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex projects.</p>
<h1>Button groups <small>Join buttons for more toolbar-like functionality</small></h1>
</div>
<divclass="row">
<divclass="span4">
<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>You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex projects.</p>
<p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
</div>
<divclass="span4">
<h3>Example markup</h3>
<p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
<preclass="prettyprint linenums">
<div class="btn-group">
<a class="btn" href="#">1</a>
...
...
@@ -134,95 +136,95 @@
</div>
</div>
</pre>
</div>
<divclass="span4">
<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 <ahref="./javascript.html#buttons">the Javascript docs</a> for that.</p>
<p><aclass="btn js-btn"href="./javascript.html#buttons">Get the javascript »</a></p>
<hr>
<h4class="muted">Heads up</h4>
<pclass="muted">CSS for button groups is in a separate file, button-groups.less.</p>
</div>
</div>
</section>
<divclass="span4">
<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 <ahref="./javascript.html#buttons">the Javascript docs</a> for that.</p>
<p><aclass="btn js-btn"href="./javascript.html#buttons">Get the javascript »</a></p>
<hr>
<h4class="muted">Heads up</h4>
<pclass="muted">CSS for button groups is in a separate file, button-groups.less.</p>
<h1>Split button dropdowns <small>Built on button groups to provide contextual menus</small></h1>
</div>
<divclass="row">
<divclass="span4">
<h3>Split button dropdowns</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>
<aclass="btn info dropdown-toggle"data-toggle="dropdown"href="#"><spanclass="caret"></span></a>
<ulclass="dropdown-menu">
<li><ahref="#">Action</a></li>
<li><ahref="#">Another action</a></li>
<li><ahref="#">Something else here</a></li>
<liclass="divider"></li>
<li><ahref="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div>
</div><!-- /well -->
</div>
<divclass="row">
<divclass="span4">
<h3>Split button dropdowns</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>
<aclass="btn info dropdown-toggle"data-toggle="dropdown"href="#"><spanclass="caret"></span></a>
<ulclass="dropdown-menu">
<li><ahref="#">Action</a></li>
<li><ahref="#">Another action</a></li>
<li><ahref="#">Something else here</a></li>
<liclass="divider"></li>
<li><ahref="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div>
</div><!-- /well -->
</div>
<divclass="span8">
<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>
<divclass="span8">
<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>
<preclass="prettyprint linenums">
<div class="btn-group">
<a class="btn" href="#">Action</a>
...
...
@@ -234,9 +236,9 @@
</ul>
</div>
</pre>
</div>
</div>
</section>
</div>
</section>
...
...
@@ -528,11 +530,6 @@
<h3>Tabbable in any direction</h3>
<divclass="row">
<!--
<div class="span4">
<p>Swap the order of your HTML—placing <code>.tabs</code> after <code>.tab-content</code>—for tabs on the bottom.</p>
</div>
-->
<divclass="span4">
<h4>Tabs on the bottom</h4>
<p>Flip the order of the HTML and add a class to put tabs on the bottom.</p>
<pclass="lead">Customize and extend Bootstrap with <ahref="http://lesscss.org"target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.</p>
<ulclass="nav pills">
<li><ahref="./less.html#builtWith">Built with Less</a></li>
<pclass="lead">{{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.{{/i}}</p>
<h1>{{_i}}Button groups{{/i}}<small>{{_i}}Join buttons for more toolbar-like functionality{{/i}}</small></h1>
</div>
<divclass="row">
<divclass="span4">
<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}}You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex projects.{{/i}}</p>
<h1>{{_i}}Button groups{{/i}}<small>{{_i}}Join buttons for more toolbar-like functionality{{/i}}</small></h1>
</div>
<divclass="row">
<divclass="span4">
<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}}You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex projects.{{/i}}</p>
<p>{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}</p>
</div>
<divclass="span4">
<h3>{{_i}}Example markup{{/i}}</h3>
<p>{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}</p>
<preclass="prettyprint linenums">
<div class="btn-group">
<a class="btn" href="#">1</a>
...
...
@@ -74,95 +76,95 @@
</div>
</div>
</pre>
</div>
<divclass="span4">
<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 <ahref="./javascript.html#buttons">the Javascript docs</a> for that.{{/i}}</p>
<p><aclass="btn js-btn"href="./javascript.html#buttons">{{_i}}Get the javascript »{{/i}}</a></p>
<hr>
<h4class="muted">{{_i}}Heads up{{/i}}</h4>
<pclass="muted">{{_i}}CSS for button groups is in a separate file, button-groups.less.{{/i}}</p>
</div>
</div>
</section>
<divclass="span4">
<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 <ahref="./javascript.html#buttons">the Javascript docs</a> for that.{{/i}}</p>
<p><aclass="btn js-btn"href="./javascript.html#buttons">{{_i}}Get the javascript »{{/i}}</a></p>
<hr>
<h4class="muted">{{_i}}Heads up{{/i}}</h4>
<pclass="muted">{{_i}}CSS for button groups is in a separate file, button-groups.less.{{/i}}</p>
<h1>{{_i}}Split button dropdowns{{/i}}<small>{{_i}}Built on button groups to provide contextual menus{{/i}}</small></h1>
</div>
<divclass="row">
<divclass="span4">
<h3>{{_i}}Split button dropdowns{{/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}}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>
<divclass="span8">
<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>
<pclass="lead">{{_i}}Bring Bootstrap's components to life—now with 12 custom <ahref="http://jquery.com/"target="_blank">jQuery</a> plugins.{{/i}}
<pclass="lead">{{_i}}Customize and extend Bootstrap with <ahref="http://lesscss.org"target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.{{/i}}</p>
<ulclass="nav pills">
<li><ahref="./less.html#builtWith">{{_i}}Built with Less{{/i}}</a></li>
<pclass="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
