Locaweb Style

Documentação

Saiba todas as features que te ajudarão a produzir sistemas mais rapidamente.

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:

Título Status
Mensagem Teste Locastyle Enviada
Mensagem Teste Locastyle Enviada
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.

Título Status
Mensagem Teste Locastyle Enviada
Mensagem Teste Locastyle Enviada
Mensagem Teste Locastyle Enviada
Mensagem Teste Locastyle Enviada
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.

Título Status
Mensagem Teste Locastyle Enviada
Mensagem Teste Locastyle Enviada
Mensagem Teste Locastyle Enviada
Mensagem Teste Locastyle Enviada
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:

Título Status
Mensagem Teste Locastyle Enviada
Mensagem Teste Locastyle Enviada
Título Status
Mensagem Teste Locastyle Enviada
Mensagem Teste Locastyle Enviada

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.

Título Status
Mensagem Teste Locastyle Enviada
Mensagem Teste Locastyle Enviada

Cabeçalho colorido

Para deixar o cabeçalho da tabela com um background maneiro, basta inserir a classe ls-bg-header na tag table.

Título Status
Mensagem Teste Locastyle Enviada
Mensagem Teste Locastyle Enviada