Skip to content

B
bootstrap
Commit 79a10feb authored by Mark Otto's avatar Mark Otto
Browse files
Options

Fixes #8452: adds `.active` to table classes

parent 87adbf7a
Hide whitespace changes
Inline Side-by-side
Showing with 63 additions and 24 deletions
docs/assets/css/bootstrap.css
View file @ 79a10feb
......@@ -1249,6 +1249,12 @@ table th[class^="col-"] {
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 > th.success,
.table > tbody > tr.success > td {
......
docs/css.html
View file @ 79a10feb
......@@ -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>
<p>Use contextual classes to color table rows.</p>
<h2 id="tables-row-classes">Contextual table classes</h2>
<p>Use contextual classes to color table rows or individual cells.</p>
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-lg-1">
......@@ -1066,19 +1066,25 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<td>
<code>.success</code>
</td>
<td>Indicates a successful or positive action.</td>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<td>
<code>.danger</code>
</td>
<td>Indicates a dangerous or potentially negative action.</td>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
<tr>
<td>
<code>.warning</code>
</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>
</tbody>
</table>
......@@ -1087,42 +1093,64 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<thead>
<tr>
<th>#</th>
<th>Product</th>
<th>Payment Taken</th>
<th>Status</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>TB - Monthly</td>
<td>01/04/2012</td>
<td>Approved</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="danger">
<tr>
<td>2</td>
<td>TB - Monthly</td>
<td>02/04/2012</td>
<td>Declined</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="warning">
<tr class="danger">
<td>3</td>
<td>TB - Monthly</td>
<td>03/04/2012</td>
<td>Pending</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<td>4</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="warning">
<td>5</td>
<td>Column content</td>
<td>Column content</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>
</tbody>
</table>
</div><!-- /example -->
{% highlight html %}
...
<tr class="success">
<td>1</td>
<td>TB - Monthly</td>
<td>01/04/2012</td>
<td>Approved</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
...
{% endhighlight %}
</div>
......
less/tables.less
View file @ 79a10feb
......@@ -219,6 +219,11 @@ table {
// Exact selectors below required to override .table-striped
.table > tbody > tr {
> td.active,
> th.active,
&.active > td {
background-color: @table-bg-hover;
}
> td.success,
> th.success,
&.success > td {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment