aula bootstrap

15
Tables, Images, Typography

Upload: cristina-luz

Post on 18-Feb-2017

268 views

Category:

Technology


3 download

TRANSCRIPT

Page 1: Aula bootstrap

Tables, Images, Typography

Page 2: Aula bootstrap

Tables

Para criação da tabela, precisa usar a classe .table

<table class = "table" > ... </ Table>

Atenção: utilizar .table-responsive <div class = " table-responsive " > <table class = "table" > ... </ table> </ div>

Page 3: Aula bootstrap

fileiras listradas

Striped rows

Use .table-striped  para adicionar zebra-striping em qualquer linha (row ) de tabela dentro do  <tbody>.

<table class="table table-bordered"> ... </table>

Page 4: Aula bootstrap

Bordered table

Tabela contornadaAdicionar .table-bordered para as fronteiras em todos os lados da tabela e células.

<table class="table table-bordered"> ... </table>

Page 5: Aula bootstrap

Hover rows

Linhas com HoverAdicionar .table-hover para permitir que um estado de foco em linhas de tabela dentro de um <tbody> .

<table class = "table table-hover" > ... </ table>

Page 6: Aula bootstrap

Condensed table

Tabela   compacta

<table class="table table-condensed"> ... </table>

Page 7: Aula bootstrap

Contextual classes

Use contextual para adicionar cor nas tabelas e nas linhas (rows) ou nas celulas individual.

Class Description.active Aplica-se a cor de foco para uma linha ou célula em particular.success Indica uma ação bem-sucedida ou positivo.info Indica uma alteração informativa neutra ou ação.warning Indica um aviso de que pode precisar de atenção.danger Indica uma ação perigosa ou potencialmente negativo

Page 8: Aula bootstrap

Contextual classes

Page 9: Aula bootstrap

Typography

O texto marcado

O texto excluído

Page 10: Aula bootstrap

Texto sublinhado

texto pequeno Ultiliza small para dizer que 85% do tamanho do elemento do pai.

Page 11: Aula bootstrap

<p class = "text-esquerda" > texto alinhado à esquerda. </ p> <p class = "text-center" > Centro de texto alinhado. </ p> <p class = "text-right" > texto alinhado à direita. </ p> <p class = "text-justify" > texto justificado. </ p> <p class = "text-nowrap" > Nenhum texto envoltório. </ p>

Alinhamento do texto.

Page 12: Aula bootstrap

Transforme o texto.

Page 13: Aula bootstrap

Address

Page 14: Aula bootstrap

Formas de imagem

Page 15: Aula bootstrap

Obrigada