mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-21 13:24:08 +03:00
button groups and dropdowns to single column
This commit is contained in:
Mark Otto
+321
-338
@@ -101,11 +101,11 @@
|
||||
</li>
|
||||
<li><a href="#labels">Labels</a></li>
|
||||
<li><a href="#badges">Badges</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#typography">Type</a></li>
|
||||
<li><a href="#thumbnails">Thumbnails</a></li>
|
||||
<li><a href="#alerts">Alerts</a></li>
|
||||
<li><a href="#progress">Progress bars</a></li>
|
||||
<li><a href="#misc">Miscellaneous</a></li>
|
||||
<li><a href="#misc">Misc</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
@@ -118,29 +118,27 @@
|
||||
<div class="page-header">
|
||||
<h1>Button groups <small>Join buttons for more toolbar-like functionality</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="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>
|
||||
<h3>Best practices</h3>
|
||||
<p>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><a></code> or <code><button></code>.</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>
|
||||
</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>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>
|
||||
<h3>Best practices</h3>
|
||||
<p>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><a></code> or <code><button></code>.</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>
|
||||
</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;">
|
||||
<button class="btn">Left</button>
|
||||
<button class="btn">Middle</button>
|
||||
<button class="btn">Right</button>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<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;">
|
||||
<button class="btn">Left</button>
|
||||
<button class="btn">Middle</button>
|
||||
<button class="btn">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-group">
|
||||
<button class="btn">1</button>
|
||||
@@ -148,24 +146,24 @@
|
||||
<button class="btn">3</button>
|
||||
</div>
|
||||
</pre>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group">
|
||||
@@ -173,15 +171,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="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 <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 »</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>
|
||||
</div>
|
||||
</div>
|
||||
<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 »</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>
|
||||
|
||||
|
||||
@@ -194,88 +188,86 @@
|
||||
</div>
|
||||
|
||||
<h2>Button dropdowns</h2>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<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>
|
||||
<div class="btn-toolbar" style="margin-top: 18px;">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <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-primary dropdown-toggle" data-toggle="dropdown">Action <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-danger dropdown-toggle" data-toggle="dropdown">Danger <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-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 class="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>
|
||||
|
||||
<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>
|
||||
<div class="btn-toolbar" style="margin-top: 18px;">
|
||||
<div class="btn-group">
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <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-primary dropdown-toggle" data-toggle="dropdown">Action <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-danger dropdown-toggle" data-toggle="dropdown">Danger <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-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">
|
||||
<div class="btn-group">
|
||||
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
@@ -287,182 +279,176 @@
|
||||
</ul>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<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>
|
||||
<div class="btn-toolbar" style="margin-top: 18px;">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-large dropdown-toggle" data-toggle="dropdown">Large button <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-small dropdown-toggle" data-toggle="dropdown">Small button <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-mini dropdown-toggle" data-toggle="dropdown">Mini button <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><!--/span-->
|
||||
<div class="span4">
|
||||
<h3>Requires javascript</h3>
|
||||
<p>Button dropdowns require the <a href="./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-->
|
||||
|
||||
<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>
|
||||
<div class="btn-toolbar" style="margin-top: 18px;">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-large dropdown-toggle" data-toggle="dropdown">Large button <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-small dropdown-toggle" data-toggle="dropdown">Small button <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-mini dropdown-toggle" data-toggle="dropdown">Mini button <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>Requires javascript</h3>
|
||||
<p>Button dropdowns require the <a href="./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>
|
||||
|
||||
<br>
|
||||
|
||||
<h2>Split button dropdowns</h2>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<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>
|
||||
<div class="btn-toolbar" style="margin-top: 18px;">
|
||||
<div class="btn-group">
|
||||
<button class="btn">Action</button>
|
||||
<button class="btn 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-primary">Action</button>
|
||||
<button class="btn btn-primary 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-danger">Danger</button>
|
||||
<button class="btn btn-danger 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-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 -->
|
||||
|
||||
<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>
|
||||
<div class="btn-toolbar" style="margin-top: 18px;">
|
||||
<div class="btn-group">
|
||||
<button class="btn">Action</button>
|
||||
<button class="btn 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-primary">Action</button>
|
||||
<button class="btn btn-primary 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-danger">Danger</button>
|
||||
<button class="btn btn-danger 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-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">
|
||||
<div class="btn-group">
|
||||
...
|
||||
@@ -471,10 +457,9 @@
|
||||
</ul>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="span8">
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<div class="btn-group">
|
||||
<button class="btn">Action</button>
|
||||
@@ -486,32 +471,32 @@
|
||||
</ul>
|
||||
</div>
|
||||
</pre>
|
||||
<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>
|
||||
<div class="btn-toolbar" style="margin-top: 9px;">
|
||||
<div class="btn-group dropup">
|
||||
<button class="btn">Dropup</button>
|
||||
<button class="btn 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 dropup">
|
||||
<button class="btn primary">Right dropup</button>
|
||||
<button class="btn primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
|
||||
<ul class="dropdown-menu pull-right">
|
||||
<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>
|
||||
<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>
|
||||
<div class="btn-toolbar" style="margin-top: 9px;">
|
||||
<div class="btn-group dropup">
|
||||
<button class="btn">Dropup</button>
|
||||
<button class="btn 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 dropup">
|
||||
<button class="btn primary">Right dropup</button>
|
||||
<button class="btn primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
|
||||
<ul class="dropdown-menu pull-right">
|
||||
<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>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-group dropup">
|
||||
<button class="btn">Dropup</button>
|
||||
@@ -524,8 +509,6 @@
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user