aboutsummaryrefslogtreecommitdiff
path: root/docs/base-css.html
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2012-01-08 21:48:07 -0800
committerMark Otto <[email protected]>2012-01-08 21:48:07 -0800
commit83c0896999c91f4d85bb75434f4a4ecfaff07fe0 (patch)
tree621419a0ef73327a62ec4d168dc761351438b5a6 /docs/base-css.html
parenteaa8220d70f84a710c9dfa1bd49a7c35bcab1a3b (diff)
downloadbootstrap-83c0896999c91f4d85bb75434f4a4ecfaff07fe0.tar.xz
bootstrap-83c0896999c91f4d85bb75434f4a4ecfaff07fe0.zip
updated js pages to put examples first
Diffstat (limited to 'docs/base-css.html')
-rw-r--r--docs/base-css.html146
1 files changed, 0 insertions, 146 deletions
diff --git a/docs/base-css.html b/docs/base-css.html
index c1cb3fd2d..29f5d1d19 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1277,152 +1277,6 @@
<br>
- <h2>Button groups <small>Join buttons for more toolbar-like functionality</small></h2>
- <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>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements.</p>
- <p>You can also combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex projects.</p>
- <div class="well" style="padding: 10px; margin-bottom: 9px;">
- <div class="btn-group">
- <a class="btn" href="#">Left</a>
- <a class="btn" href="#">Middle</a>
- <a class="btn" href="#">Right</a>
- </div>
- </div>
- <div class="well" style="padding: 10px;">
- <div class="btn-toolbar">
- <div class="btn-group">
- <a class="btn" href="#">1</a>
- <a class="btn" href="#">2</a>
- <a class="btn" href="#">3</a>
- <a class="btn" href="#">4</a>
- </div>
- <div class="btn-group">
- <a class="btn" href="#">5</a>
- <a class="btn" href="#">6</a>
- <a class="btn" href="#">7</a>
- </div>
- <div class="btn-group">
- <a class="btn" href="#">8</a>
- </div>
- </div>
- </div>
-
- </div>
- <div class="span4">
- <h3>Example markup</h3>
- <p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
-<pre class="prettyprint linenums">
-&lt;div class="btn-group"&gt;
- &lt;a class="btn" href="#"&gt;1&lt;/a&gt;
- &lt;a class="btn" href="#"&gt;2&lt;/a&gt;
- &lt;a class="btn" href="#"&gt;3&lt;/a&gt;
-&lt;/div&gt;
-</pre>
- <p>And with a toolbar for multiple groups:</p>
-<pre class="prettyprint linenums">
-&lt;div class="btn-toolbar"&gt;
- &lt;div class="btn-group"&gt;
- ...
- &lt;/div&gt;
-&lt;/div&gt;
-</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 &raquo;</a></p>
- <hr>
- <h4 class="muted">Heads up</h4>
- <p class="muted">CSS for button groups is in a separate file, button-groups.less.</p>
- </div>
- </div>
-
- <br>
- <h2>Button dropdowns <small>Built on button groups to provide contextual menus</small></h2>
- <div class="row">
- <div class="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>
- <div class="well" style="padding: 10px; margin-bottom: 9px;">
- <div class="btn-toolbar" style="margin-bottom: 9px;">
- <div class="btn-group">
- <a class="btn" href="#">Action</a>
- <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
- <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">
- <a class="btn primary" href="#">Action</a>
- <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
- <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">
- <a class="btn danger" href="#">Danger</a>
- <a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
- <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">
- <a class="btn success" href="#">Success</a>
- <a class="btn success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
- <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">
- <a class="btn info" href="#">Info</a>
- <a class="btn info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
- <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> <!-- /well -->
- </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>
-<pre class="prettyprint linenums">
-&lt;div class="btn-group"&gt;
- &lt;a class="btn" href="#"&gt;Action&lt;/a&gt;
- &lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
- &lt;span class="caret"&gt;&lt;/span&gt;
- &lt;/a&gt;
- &lt;ul class="dropdown-menu"&gt;
- &lt;!-- dropdown menu links --&gt;
- &lt;/ul&gt;
-&lt;/div&gt;
-</pre>
- </div>
- </div>
</section>