improve table classes' snippets and ordering

This commit is contained in:
Mark Otto 2013-08-15 13:00:34 -07:00
parent 69a7c16705
commit 8211b12c0f
2 changed files with 23 additions and 16 deletions

View File

@ -48,7 +48,7 @@
<li><a href="#tables-bordered">Bordered tables</a></li>
<li><a href="#tables-hover-rows">Hover rows</a></li>
<li><a href="#tables-condensed">Condensed tables</a></li>
<li><a href="#tables-row-classes">Contextual row classes</a></li>
<li><a href="#tables-contextual-classes">Contextual classes</a></li>
</ul>
</li>
<li>

View File

@ -1226,7 +1226,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="tables-row-classes">Contextual table classes</h2>
<h2 id="tables-contextual-classes">Contextual table classes</h2>
<p>Use contextual classes to color table rows or individual cells.</p>
<div class="bs-table-scrollable">
<table class="table table-bordered table-striped bs-table">
@ -1243,15 +1243,15 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<tbody>
<tr>
<td>
<code>.success</code>
<code>.active</code>
</td>
<td>Indicates a successful or positive action</td>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<td>
<code>.danger</code>
<code>.success</code>
</td>
<td>Indicates a dangerous or potentially negative action</td>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<td>
@ -1261,9 +1261,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</tr>
<tr>
<td>
<code>.active</code>
<code>.danger</code>
</td>
<td>Applies the hover color to a particular row or cell</td>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
@ -1279,7 +1279,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</tr>
</thead>
<tbody>
<tr class="success">
<tr class="active">
<td>1</td>
<td>Column content</td>
<td>Column content</td>
@ -1291,7 +1291,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="danger">
<tr class="success">
<td>3</td>
<td>Column content</td>
<td>Column content</td>
@ -1315,7 +1315,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<tr class="danger">
<td>7</td>
<td>Column content</td>
<td>Column content</td>
@ -1325,11 +1325,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</table>
</div><!-- /example -->
{% highlight html %}
<tr class="success">
<td>1</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
</tr>
{% endhighlight %}