mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-24 14:13:06 +02:00
Code Issues Releases Wiki Activity

rewrite the split button dropdowns section

Browse Source
This commit is contained in:
Mark Otto
2012-06-10 21:00:20 -07:00
parent 081a07c168
commit c90c66e61f
2 changed files with 547 additions and 543 deletions
Download Patch File Download Diff File Expand all files Collapse all files

542
docs/components.html
View File

@@ -196,87 +196,83 @@
<h1>Button dropdown menus <small>Built on button groups to provide contextual menus</small></h1> <h1>Button dropdown menus <small>Built on button groups to provide contextual menus</small></h1>
</div> </div>
<h2>Button dropdowns</h2>
<h3>Overview and examples</h3> <h2>Overview and examples</h2>
<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>
<div class="btn-toolbar" style="margin-top: 18px;"> <div class="bs-docs-example">
<div class="btn-group"> <div class="btn-toolbar" style="margin: 0;">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <div class="btn-group">
<ul class="dropdown-menu"> <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<li><a href="#">Action</a></li> <ul class="dropdown-menu">
<li><a href="#">Another action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Another action</a></li>
<li class="divider"></li> <li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li> <li class="divider"></li>
</ul> <li><a href="#">Separated link</a></li>
</div><!-- /btn-group --> </ul>
<div class="btn-group"> </div><!-- /btn-group -->
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <div class="btn-group">
<ul class="dropdown-menu"> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<li><a href="#">Action</a></li> <ul class="dropdown-menu">
<li><a href="#">Another action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Another action</a></li>
<li class="divider"></li> <li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li> <li class="divider"></li>
</ul> <li><a href="#">Separated link</a></li>
</div><!-- /btn-group --> </ul>
<div class="btn-group"> </div><!-- /btn-group -->
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button> <div class="btn-group">
<ul class="dropdown-menu"> <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
<li><a href="#">Action</a></li> <ul class="dropdown-menu">
<li><a href="#">Another action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Another action</a></li>
<li class="divider"></li> <li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li> <li class="divider"></li>
</ul> <li><a href="#">Separated link</a></li>
</div><!-- /btn-group --> </ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">Inverse <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
</div> </div>
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">Inverse <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<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>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="btn-group"&gt; &lt;div class="btn-group"&gt;
&lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt; &lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
@@ -291,184 +287,132 @@
<h3>Works with all button sizes</h3> <h3>Works with all button sizes</h3>
<p>Button dropdowns work at any size. your button sizes to <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.</p> <p>Button dropdowns work at any size. your button sizes to <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.</p>
<div class="btn-toolbar" style="margin-top: 18px;"> <div class="bs-docs-example">
<div class="btn-group"> <div class="btn-toolbar" style="margin: 0;">
<button class="btn btn-large dropdown-toggle" data-toggle="dropdown">Large button <span class="caret"></span></button> <div class="btn-group">
<ul class="dropdown-menu"> <button class="btn btn-large dropdown-toggle" data-toggle="dropdown">Large button <span class="caret"></span></button>
<li><a href="#">Action</a></li> <ul class="dropdown-menu">
<li><a href="#">Another action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Another action</a></li>
<li class="divider"></li> <li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li> <li class="divider"></li>
</ul> <li><a href="#">Separated link</a></li>
</div><!-- /btn-group --> </ul>
<div class="btn-group"> </div><!-- /btn-group -->
<button class="btn btn-small dropdown-toggle" data-toggle="dropdown">Small button <span class="caret"></span></button> <div class="btn-group">
<ul class="dropdown-menu"> <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">Small button <span class="caret"></span></button>
<li><a href="#">Action</a></li> <ul class="dropdown-menu">
<li><a href="#">Another action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Another action</a></li>
<li class="divider"></li> <li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li> <li class="divider"></li>
</ul> <li><a href="#">Separated link</a></li>
</div><!-- /btn-group --> </ul>
<div class="btn-group"> </div><!-- /btn-group -->
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">Mini button <span class="caret"></span></button> <div class="btn-group">
<ul class="dropdown-menu"> <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">Mini button <span class="caret"></span></button>
<li><a href="#">Action</a></li> <ul class="dropdown-menu">
<li><a href="#">Another action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Another action</a></li>
<li class="divider"></li> <li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li> <li class="divider"></li>
</ul> <li><a href="#">Separated link</a></li>
</div><!-- /btn-group --> </ul>
</div><!-- /btn-toolbar --> </div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
</div>
<h3>Requires javascript</h3> <h3>Requires javascript</h3>
<p>Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p> <p>Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p>
<p>In some cases&mdash;like mobile&mdash;dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.</p> <p>In some cases&mdash;like mobile&mdash;dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.</p>
<br>
<hr class="bs-docs-separator">
<h2>Split button dropdowns</h2> <h2>Split button dropdowns</h2>
<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>
<div class="btn-toolbar" style="margin-top: 18px;"> <div class="bs-docs-example">
<div class="btn-group"> <div class="btn-toolbar" style="margin: 0;">
<button class="btn">Action</button> <div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <button class="btn">Action</button>
<ul class="dropdown-menu"> <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<li><a href="#">Action</a></li> <ul class="dropdown-menu">
<li><a href="#">Another action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Another action</a></li>
<li class="divider"></li> <li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li> <li class="divider"></li>
</ul> <li><a href="#">Separated link</a></li>
</div><!-- /btn-group --> </ul>
<div class="btn-group"> </div><!-- /btn-group -->
<button class="btn btn-primary">Action</button> <div class="btn-group">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <button class="btn btn-primary">Action</button>
<ul class="dropdown-menu"> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<li><a href="#">Action</a></li> <ul class="dropdown-menu">
<li><a href="#">Another action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Another action</a></li>
<li class="divider"></li> <li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li> <li class="divider"></li>
</ul> <li><a href="#">Separated link</a></li>
</div><!-- /btn-group --> </ul>
<div class="btn-group"> </div><!-- /btn-group -->
<button class="btn btn-danger">Danger</button> <div class="btn-group">
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <button class="btn btn-danger">Danger</button>
<ul class="dropdown-menu"> <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<li><a href="#">Action</a></li> <ul class="dropdown-menu">
<li><a href="#">Another action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Another action</a></li>
<li class="divider"></li> <li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li> <li class="divider"></li>
</ul> <li><a href="#">Separated link</a></li>
</div><!-- /btn-group --> </ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-warning">Warning</button>
<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-success">Success</button>
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-info">Info</button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-inverse">Inverse</button>
<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
</div> </div>
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-warning">Warning</button>
<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-success">Success</button>
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-info">Info</button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div>
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-inverse">Inverse</button>
<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<h3>Sizes</h3>
<p>Utilize the extra button classes <code>.btn-mini</code>, <code>.btn-small</code>, or <code>.btn-large</code> for sizing.</p>
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-large">Large action</button>
<button class="btn btn-large dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-small">Small action</button>
<button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-mini">Mini action</button>
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<pre class="prettyprint linenums">
&lt;div class="btn-group"&gt;
...
&lt;ul class="dropdown-menu pull-right"&gt;
&lt;!-- dropdown menu links --&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>
<h3>Example markup</h3>
<p>We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="btn-group"&gt; &lt;div class="btn-group"&gt;
&lt;button class="btn"&gt;Action&lt;/button&gt; &lt;button class="btn"&gt;Action&lt;/button&gt;
@@ -480,31 +424,89 @@
&lt;/ul&gt; &lt;/ul&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<h3>Sizes</h3>
<p>Utilize the extra button classes <code>.btn-mini</code>, <code>.btn-small</code>, or <code>.btn-large</code> for sizing.</p>
<div class="bs-docs-example">
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-large">Large action</button>
<button class="btn btn-large dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-small">Small action</button>
<button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-mini">Mini action</button>
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
</div>
<pre class="prettyprint linenums">
&lt;div class="btn-group"&gt;
&lt;button class="btn btn-mini"&gt;Action&lt;/button&gt;
&lt;button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"&gt;
&lt;span class="caret"&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;ul class="dropdown-menu"&gt;
&lt;!-- dropdown menu links --&gt;
&lt;/ul&gt;
&lt;/div&gt;
</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>
<div class="btn-toolbar" style="margin-top: 9px;"> <div class="bs-docs-example">
<div class="btn-group dropup"> <div class="btn-toolbar" style="margin: 0;">
<button class="btn">Dropup</button> <div class="btn-group dropup">
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <button class="btn">Dropup</button>
<ul class="dropdown-menu"> <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<li><a href="#">Action</a></li> <ul class="dropdown-menu">
<li><a href="#">Another action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Another action</a></li>
<li class="divider"></li> <li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li> <li class="divider"></li>
</ul> <li><a href="#">Separated link</a></li>
</div><!-- /btn-group --> </ul>
<div class="btn-group dropup"> </div><!-- /btn-group -->
<button class="btn primary">Right dropup</button> <div class="btn-group dropup">
<button class="btn primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <button class="btn primary">Right dropup</button>
<ul class="dropdown-menu pull-right"> <button class="btn primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<li><a href="#">Action</a></li> <ul class="dropdown-menu pull-right">
<li><a href="#">Another action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Another action</a></li>
<li class="divider"></li> <li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li> <li class="divider"></li>
</ul> <li><a href="#">Separated link</a></li>
</div><!-- /btn-group --> </ul>
</div><!-- /btn-group -->
</div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="btn-group dropup"&gt; &lt;div class="btn-group dropup"&gt;

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

