Tabelas
Padrão de tabelas
Tabela básica
Fizemos uma classe customizada para fazer nosso estilo, essa classe é a ls-table. Basta inserir essa classe em uma tabela para deixá-la com o visual abaixo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <table class="ls-table">
<thead>
<tr>
<th>Título</th>
<th class="hidden-xs">Campanha</th>
<th>Status</th>
<th class="hidden-xs">Data de envio</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="" title="">Mensagem Teste Locastyle</a></td>
<td class="hidden-xs">Campanha</td>
<td>Enviada</td>
<td class="hidden-xs">21/09/2013 as 20:00 PM</td>
</tr>
<tr>
<td><a href="" title="">Mensagem Teste Locastyle</a></td>
<td class="hidden-xs">Campanha</td>
<td>Enviada</td>
<td class="hidden-xs">21/09/2013 as 20:00 PM</td>
</tr>
</tbody>
</table>
|
Classes adicionais
Logo abaixo segue as classes que modificam diretamente a tabela. Logo após você pode ver o exemplo de cada uma dessas classes.
| Classe |
Descrição |
| ls-table |
Formatação padrão da classe. Sem essa classe, a tabela fica sem formatação, o que possibilita que você faça seu estilo. |
| ls-xs-space, ls-sm-space, ls-md-space, ls-lg-space |
Aumenta ou diminui o espaçamento entre linhas e colunas. |
| ls-no-hover |
Desabilita o hover nas linhas. |
| ls-bg-header |
Insere um background no header da tabela. |
| ls-table-striped |
Deixa a tabela com visual listrado como zebra. |
| ls-table-bordered |
Coloca uma borda em todos os lados da tabela. |
Tabela sem hover
A classe .ls-no-hover, remove o estilo de hover das tabelas, mesmo quando ela for zebrada.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <table class="ls-table ls-no-hover ls-table-striped">
<thead>
<tr>
<th>Título</th>
<th class="hidden-xs">Campanha</th>
<th>Status</th>
<th class="hidden-xs">Data de envio</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="" title="">Mensagem Teste Locastyle</a></td>
<td class="hidden-xs">Campanha</td>
<td>Enviada</td>
<td class="hidden-xs">21/09/2013 as 20:00 PM</td>
</tr>
<tr>
<td><a href="" title="">Mensagem Teste Locastyle</a></td>
<td class="hidden-xs">Campanha</td>
<td>Enviada</td>
<td class="hidden-xs">21/09/2013 as 20:00 PM</td>
</tr>
<tr>
<td><a href="" title="">Mensagem Teste Locastyle</a></td>
<td class="hidden-xs">Campanha</td>
<td>Enviada</td>
<td class="hidden-xs">21/09/2013 as 20:00 PM</td>
</tr>
<tr>
<td><a href="" title="">Mensagem Teste Locastyle</a></td>
<td class="hidden-xs">Campanha</td>
<td>Enviada</td>
<td class="hidden-xs">21/09/2013 as 20:00 PM</td>
</tr>
</tbody>
</table>
|
Tabela zebrada
Se quiser que as linhas da tabela fiquem com o background colorido alternadamente, basta adicionar a classe .ls-table-striped.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <table class="ls-table ls-table-striped">
<thead>
<tr>
<th>Título</th>
<th class="hidden-xs">Campanha</th>
<th>Status</th>
<th class="hidden-xs">Data de envio</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="" title="">Mensagem Teste Locastyle</a></td>
<td class="hidden-xs">Campanha</td>
<td>Enviada</td>
<td class="hidden-xs">21/09/2013 as 20:00 PM</td>
</tr>
<tr>
<td><a href="" title="">Mensagem Teste Locastyle</a></td>
<td class="hidden-xs">Campanha</td>
<td>Enviada</td>
<td class="hidden-xs">21/09/2013 as 20:00 PM</td>
</tr>
<tr>
<td><a href="" title="">Mensagem Teste Locastyle</a></td>
<td class="hidden-xs">Campanha</td>
<td>Enviada</td>
<td class="hidden-xs">21/09/2013 as 20:00 PM</td>
</tr>
<tr>
<td><a href="" title="">Mensagem Teste Locastyle</a></td>
<td class="hidden-xs">Campanha</td>
<td>Enviada</td>
<td class="hidden-xs">21/09/2013 as 20:00 PM</td>
</tr>
</tbody>
</table>
|
Tamanho dos espaçamentos
Definimos 2 espaçamentos extra, além do espaçamento padrão. Para mudar o tamanho dos espaçamentos, basta inserir a classe ls-md-space ou ls-sm-space. Veja o resultado abaixo com dois exemplos:
Ordenação nas tabelas
Perceba que para deixar os títulos de colunas com marcação de ordenação, é necessário ter uma tag a dentro da tag th, depois disso, basta utilizar as classes .ls-data-descending ou .ls-data-ascending .
Isso não adiciona uma funcionalidade de ordenação, apenas as setinhas de marcação.
Cabeçalho colorido
Para deixar o cabeçalho da tabela com um background maneiro, basta inserir a classe ls-bg-header na tag table.