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.