mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-07 14:16:47 +02:00
Code Issues Releases Wiki Activity

Overhaul tables docs and use rgba() colors for inverse tables

Browse Source 
- Add inverse examples for all variants
- Use rgba() colors for hover and accent states for easy usage in inverse styles
This commit is contained in:
Mark Otto
2016-05-11 16:28:28 -07:00
parent 7fa88b3b8a
commit d74a897f55
3 changed files with 172 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
docs/content/tables.md
View File

@@ -188,6 +188,39 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`
</table> </table>
{% endexample %} {% 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 ## Bordered table
Add `.table-bordered` for borders on all sides of the table and cells. 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> </table>
{% endexample %} {% 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 ## Hoverable rows
Add `.table-hover` to enable a hover state on table rows within a `<tbody>`. 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> </table>
{% endexample %} {% 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 ## Small table
Add `.table-sm` to make tables more compact by cutting cell padding in half. 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> </table>
{% endexample %} {% 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 ## Contextual classes
Use contextual classes to color table rows or individual cells. Use contextual classes to color table rows or individual cells.

64
scss/_tables.scss
View File

@@ -99,6 +99,41 @@
@include table-row-variant(danger, $state-danger-bg); @include table-row-variant(danger, $state-danger-bg);
// Inverse styles
//
// Same table markup, but inverted color scheme—dark background and light text.
.thead-inverse {
th {
color: #fff;
background-color: $gray-dark;
}
}
.thead-default {
th {
color: $gray;
background-color: $gray-lighter;
}
}
.table-inverse {
color: $gray-lighter;
background-color: $gray-dark;
th,
td,
thead th {
border-color: $gray;
}
&.table-bordered {
border: 0;
}
}
// Responsive tables // Responsive tables
// //
// Wrap your tables in `.table-responsive` and we'll make them mobile friendly // Wrap your tables in `.table-responsive` and we'll make them mobile friendly
@@ -118,35 +153,6 @@
} }
.thead-inverse {
th {
color: #fff;
background-color: $gray-dark;
}
}
.thead-default {
th {
color: $gray;
background-color: $gray-lighter;
}
}
.table-inverse {
color: $gray-lighter;
background-color: $gray-dark;
&.table-bordered {
border: 0;
}
th,
td,
thead th {
border-color: $gray;
}
}
.table-reflow { .table-reflow {
thead { thead {
float: left; float: left;

4
scss/_variables.scss
View File

@@ -244,8 +244,8 @@ $table-cell-padding: .75rem !default;
$table-sm-cell-padding: .3rem !default; $table-sm-cell-padding: .3rem !default;
$table-bg: transparent !default; $table-bg: transparent !default;
$table-bg-accent: #f9f9f9 !default; $table-bg-accent: rgba(0,0,0,.05) !default;
$table-bg-hover: #f5f5f5 !default; $table-bg-hover: rgba(0,0,0,.075) !default;
$table-bg-active: $table-bg-hover !default; $table-bg-active: $table-bg-hover !default;
$table-border-width: $border-width !default; $table-border-width: $border-width !default;