Curso Web Design | Conheça o Bootstrap e crie layouts responsivos de forma prática

---

Conheça o Bootstrap e crie layouts responsivos de forma prática Posted: 20 Mar 2014 07:32 AM PDT 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.

You are subscribed to email updates from Blog do Curso Web Design - Microcamp SP To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610