diff options
Diffstat (limited to 'docs/base-css.html')
| -rw-r--r-- | docs/base-css.html | 146 |
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><a></code> or <code><button></code> elements.</p> - <p>You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex projects.</p> - <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"> -<div class="btn-group"> - <a class="btn" href="#">1</a> - <a class="btn" href="#">2</a> - <a class="btn" href="#">3</a> -</div> -</pre> - <p>And with a toolbar for multiple groups:</p> -<pre class="prettyprint linenums"> -<div class="btn-toolbar"> - <div class="btn-group"> - ... - </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> - <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"> -<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"> - <!-- dropdown menu links --> - </ul> -</div> -</pre> - </div> - </div> </section> |