diff options
| author | Mark Otto <[email protected]> | 2012-01-27 19:49:56 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2012-01-27 19:49:56 -0800 |
| commit | d02c6957d44761c35121cb88af727802ce4d9e5e (patch) | |
| tree | f54e91a3377c1c9b3ec668926ecc103754e81305 /docs/components.html | |
| parent | a624ac1edf7484dbdf7f4176d9d4485f1878f4e5 (diff) | |
| download | bootstrap-d02c6957d44761c35121cb88af727802ce4d9e5e.tar.xz bootstrap-d02c6957d44761c35121cb88af727802ce4d9e5e.zip | |
fixing up buttons and examples of implementing icons
Diffstat (limited to 'docs/components.html')
| -rw-r--r-- | docs/components.html | 153 |
1 files changed, 74 insertions, 79 deletions
diff --git a/docs/components.html b/docs/components.html index cf5fcb928..6ebf6a4f0 100644 --- a/docs/components.html +++ b/docs/components.html @@ -96,32 +96,29 @@ <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-toolbar" style="margin-top: 18px;"> <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 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 class="span4"> <h3>Example markup</h3> @@ -165,67 +162,65 @@ <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 class="btn-toolbar" style="margin-top: 18px;"> + <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> <div class="span8"> <h3>Example markup</h3> |