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

#3223: make table row hover optional class

Browse Source
This commit is contained in:
Mark Otto 2012-06-25 14:11:37 -07:00
parent 508a93d9e3
commit 27845e4492
4 changed files with 81 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1748,8 +1748,8 @@ table {
background-color: #f9f9f9; background-color: #f9f9f9;
} }
.table tbody tr:hover td, .table-hover tbody tr:hover td,
.table tbody tr:hover th { .table-hover tbody tr:hover th {
background-color: #f5f5f5; background-color: #f5f5f5;
} }

39
docs/base-css.html
View File

@ -566,6 +566,45 @@ For example, <code>section</code> should be wrapped as inline.
<table class="table table-bordered"> <table class="table table-bordered">
… …
</table> </table>
</pre>
<h3><code>.table-hover</code></h3>
<p>Enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
<div class="bs-docs-example">
<table class="table table-hover">
<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 colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table table-hover"&gt;
…
&lt;/table&gt;
</pre> </pre>
<h3><code>.table-condensed</code></h3> <h3><code>.table-condensed</code></h3>

39
docs/templates/pages/base-css.mustache vendored
View File

@ -497,6 +497,45 @@
&lt;table class="table table-bordered"&gt; &lt;table class="table table-bordered"&gt;
… …
&lt;/table&gt; &lt;/table&gt;
</pre>
<h3><code>{{_i}}.table-hover{{/i}}</code></h3>
<p>{{_i}}Enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.{{/i}}</p>
<div class="bs-docs-example">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th>
<th>{{_i}}Username{{/i}}</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 colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>{{! /example }}
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table table-hover"&gt;
…
&lt;/table&gt;
</pre> </pre>
<h3><code>{{_i}}.table-condensed{{/i}}</code></h3> <h3><code>{{_i}}.table-condensed{{/i}}</code></h3>

2
less/tables.less
View File

@ -136,7 +136,7 @@ table {
// HOVER EFFECT // HOVER EFFECT
// ------------ // ------------
// Placed here since it has to come after the potential zebra striping // Placed here since it has to come after the potential zebra striping
.table { .table-hover {
tbody tr:hover td, tbody tr:hover td,
tbody tr:hover th { tbody tr:hover th {
background-color: @tableBackgroundHover; background-color: @tableBackgroundHover;