Tabelas
Estilos de tabelas, tal como: linhas listradas, com bordas e outros.
Conteúdo
Exemplo basico
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |
<table class="table">
<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>
Linhas listradas
Use .table-striped
para adicionar linhas zebradas à qualquer linha da tabela dentro do <tbody>
.
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |
<table class="table table-striped">
<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>
Adicione .table-bordered
para bordas em todoas os lados da tabela e celulas.
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Mark |
Otto |
@TwBootstrap |
3 |
Jacob |
Thornton |
@fat |
4 |
Larry the Bird |
@twitter |
<table class="table table-bordered">
<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>
Adicione .table-hover
para habilitar um efeito hover nas linhas da tabela dentro do <tbody>
.
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry the Bird |
@twitter |
<table class="table table-hover">
<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>
Tabela condensada
Adicione .table-condensed
para fazer as tabelas mais comactadas por cortar o padding das celulas na metade.
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry the Bird |
@twitter |
<table class="table table-condensed">
<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>
Classes contextuais
Use classes contextuais para colorir as linhas da tabela ou células individuais.
Classe |
Descrição |
.active
|
Aplique a cor de hover para uma linha ou célula em particular |
.success
|
Indica uma ação bem-sucedida ou positiva |
.info
|
Indica uma alteração de informação neutra ou ação |
.warning
|
Indica um aviso de que pode precisar de atenção |
.danger
|
Indica uma ação perigosa ou potencialmente negativa |
# |
Título da coluna |
Título da coluna |
Título da coluna |
1 |
Conteúdo da coluna |
Conteúdo da coluna |
Conteúdo da coluna |
2 |
Conteúdo da coluna |
Conteúdo da coluna |
Conteúdo da coluna |
3 |
Conteúdo da coluna |
Conteúdo da coluna |
Conteúdo da coluna |
4 |
Conteúdo da coluna |
Conteúdo da coluna |
Conteúdo da coluna |
5 |
Conteúdo da coluna |
Conteúdo da coluna |
Conteúdo da coluna |
6 |
Conteúdo da coluna |
Conteúdo da coluna |
Conteúdo da coluna |
7 |
Conteúdo da coluna |
Conteúdo da coluna |
Conteúdo da coluna |
8 |
Conteúdo da coluna |
Conteúdo da coluna |
Conteúdo da coluna |
9 |
Conteúdo da coluna |
Conteúdo da coluna |
Conteúdo da coluna |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>