mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 21:49:09 +01:00
Code Issues Releases Wiki Activity

Fixes #8452: adds .active to table classes

Browse Source
This commit is contained in:
Mark Otto 2013-07-18 00:10:22 -07:00
parent 87adbf7aa4
commit 79a10feb7a
3 changed files with 63 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/assets/css/bootstrap.css vendored
View File

@ -1249,6 +1249,12 @@ table th[class^="col-"] {
float: none; float: none;
} }
.table > tbody > tr > td.active,
.table > tbody > tr > th.active,
.table > tbody > tr.active > td {
background-color: #f5f5f5;
}
.table > tbody > tr > td.success, .table > tbody > tr > td.success,
.table > tbody > tr > th.success, .table > tbody > tr > th.success,
.table > tbody > tr.success > td { .table > tbody > tr.success > td {

76
docs/css.html
View File

@ -1048,8 +1048,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="tables-row-classes">Optional row classes</h2> <h2 id="tables-row-classes">Contextual table classes</h2>
<p>Use contextual classes to color table rows.</p> <p>Use contextual classes to color table rows or individual cells.</p>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<colgroup> <colgroup>
<col class="col-lg-1"> <col class="col-lg-1">
@ -1066,19 +1066,25 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<td> <td>
<code>.success</code> <code>.success</code>
</td> </td>
<td>Indicates a successful or positive action.</td> <td>Indicates a successful or positive action</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<code>.danger</code> <code>.danger</code>
</td> </td>
<td>Indicates a dangerous or potentially negative action.</td> <td>Indicates a dangerous or potentially negative action</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<code>.warning</code> <code>.warning</code>
</td> </td>
<td>Indicates a warning that might need attention.</td> <td>Indicates a warning that might need attention</td>
</tr>
<tr>
<td>
<code>.active</code>
</td>
<td>Applies the hover color to a particular row or cell</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -1087,42 +1093,64 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>
<th>Product</th> <th>Column heading</th>
<th>Payment Taken</th> <th>Column heading</th>
<th>Status</th> <th>Column heading</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class="success"> <tr class="success">
<td>1</td> <td>1</td>
<td>TB - Monthly</td> <td>Column content</td>
<td>01/04/2012</td> <td>Column content</td>
<td>Approved</td> <td>Column content</td>
</tr>
<tr>
<td>2</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr> </tr>
<tr class="danger"> <tr class="danger">
<td>2</td> <td>3</td>
<td>TB - Monthly</td> <td>Column content</td>
<td>02/04/2012</td> <td>Column content</td>
<td>Declined</td> <td>Column content</td>
</tr>
<tr>
<td>4</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr> </tr>
<tr class="warning"> <tr class="warning">
<td>3</td> <td>5</td>
<td>TB - Monthly</td> <td>Column content</td>
<td>03/04/2012</td> <td>Column content</td>
<td>Pending</td> <td>Column content</td>
</tr>
<tr>
<td>6</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<td>7</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
...
<tr class="success"> <tr class="success">
<td>1</td> <td>1</td>
<td>TB - Monthly</td> <td>Column content</td>
<td>01/04/2012</td> <td>Column content</td>
<td>Approved</td> <td>Column content</td>
</tr> </tr>
...
{% endhighlight %} {% endhighlight %}
</div> </div>

5
less/tables.less
View File

@ -219,6 +219,11 @@ table {
// Exact selectors below required to override .table-striped // Exact selectors below required to override .table-striped
.table > tbody > tr { .table > tbody > tr {
> td.active,
> th.active,
&.active > td {
background-color: @table-bg-hover;
}
> td.success, > td.success,
> th.success, > th.success,
&.success > td { &.success > td {