rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

fixes #9786: enable tables in panels

Browse Source
This commit is contained in:
Mark Otto 2013-08-18 11:08:20 -07:00
parent 3c1d951d29
commit ef4590dfb4
4 changed files with 144 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
components.html
View File

@ -2779,6 +2779,117 @@ body { padding-bottom: 70px; }
<div class="panel panel-danger">...</div> <div class="panel panel-danger">...</div>
{% endhighlight %} {% 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> <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> <p>Easily include full-width <a href="#list-group">list groups</a> within any panel.</p>
<div class="bs-example"> <div class="bs-example">

12
dist/css/bootstrap.css vendored
View File

@ -5231,6 +5231,10 @@ a.list-group-item:focus {
clear: both; clear: both;
} }
.panel > .table {
margin-bottom: 0;
}
.panel > .list-group { .panel > .list-group {
margin-bottom: 0; margin-bottom: 0;
} }
@ -5252,6 +5256,14 @@ a.list-group-item:focus {
border-top-width: 0; border-top-width: 0;
} }
.panel > .table {
margin-bottom: 0;
}
.panel > .panel-body + .table {
border-top: 1px solid #dddddd;
}
.panel-heading { .panel-heading {
padding: 10px 15px; padding: 10px 15px;
background-color: #f5f5f5; background-color: #f5f5f5;

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

20
less/panels.less
View File

@ -18,12 +18,16 @@
.clearfix(); .clearfix();
} }
// List groups in panels // List groups in panels
// //
// By default, space out list group content from panel headings to account for // By default, space out list group content from panel headings to account for
// any kind of custom content between the two. // any kind of custom content between the two.
.panel { .panel {
> .table {
margin-bottom: 0;
}
> .list-group { > .list-group {
margin-bottom: 0; margin-bottom: 0;
@ -48,6 +52,22 @@
} }
} }
// Tables in panels
//
// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
// watch it go full width.
.panel {
> .table {
margin-bottom: 0;
}
> .panel-body + .table {
border-top: 1px solid @table-border-color;
}
}
// Optional heading // Optional heading
.panel-heading { .panel-heading {
padding: 10px 15px; padding: 10px 15px;