<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>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>{{_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;">
<aclass="btn"href="#">{{_i}}Left{{/i}}</a>
<aclass="btn"href="#">{{_i}}Middle{{/i}}</a>
<aclass="btn"href="#">{{_i}}Right{{/i}}</a>
<buttonclass="btn">{{_i}}Left{{/i}}</button>
<buttonclass="btn">{{_i}}Middle{{/i}}</button>
<buttonclass="btn">{{_i}}Right{{/i}}</button>
</div>
</div>
<preclass="prettyprint linenums">
<div class="btn-group">
<a class="btn" href="#">1</a>
<a class="btn" href="#">2</a>
<a class="btn" href="#">3</a>
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
</div>
</pre>
<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>
<divclass="btn-toolbar">
<divclass="btn-group">
<aclass="btn"href="#">1</a>
<aclass="btn"href="#">2</a>
<aclass="btn"href="#">3</a>
<aclass="btn"href="#">4</a>
<buttonclass="btn">1</button>
<buttonclass="btn">2</button>
<buttonclass="btn">3</button>
<buttonclass="btn">4</button>
</div>
<divclass="btn-group">
<aclass="btn"href="#">5</a>
<aclass="btn"href="#">6</a>
<aclass="btn"href="#">7</a>
<buttonclass="btn">5</button>
<buttonclass="btn">6</button>
<buttonclass="btn">7</button>
</div>
<divclass="btn-group">
<aclass="btn"href="#">8</a>
<buttonclass="btn">8</button>
</div>
</div>
<preclass="prettyprint linenums">
...
...
@@ -122,7 +122,7 @@
<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}}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>
