diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/content/tables.md | 135 |
1 files changed, 135 insertions, 0 deletions
diff --git a/docs/content/tables.md b/docs/content/tables.md index fc6a6b19b..3b4d58b36 100644 --- a/docs/content/tables.md +++ b/docs/content/tables.md @@ -188,6 +188,39 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>` </table> {% endexample %} +{% example html %} +<table class="table table-striped table-inverse"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Username</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Larry</td> + <td>the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +{% endexample %} + ## Bordered table Add `.table-bordered` for borders on all sides of the table and cells. @@ -230,6 +263,44 @@ Add `.table-bordered` for borders on all sides of the table and cells. </table> {% endexample %} +{% example html %} +<table class="table table-bordered table-inverse"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Username</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Mark</td> + <td>Otto</td> + <td>@TwBootstrap</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">4</th> + <td colspan="2">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +{% endexample %} + ## Hoverable rows Add `.table-hover` to enable a hover state on table rows within a `<tbody>`. @@ -266,6 +337,38 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`. </table> {% endexample %} +{% example html %} +<table class="table table-hover table-inverse"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Username</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td colspan="2">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +{% endexample %} + ## Small table Add `.table-sm` to make tables more compact by cutting cell padding in half. @@ -302,6 +405,38 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half. </table> {% endexample %} +{% example html %} +<table class="table table-sm table-inverse"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Username</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td colspan="2">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +{% endexample %} + ## Contextual classes Use contextual classes to color table rows or individual cells. |