Conheça o Bootstrap e crie layouts responsivos de forma prática
Para quem trabalha com o desenvolvimento de sites, não tem nada mais complicado do que elaborar o layout, escolher a tipografia ideal, definir atributos para diferentes dispositivos, entre outros aspectos. Para facilitar a criação de sites simples e até mesmos portais mais complexos foi desenvolvido um framework chamado Bootstrap.
O Bootstrap veio para facilitar a vida de programadores e web designers em geral: de formatações em CSS a até mesmo validações em JavaScript, tudo está integrado nesse framework. O seu principal propósito é dispor ao web designer o menor tempo possível na elaboração de um website. E um dos maiores benefícios é justamente oferecer facilidades na hora de criar seus layouts responsivos (e se por um acaso você dormiu no ponto e até agora não sabe o que é um Layout Responsivo, falamos disso no primeiro post do Blog. Clique aqui para tirar suas dúvidas ou recordar).
Como utilizar?
Para ver todos os benefícios desse framework primeiramente deve ser feito o download através do site getbootstrap.com.
Ao acessá-lo, haverá duas opções de download, uma pra baixar o código já compilado e outra para baixar o arquivo-fonte. Caso não necessite modificar a estrutura, o ideal é baixar o arquivo compilado. Caso necessite modifica-lo o ideal é realizar o download do código-fonte.
Estrutura de arquivos
Assim que você realizar o download, deverá copiar a pasta para o diretório-raiz de seu site e ao descompactar a pasta será possível encontrar a seguinte estrutura:
Observação: Todos os plugins JavaScript requerem que o JQuery seja incluído.
Princípios do Bootstrap
Assim que acessamos a página do Bootstrap, nos deparamos com a essência do framework.
Por nerds, para nerds
Como o próprio site do Bootstrap se define, ele é “Construído no Twitter por @mdo e @fat, o Bootstrap utiliza LESS CSS, é compilado via Node, e é gerenciado pelo GitHub para ajudar os nerds a fazer coisas incríveis na web”
Feito por todos
“Bootstrap foi feito não somente para parecer ótimo e comportar bem nos últimos browsers para desktop (até o IE7!), mas em tablet e browsers do smartphone via CSS responsivo também.” – Retirado do site do Bootstrap.
Empacotado com funcionalidades
“Um grid de 12 colunas responsivo, dezenas de componentes, plugis JavaScript, tipografia, controle de formulários, e até um interface de customização para fazer o Bootstrap do seu jeito” – Retirado do site do Bootstrap.
Casos de sucesso
Existem vários sites que utilizam o Bootstrap, como exemplo posso indicar duas páginas do portal globo.com:
Outro exemplo de página da globo.com criada com Bootstrap:
Layout Responsivo
Com o avanço tecnológico ficou mais comum o acesso à internet por qualquer dispositivo, desde computadores até celulares e tablets, e para quem desenvolve páginas da internet sabe-se que não é simples o ajuste do layout do site para cada um desses aparelhos. Para isso é necessário por vezes inserir vários trechos de código que realizem essas adequações, porém com o Bootstrap basta colocar algumas linhas na sua página web e seu layout responsivo estará pronto!
Primeiros passos
O primeiro passo é incluir os arquivos de CSS a sua página principal. Para isso insira os seguintes códigos dentro do cabeçalho da sua página:
Dispositivos suportados
O Bootstrap consegue abranger alguns tamanhos específicos dentro do mesmo documento, auxiliando na elaboração de projetos de diferentes dispositivos e resoluções de tela.
Observe a tabela abaixo:
Aplicando ao projeto
Para aplicar ao seu site é bem simples, basta abrir a TAG <STYLE> e colocar os códigos abaixo:
Página completa
Visualizando a página com as alterações. Observe a figura 9.
Nesse código diferenciamos o tipo de layout pela cor do plano de fundo, assim ficará fácil realizar testes com o código acima.
Não se esqueça: o Bootstrap possui essa e diversas funções que te podem lhe auxiliar na codificação do Layout do seu site e o melhor é o código aberto, onde você poderá alterá-lo de acordo com a sua necessidade.
Espero que tenham gostado, pois hoje em dia é fundamental que todos os sites possuam funcionalidade responsiva.
Curtiu? Não se esqueça de compartilhar com seus amigos e comentar ao final do blog, dar sua opinião e comentar suas experiências.