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-bordered">Bordered tables</a></li>
<li><a href="#tables-hover-rows">Hover rows</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-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> </ul>
</li> </li>
<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> <p>Use contextual classes to color table rows or individual cells.</p>
<div class="bs-table-scrollable"> <div class="bs-table-scrollable">
<table class="table table-bordered table-striped bs-table"> <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> <tbody>
<tr> <tr>
<td> <td>
<code>.success</code> <code>.active</code>
</td> </td>
<td>Indicates a successful or positive action</td> <td>Applies the hover color to a particular row or cell</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<code>.danger</code> <code>.success</code>
</td> </td>
<td>Indicates a dangerous or potentially negative action</td> <td>Indicates a successful or positive action</td>
</tr> </tr>
<tr> <tr>
<td> <td>
@ -1261,9 +1261,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</tr> </tr>
<tr> <tr>
<td> <td>
<code>.active</code> <code>.danger</code>
</td> </td>
<td>Applies the hover color to a particular row or cell</td> <td>Indicates a dangerous or potentially negative action</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -1279,7 +1279,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class="success"> <tr class="active">
<td>1</td> <td>1</td>
<td>Column content</td> <td>Column content</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>
<td>Column content</td> <td>Column content</td>
</tr> </tr>
<tr class="danger"> <tr class="success">
<td>3</td> <td>3</td>
<td>Column content</td> <td>Column content</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>
<td>Column content</td> <td>Column content</td>
</tr> </tr>
<tr class="active"> <tr class="danger">
<td>7</td> <td>7</td>
<td>Column content</td> <td>Column content</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> </table>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<tr class="success"> <!-- On rows -->
<td>1</td> <tr class="active">...</tr>
<td>Column content</td> <tr class="success">...</tr>
<td>Column content</td> <tr class="warning">...</tr>
<td>Column content</td> <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> </tr>
{% endhighlight %} {% endhighlight %}