diff options
| author | Mark Otto <[email protected]> | 2012-01-05 22:37:23 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2012-01-05 22:37:23 -0800 |
| commit | 7582520808ad6c3610831652d0d4d33ea4ebf15b (patch) | |
| tree | d006081c1c41514a7b6bfd1d187bcb997db839ba /docs/base-css.html | |
| parent | 9bedfa447c52ae45c1a144fba27160811dfb40a2 (diff) | |
| download | bootstrap-7582520808ad6c3610831652d0d4d33ea4ebf15b.tar.xz bootstrap-7582520808ad6c3610831652d0d4d33ea4ebf15b.zip | |
docs cleanup and navbar brand hover
Diffstat (limited to 'docs/base-css.html')
| -rw-r--r-- | docs/base-css.html | 68 |
1 files changed, 41 insertions, 27 deletions
diff --git a/docs/base-css.html b/docs/base-css.html index 225f10ae2..a0c3c4cf1 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -638,7 +638,6 @@ <h3>3. Bordered table</h3> <p>Add borders around the entire table and between each row, plus a bit of rounded corners for aesthetic purposes.</p> - <p><span class="label">Note</span> Bordered tables do not work well with <code>rowspan</code> due to somewhat hacky CSS applied to the tables. Sorry about that!</p> <table class="bordered-table"> <thead> <tr> @@ -1177,37 +1176,52 @@ </div> </div> - <h2>Button groups</h2> - <div class="well"> - <div class="btn-group"> - <a class="btn" href="#">Left</a> - <a class="btn" href="#">Middle</a> - <a class="btn" href="#">Right</a> + <br> + + <div class="row"> + <div class="span4"> + <h2>Button groups</h2> + <p>Use button groups to join multiple buttons together as one composite component. Button groups can be built with not only <code><a></code> or <code><button></code> elements, but also radios and checkboxes.</p> + <p>You can also combine sets of button groups into a toolbar for more complex projects.</p> + <p><a class="btn js-btn" href="./javascript.html#buttons">Get the javascript »</a></p> + <p class="muted">Heads up: CSS for button groups is in a separate file, button-groups.less.</p> </div> - </div> - <div class="well"> - <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> - <a class="btn" href="#">5</a> - </div> - <div class="btn-group"> - <a class="btn" href="#">6</a> - <a class="btn" href="#">7</a> - <a class="btn" href="#">8</a> - </div> - <div class="btn-group"> - <a class="btn" href="#">9</a> + <div class="span8"> + <h3>Linked button group</h3> + <p>Using the standard <code><a class="btn" href="#">...</a></code> markup, simply add all the buttons you need.</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="btn-group"> - <a class="btn" href="#">10</a> + <p>Level up one more time by wrapping multiple instances of <code><div class="btn-group"></code> with <code><div class="btn-toolbar"></code>.</p> + <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> + <a class="btn" href="#">5</a> + </div> + <div class="btn-group"> + <a class="btn" href="#">6</a> + <a class="btn" href="#">7</a> + <a class="btn" href="#">8</a> + </div> + <div class="btn-group"> + <a class="btn" href="#">9</a> + </div> + <div class="btn-group"> + <a class="btn" href="#">10</a> + </div> + </div> </div> </div> </div> - + </section> |