diff options
| author | Mark Otto <[email protected]> | 2013-08-18 11:08:20 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-08-18 11:08:20 -0700 |
| commit | ef4590dfb461036c915d8fbc5b6fbf3ad7ba9c86 (patch) | |
| tree | 241c8bbe9dd2130de943f6fb8fdef7c1beeff478 /components.html | |
| parent | 3c1d951d2948f418ab83a592634a1aa52e34c09b (diff) | |
| download | bootstrap-ef4590dfb461036c915d8fbc5b6fbf3ad7ba9c86.tar.xz bootstrap-ef4590dfb461036c915d8fbc5b6fbf3ad7ba9c86.zip | |
fixes #9786: enable tables in panels
Diffstat (limited to 'components.html')
| -rw-r--r-- | components.html | 111 |
1 files changed, 111 insertions, 0 deletions
diff --git a/components.html b/components.html index 4e531e6a8..52a85cf03 100644 --- a/components.html +++ b/components.html @@ -2779,6 +2779,117 @@ body { padding-bottom: 70px; } <div class="panel panel-danger">...</div> {% endhighlight %} + <h3 id="panels-tables">With tables</h3> + <p>Add any non-bordered <code>.table</code> within a panel for a seamless design. If there is a <code>.panel-body</code>, we add an extra border to the top of the table for separation.</p> + <div class="bs-example"> + <div class="panel"> + <!-- Default panel contents --> + <div class="panel-heading">Panel heading</div> + <div class="panel-body"> + <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + </div> + + <!-- Table --> + <table class="table"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Username</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <td>2</td> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <td>3</td> + <td>Larry</td> + <td>the Bird</td> + <td>@twitter</td> + </tr> + </tbody> + </table> + </div> + </div> +{% highlight html %} +<div class="panel"> + <!-- Default panel contents --> + <div class="panel-heading">Panel heading</div> + <div class="panel-body"> + <p>...</p> + </div> + + <!-- Table --> + <table class="table"> + ... + </table> +</div> +{% endhighlight %} + + <p>If there is no panel body, the component moves from panel header to table without interruption.</p> + <div class="bs-example"> + <div class="panel"> + <!-- Default panel contents --> + <div class="panel-heading">Panel heading</div> + + <!-- Table --> + <table class="table"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Username</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <td>2</td> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <td>3</td> + <td>Larry</td> + <td>the Bird</td> + <td>@twitter</td> + </tr> + </tbody> + </table> + </div> + </div> +{% highlight html %} +<div class="panel"> + <!-- Default panel contents --> + <div class="panel-heading">Panel heading</div> + + <!-- Table --> + <table class="table"> + ... + </table> +</div> +{% endhighlight %} + + + <h3 id="panels-list-group">With list groups</h3> <p>Easily include full-width <a href="#list-group">list groups</a> within any panel.</p> <div class="bs-example"> |