Criar Sites responsivos com Bootstrap #1

Criar sites responsivos com bootstrap modelo padrão #1

Olá tudo bem como você?

Primeiramente eu queria falar sobre esse novo conceito criar sites responsivos, não tão novo assim, mas hoje em dia a criação de sites está cada vez mais dinâmica, ao ponto de que qualquer pessoa com um pouco de paciência possa criar sites bem profissionais.

Os famosos frameworks chegaram para ficar e cada vez suas funções são mais incríveis, ferramentas como Bootstrap, que já vem com suas principais funções e formatações já configuradas.

As ferramentas estão ai para facilitar a nossa vida, então temos que usa-las. Uma das vantagens incríveis que vejo na utiliza;cão de frameworks são as atualizações, eles acompanham o mercado, exemplo do bootstrap mesmo, que depois de sua versão 2.0 se tornou responsivo atendendo a demanda do mercado de smart phones de tablets.

O bootstrap é uma grande equipe, e como todo open source, isso faz dessa ferramenta imbativel, a comunidade atualiza a ferramenta conforme as necessidades dos programadores e dos usuários, isso nos da a segurança de trabalhar com uma ferramenta que não vai se ultrapassar com o tempo tão facilmente, só tende a melhorar cada vez mais.

Se você ainda não viu o infográfico que fiz no post anterior da uma pulo lá que tem mais algumas informações sobre o Bootstrap. como eu disse no post anterior, vou fazer alguns testes com o bootstrap e mostrar como é fácil criar sites responsivos com ele.

Vamos colocar a mão na massa e ver como é um dos temas padrão do Bootstrap, esse tema que vamos ver é um tema com slide carrossel e responsivo veja o tema online aqui.

Vamos baixar os arquivos do bootstrap no site oficial, vamos usar o arquivo completo, em seguida temos que descompactar os arquivos e você vai ter uma pasta parecida como esta, dependendo da versão que você baixar pode ser que mude alguma coisa mas basicamente é isso. Veja abaixo.

criar sites responsivos

 Estrutura do HTML do tema Carousel

Vamos ver em seguida o DOCTYPE e a tag head, onde é feita a chamada do CSS padrão do Bootstrap e todas as configurações de compatibilidade html5 para navegadores antigos como IE8 e IE9.

O menu é responsivo e já vem com efeitos de javascrips, já é compatível e minimizado à um botão padrão para dispositivos menores.

O slide carrossel é feito logo após o menu, slide responsivo com dois tipos de navegação padrão.

Abaixo do slide, podemos analisar como é feito a divisão de colunas do bootstrap, a classe col-lg-4 é utilizada 3 vezes na estrutura logo abaixo do slide, isso da um total de 12 colunas formando assim o padrão total do bootstrap de 12 colunas.

Sistemas de grade são usados ​​para a criação de layouts de páginas através de uma série de linhas e colunas que abrigam o seu conteúdo. Veja como o sistema de grade Bootstrap funciona.

A classe .row devem ser colocados dentro de um .container (largura fixa) ou .container-fluid (largura total) para o alinhamento correto da estrutura.

A classe .row é utilizada para criar grupos horizontais de colunas, como no caso de nosso exemplo engloba três divs com a classe .col-lg-4, organizando o conteúdo dessa forma.

Colunas de grade são criados, especificando o número de doze colunas disponíveis que você deseja estender. Por exemplo, três colunas iguais usaria três .col-lg-4.

Antes de mostrar o código HTML vou mostrar uma imagem que ilustra bem esse padrão de colunas do bootstrap que usamos para criar sites responsivos baseado em grids.

criar sites responsivos

Seguindo o mesmo padrão, o próximo destaque a ser usado, vamos ter um .row novamente englobando uma nova série de .col-md, no caso vamos usar uma col-md-7 para as imagens e nos sobra 5 colunas para preencher com texto, e é usado .col-md-5

criar sites responsivos

Apenas invertendo as posições nos seguintes destaques.

criar sites responsivos

Por final temos o footer com as informações de direitos reservados e um parágrafo com uma classe .pull-right com um link morto # para levar até o topo.

No bootstrap por padrão é inserido a chamada dos javascript no footer como podemos ver no HTML abaixo.

O Rodapé fica apoiado no .container e já vem com sua formatação padrão.

 

Conclusão

Não esqueça de conferir o Infográfico sobre o Bootstrap. Acesse AQUI

Esse é apenas o tema padrão, mas podemos perceber com o design do site é limpo e bem organizado, o sistema de grid é bem mais complexo e pretendo fazer um post somente com o sistema.

Essa foi apenas uma breve introdução da ferramenta com um exemplo de como criar sites responsivos com bootstrap, ainda temos muito que aprender com esse framework. Eu vou aprendendo junto com você e cada vez eu descubro mais coisas a respeito do bootstrap.

Não deixe de se inscrever na nossa newsletter abaixo para acompanhar a série, e aproveite para baixar os arquivos exclusivos que são enviados no momento que você assina.

Nos vemos nos próximos capítulos dessa série! grande abraço e até mais.

Leave a Reply

Pin It on Pinterest

Shares

Compartilhe!

Mostre esse post para seus amigos.