@@ -119,87 +119,83 @@
<h1>{{_i}}Button dropdown menus{{/i}} <small>{{_i}}Built on button groups to provide contextual menus{{/i}}</small></h1> <h1>{{_i}}Button dropdown menus{{/i}} <small>{{_i}}Built on button groups to provide contextual menus{{/i}}</small></h1>
</div> </div>
<h2>{{_i}}Button dropdowns{{/i}}</h2>
<h3>{{_i}}Overview and examples{{/i}}</h3> <h2>{{_i}}Overview and examples{{/i}}</h2>
<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>
<div class="btn-toolbar" style="margin-top: 18px;"> <div class="bs-docs-example">
<div class="btn-group"> <div class="btn-toolbar" style="margin: 0;">
<button class="btn dropdown-toggle" data-toggle="dropdown">{{_i}}Action{{/i}} <span class="caret"></span></button> <div class="btn-group">
<ul class="dropdown-menu"> <button class="btn dropdown-toggle" data-toggle="dropdown">{{_i}}Action{{/i}} <span class="caret"></span></button>
<li><a href="#">{{_i}}Action{{/i}}</a></li> <ul class="dropdown-menu">
<li><a href="#">{{_i}}Another action{{/i}}</a></li> <li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li> <li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li class="divider"></li> <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> <li class="divider"></li>
</ul> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</div><!-- /btn-group --> </ul>
<div class="btn-group"> </div><!-- /btn-group -->
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">{{_i}}Action{{/i}} <span class="caret"></span></button> <div class="btn-group">
<ul class="dropdown-menu"> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">{{_i}}Action{{/i}} <span class="caret"></span></button>
<li><a href="#">{{_i}}Action{{/i}}</a></li> <ul class="dropdown-menu">
<li><a href="#">{{_i}}Another action{{/i}}</a></li> <li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li> <li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li class="divider"></li> <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> <li class="divider"></li>
</ul> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</div><!-- /btn-group --> </ul>
<div class="btn-group"> </div><!-- /btn-group -->
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">{{_i}}Danger{{/i}} <span class="caret"></span></button> <div class="btn-group">
<ul class="dropdown-menu"> <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">{{_i}}Danger{{/i}} <span class="caret"></span></button>
<li><a href="#">{{_i}}Action{{/i}}</a></li> <ul class="dropdown-menu">
<li><a href="#">{{_i}}Another action{{/i}}</a></li> <li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li> <li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li class="divider"></li> <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> <li class="divider"></li>
</ul> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</div><!-- /btn-group --> </ul>
</div> </div><!-- /btn-group -->
<div class="btn-toolbar"> <div class="btn-group">
<div class="btn-group"> <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">{{_i}}Warning{{/i}} <span class="caret"></span></button>
<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">{{_i}}Warning{{/i}} <span class="caret"></span></button> <ul class="dropdown-menu">
<ul class="dropdown-menu"> <li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Action{{/i}}</a></li> <li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li> <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li> <li class="divider"></li>
<li class="divider"></li> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> </ul>
</ul> </div><!-- /btn-group -->
</div><!-- /btn-group --> <div class="btn-group">
<div class="btn-group"> <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">{{_i}}Success{{/i}} <span class="caret"></span></button>
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown">{{_i}}Success{{/i}} <span class="caret"></span></button> <ul class="dropdown-menu">
<ul class="dropdown-menu"> <li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Action{{/i}}</a></li> <li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li> <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li> <li class="divider"></li>
<li class="divider"></li> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> </ul>
</ul> </div><!-- /btn-group -->
</div><!-- /btn-group --> <div class="btn-group">
<div class="btn-group"> <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">{{_i}}Info{{/i}} <span class="caret"></span></button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">{{_i}}Info{{/i}} <span class="caret"></span></button> <ul class="dropdown-menu">
<ul class="dropdown-menu"> <li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Action{{/i}}</a></li> <li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li> <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li> <li class="divider"></li>
<li class="divider"></li> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> </ul>
</ul> </div><!-- /btn-group -->
</div><!-- /btn-group --> <div class="btn-group">
<div class="btn-group"> <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">{{_i}}Inverse{{/i}} <span class="caret"></span></button>
<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">{{_i}}Inverse{{/i}} <span class="caret"></span></button> <ul class="dropdown-menu">
<ul class="dropdown-menu"> <li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Action{{/i}}</a></li> <li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li> <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li> <li class="divider"></li>
<li class="divider"></li> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> </ul>
</ul> </div><!-- /btn-group -->
</div><!-- /btn-group --> </div><!-- /btn-toolbar -->
</div><!-- /btn-toolbar --> </div>{{! /example }}
<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>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="btn-group"&gt; &lt;div class="btn-group"&gt;
&lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt; &lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
@@ -214,184 +210,132 @@
<h3>{{_i}}Works with all button sizes{{/i}}</h3> <h3>{{_i}}Works with all button sizes{{/i}}</h3>
<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 work at any size. your button sizes to <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.{{/i}}</p>
<div class="btn-toolbar" style="margin-top: 18px;"> <div class="bs-docs-example">
<div class="btn-group"> <div class="btn-toolbar" style="margin: 0;">
<button class="btn btn-large dropdown-toggle" data-toggle="dropdown">{{_i}}Large button{{/i}} <span class="caret"></span></button> <div class="btn-group">
<ul class="dropdown-menu"> <button class="btn btn-large dropdown-toggle" data-toggle="dropdown">{{_i}}Large button{{/i}} <span class="caret"></span></button>
<li><a href="#">{{_i}}Action{{/i}}</a></li> <ul class="dropdown-menu">
<li><a href="#">{{_i}}Another action{{/i}}</a></li> <li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li> <li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li class="divider"></li> <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> <li class="divider"></li>
</ul> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</div><!-- /btn-group --> </ul>
<div class="btn-group"> </div><!-- /btn-group -->
<button class="btn btn-small dropdown-toggle" data-toggle="dropdown">{{_i}}Small button{{/i}} <span class="caret"></span></button> <div class="btn-group">
<ul class="dropdown-menu"> <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">{{_i}}Small button{{/i}} <span class="caret"></span></button>
<li><a href="#">{{_i}}Action{{/i}}</a></li> <ul class="dropdown-menu">
<li><a href="#">{{_i}}Another action{{/i}}</a></li> <li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li> <li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li class="divider"></li> <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> <li class="divider"></li>
</ul> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</div><!-- /btn-group --> </ul>
<div class="btn-group"> </div><!-- /btn-group -->
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">{{_i}}Mini button{{/i}} <span class="caret"></span></button> <div class="btn-group">
<ul class="dropdown-menu"> <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">{{_i}}Mini button{{/i}} <span class="caret"></span></button>
<li><a href="#">{{_i}}Action{{/i}}</a></li> <ul class="dropdown-menu">
<li><a href="#">{{_i}}Another action{{/i}}</a></li> <li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li> <li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li class="divider"></li> <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> <li class="divider"></li>
</ul> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</div><!-- /btn-group --> </ul>
</div><!-- /btn-toolbar --> </div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
</div>{{! /example }}
<h3>{{_i}}Requires javascript{{/i}}</h3> <h3>{{_i}}Requires javascript{{/i}}</h3>
<p>{{_i}}Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.{{/i}}</p> <p>{{_i}}Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.{{/i}}</p>
<p>{{_i}}In some cases&mdash;like mobile&mdash;dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}</p> <p>{{_i}}In some cases&mdash;like mobile&mdash;dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}</p>
<br>
<hr class="bs-docs-separator">
<h2>{{_i}}Split button dropdowns{{/i}}</h2> <h2>{{_i}}Split button dropdowns{{/i}}</h2>
<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>
<div class="btn-toolbar" style="margin-top: 18px;"> <div class="bs-docs-example">
<div class="btn-group"> <div class="btn-toolbar" style="margin: 0;">
<button class="btn">{{_i}}Action{{/i}}</button> <div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <button class="btn">{{_i}}Action{{/i}}</button>
<ul class="dropdown-menu"> <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<li><a href="#">{{_i}}Action{{/i}}</a></li> <ul class="dropdown-menu">
<li><a href="#">{{_i}}Another action{{/i}}</a></li> <li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li> <li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li class="divider"></li> <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> <li class="divider"></li>
</ul> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</div><!-- /btn-group --> </ul>
<div class="btn-group"> </div><!-- /btn-group -->
<button class="btn btn-primary">{{_i}}Action{{/i}}</button> <div class="btn-group">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <button class="btn btn-primary">{{_i}}Action{{/i}}</button>
<ul class="dropdown-menu"> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<li><a href="#">{{_i}}Action{{/i}}</a></li> <ul class="dropdown-menu">
<li><a href="#">{{_i}}Another action{{/i}}</a></li> <li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li> <li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li class="divider"></li> <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> <li class="divider"></li>
</ul> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</div><!-- /btn-group --> </ul>
<div class="btn-group"> </div><!-- /btn-group -->
<button class="btn btn-danger">{{_i}}Danger{{/i}}</button> <div class="btn-group">
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <button class="btn btn-danger">{{_i}}Danger{{/i}}</button>
<ul class="dropdown-menu"> <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<li><a href="#">{{_i}}Action{{/i}}</a></li> <ul class="dropdown-menu">
<li><a href="#">{{_i}}Another action{{/i}}</a></li> <li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li> <li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li class="divider"></li> <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> <li class="divider"></li>
</ul> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</div><!-- /btn-group --> </ul>
</div> </div><!-- /btn-group -->
<div class="btn-toolbar"> <div class="btn-group">
<div class="btn-group"> <button class="btn btn-warning">{{_i}}Warning{{/i}}</button>
<button class="btn btn-warning">{{_i}}Warning{{/i}}</button> <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu">
<ul class="dropdown-menu"> <li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Action{{/i}}</a></li> <li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li> <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li> <li class="divider"></li>
<li class="divider"></li> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> </ul>
</ul> </div><!-- /btn-group -->
</div><!-- /btn-group --> <div class="btn-group">
<div class="btn-group"> <button class="btn btn-success">{{_i}}Success{{/i}}</button>
<button class="btn btn-success">{{_i}}Success{{/i}}</button> <button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu">
<ul class="dropdown-menu"> <li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Action{{/i}}</a></li> <li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li> <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li> <li class="divider"></li>
<li class="divider"></li> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> </ul>
</ul> </div><!-- /btn-group -->
</div><!-- /btn-group --> <div class="btn-group">
<div class="btn-group"> <button class="btn btn-info">{{_i}}Info{{/i}}</button>
<button class="btn btn-info">{{_i}}Info{{/i}}</button> <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu">
<ul class="dropdown-menu"> <li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Action{{/i}}</a></li> <li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li> <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li> <li class="divider"></li>
<li class="divider"></li> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> </ul>
</ul> </div><!-- /btn-group -->
</div><!-- /btn-group --> <div class="btn-group">
</div> <button class="btn btn-inverse">{{_i}}Inverse{{/i}}</button>
<div class="btn-toolbar"> <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<div class="btn-group"> <ul class="dropdown-menu">
<button class="btn btn-inverse">{{_i}}Inverse{{/i}}</button> <li><a href="#">{{_i}}Action{{/i}}</a></li>
<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <li><a href="#">{{_i}}Another action{{/i}}</a></li>
<ul class="dropdown-menu"> <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li><a href="#">{{_i}}Action{{/i}}</a></li> <li class="divider"></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li> </ul>
<li class="divider"></li> </div><!-- /btn-group -->
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> </div><!-- /btn-toolbar -->
</ul> </div>{{! /example }}
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<h3>{{_i}}Sizes{{/i}}</h3>
<p>{{_i}}Utilize the extra button classes <code>.btn-mini</code>, <code>.btn-small</code>, or <code>.btn-large</code> for sizing.{{/i}}</p>
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-large">{{_i}}Large action{{/i}}</button>
<button class="btn btn-large dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-small">{{_i}}Small action{{/i}}</button>
<button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-mini">{{_i}}Mini action{{/i}}</button>
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<pre class="prettyprint linenums">
&lt;div class="btn-group"&gt;
...
&lt;ul class="dropdown-menu pull-right"&gt;
&lt;!-- {{_i}}dropdown menu links{{/i}} --&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>
<h3>{{_i}}Example markup{{/i}}</h3>
<p>{{_i}}We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.{{/i}}</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="btn-group"&gt; &lt;div class="btn-group"&gt;
&lt;button class="btn"&gt;{{_i}}Action{{/i}}&lt;/button&gt; &lt;button class="btn"&gt;{{_i}}Action{{/i}}&lt;/button&gt;
@@ -403,32 +347,90 @@
&lt;/ul&gt; &lt;/ul&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<h3>{{_i}}Sizes{{/i}}</h3>
<p>{{_i}}Utilize the extra button classes <code>.btn-mini</code>, <code>.btn-small</code>, or <code>.btn-large</code> for sizing.{{/i}}</p>
<div class="bs-docs-example">
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-large">{{_i}}Large action{{/i}}</button>
<button class="btn btn-large dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-small">{{_i}}Small action{{/i}}</button>
<button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-mini">{{_i}}Mini action{{/i}}</button>
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
</div>{{! /example }}
<pre class="prettyprint linenums">
&lt;div class="btn-group"&gt;
&lt;button class="btn btn-mini"&gt;{{_i}}Action{{/i}}&lt;/button&gt;
&lt;button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"&gt;
&lt;span class="caret"&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;ul class="dropdown-menu"&gt;
&lt;!-- {{_i}}dropdown menu links{{/i}} --&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>
<h3>{{_i}}Dropup menus{{/i}}</h3> <h3>{{_i}}Dropup menus{{/i}}</h3>
<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>
<div class="btn-toolbar" style="margin-top: 9px;"> <div class="bs-docs-example">
<div class="btn-group dropup"> <div class="btn-toolbar" style="margin: 0;">
<button class="btn">{{_i}}Dropup{{/i}}</button> <div class="btn-group dropup">
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <button class="btn">{{_i}}Dropup{{/i}}</button>
<ul class="dropdown-menu"> <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<li><a href="#">{{_i}}Action{{/i}}</a></li> <ul class="dropdown-menu">
<li><a href="#">{{_i}}Another action{{/i}}</a></li> <li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li> <li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li class="divider"></li> <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> <li class="divider"></li>
</ul> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</div><!-- /btn-group --> </ul>
<div class="btn-group dropup"> </div><!-- /btn-group -->
<button class="btn primary">{{_i}}Right dropup{{/i}}</button> <div class="btn-group dropup">
<button class="btn primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <button class="btn primary">{{_i}}Right dropup{{/i}}</button>
<ul class="dropdown-menu pull-right"> <button class="btn primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<li><a href="#">{{_i}}Action{{/i}}</a></li> <ul class="dropdown-menu pull-right">
<li><a href="#">{{_i}}Another action{{/i}}</a></li> <li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li> <li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li class="divider"></li> <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> <li class="divider"></li>
</ul> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</div><!-- /btn-group --> </ul>
</div> </div><!-- /btn-group -->
</div>
</div>{{! /example }}
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="btn-group dropup"&gt; &lt;div class="btn-group dropup"&gt;
&lt;button class="btn"&gt;{{_i}}Dropup{{/i}}&lt;/button&gt; &lt;button class="btn"&gt;{{_i}}Dropup{{/i}}&lt;/button&gt;