Guia de aprendizado
Design responsívo: contêineres e painéis
Contêineres agrupam elementos e ocupam 12 colunas caso não seja especificado o número de colunas que irá ocupar na tela do usuário. Contêineres funcionam como blocos de conteúdo, o que significa que cada novo contêiner irá ser inserido abaixo de seu antecessor. A sintaxe básica para declarar um contêiner é a seguinte:
<div class="container" ></div> Para entender o funcionamento de um contêiner, considere o exemplo a seguir, em que um cabeçalho com título e subtítulo é criado em um documento HTML:
<div class="container bg-color-indigo" > <h1 class="text-center text-size-medium text-color-white small-padding">Seu título aqui</h1> </div> <div class="container small-border-frame border-color-indigo" > <p class="text-center text-color-indigo">Seu subtítulo aqui</p> </div> Esse código irá produzir o seguinte resultado:
Seu subtítulo aqui
Não se preocupe com as demais classes presentes no código do exemplo, pois com a leitura desse guia você irá compreendê-los. A saber:
Classes com o prefixo bg-color atribuem cor de fundo aos elementos HTML.
A classe text-center centraliza textos.
Classes com o prefixo text-size formatam o tamanho da fonte dos textos.
Classes com o prefixo text-color atribuem cor à fonte de textos.
Classes com o sufixo -padding aplicam espaçamento interno aos elementos HTML.
Classes com o sufixo -border-frame desenham bordas nos elementos HTML.
Classes com o prefixo border-color aplicam cor às bordas dos elementos HTML.
Painéis:
Painéis são muito parecidos com contêineres, tendo por diferença o fato de acrescentarem margem superior e inferior ao elemento formatado pela classe. O uso de painéis é sugerido quando se quer agrupar elementos que merecem um certo destaque em meio aos demais do layout. Um bom uso de painéis se aplica às mensagens de notificação ao usuário, seja para alerta, dica, aviso de erro ou sucesso durante o processamento de uma operação. A sintaxe básica para declarar um painel é a seguinte:
<div class="panel" ></div> O código abaixo introduz o uso de painéis para mensagens de notificação:
<div class="panel small-padding"> <div class="tip-panel"> <p class="title"><span class="fa fa-warning"></span> Aviso:</p> <p>Dica ou texto informativo</p> </div></div><div class="panel small-padding"> <div class="positive-panel"> <p class="title"><span class="fa fa-warning"></span> Aviso:</p> <p>Mensagem de sucesso</p> </div></div><div class="panel small-padding"> <div class="negative-panel"> <p class="title"><span class="fa fa-warning"></span> Aviso:</p> <p>Mensagem de erro</p> </div></div><div class="panel small-padding"> <div class="warning-panel"> <p class="title"><span class="fa fa-warning"></span> Aviso:</p> <p>Mensagem de alerta</p> </div></div>O código apresentado acima irá resultatar nas seguintes apresentações de conteúdos:
Aviso:
Dica ou texto informativo
Aviso:
Mensagem de sucesso
Aviso:
Mensagem de erro
Aviso:
Mensagem de alerta
Nesse exemplo, duas classes novas surgiram, elas fazem parte da biblioteca de ícones fornecida pela Font Awesome e serão mais bem explicadas durante a seção Ícones da Font Awesome. Previamente, o que se pode explicar é que a classe fa define o escopo de um elemento que irá trabalhar com os recursos fornecidos pela biblioteca da Font Awesome. Cada ícone é antecedido pelo prefixo fa-. Assim, quando invocamos fa fa-warning dizemos ao interpretador que o elemento HTML irá utilizar a biblioteca da Font Awesome e que o ícone a ser utilizado será de aviso, ou warning.