Bootstrap primeiros passos

Estrutura inicial da criação de sites com Bootstrap.

Já vimos as vantagens e até mesmo um infográfico falando sobre este framework super poderoso, se você ainda não viu esses posts anteriores, de uma conferida nos links ai em cima.

Vamos dar início a essa série de posts abordando as principais funções do boootstrap e colocando nosso ponto de vista sobre essa fabulosa ferramenta. Vamos seguir a sequencia da documentação da própria documentação do framework, e hoje vamos ver a estrutura básica e suas principais funções e configurações iniciais do corpo do html5 do bootstrap. Vamos lá?

O bootstrap usa o html5 na sua estrutura e logo no início vamos ver a estrutura com o novo doctype do html5 e a definição do idioma do documento que estamos criando. Veja o exemplo abaixo.

Depois da versão html5 o Doctype ficou muito simples comparado com as versões anteriores, eu nunca decorei aquilo. outra coisa que podemos ver é a definição do idioma dentro da tag html setado como lang=”pt-br”

Com a necessidade de se adaptar cada vez mais aos dispositivos móveis o bootstrap vem sempre melhorando essa questão para o usuário, e na versão 3 já podemos ver a meta Viewport que adiciona estilos amigáveis de visualização a partir da menor resolução e facilitando a questão de zoom para dispositivos de touch como tablets e smartphones. Essa meta pode ter algumas configurações específicas como desativar a opção de zoom do usuário, talvez possa ter em algum caso específico usar essa função, mas se você usa esses dispositivos sabe como é importante e o quanto facilita as vezes o zoom nos dispositivos menores. Então é sempre aconselhado deixar ativado.

Meta inicial viewport de início com zoom ativo, essa meta tag deve ser colocada dentro da Head do html.

Veja a mesma meta tag com o zoom desabilitado (Não use)

Com as definições básicas temos que definir o corpo maior da estrutura, que é o container, o conteiner bootstrap tem duas opções, o normal e o fluido para ficar um pouco mais fácil de entender essa sessão do bootstrap podemos entender ela como a mãe de todas as outras classes, todo o sistema de grid do bootstrap vai ficar dentro dessa sessão.

Cotainer estático:

Container fluido:

Dependendo do site que você for criar uma ou outra pode ser a melhor opção, em alguns temas que eu vejo por ai que utilizam bootstrap eles já vem com a opção nas suas configurações de temas como WordPress para as duas opções. Por ai já da para ver o poder do framework, da uma liberdade para a configuração incrível. Você pode ter uma noção olhando para o nosso tema aqui do criar sites, ele é todo criado no conceito bootstrap.

Hoje vamos ficar por aqui, no próximo post vamos ver o sistema de grid do bootstrap e algumas configurações do html5 e começar dar cara ao nosso projeto. Nos vemos por lá.

Abraço!

Leave a Reply

Pin It on Pinterest

Shares

Compartilhe!

Mostre esse post para seus amigos.