Bootstrap: criação de uma single-page responsiva
Introdução - Apresentação do curso
Começando o projeto com bootstrap
Primeiramente, sejam bem-vindos ao curso de Bootstrap3. Nesse curso será desenvolvido um site, cujo layout que queremos atingir é possível visualizar na seguinte imagem:
Criaremos um site voltado para uma empresa de arquitetura chamada TopCasaFina. Usaremos, para tanto, tecnologias como HTML, CSS, Javascript, JQuery e por fim, o Bootstrap3. O Bootstrap3 é um framework que possui vários códigos já prontos o que acaba aumentando a nossa produtividade. Vamos utilizar bastante a sua documentação para nos auxiliar a fazer o site da forma mais eficiente e eficaz possível. Assim, consultando a documentação não será preciso decorar nada! Usaremos, ainda, as melhores práticas de HTML e CSS.
Introdução - Adicionando o Bootstrap ao nosso site
Ajustando a imagem com image responsive
Vamos observar o layout:
Temos um menu no topo, um ícone de menu, uma imagem inicial, uma divisão em várias seções e etc. Se observarmos esse site percebemos alguns problemas comuns, por exemplo, o Menu que aparece ou as imagens sem legendas. Por isso, o Bootstrap desenvolveu um meio de buscar soluções fáceis para essas situações, ele possui um conjunto de ferramentas prontas para casos como os de nossa página.
Para utilizar o Bootstrap , a primeira coisa que temos que fazer é criar um arquivo HTML. Começaremos fazendo exatamente isso, criaremos uma pasta dentro da pasta "workspace" que se chame "topCasaFina-arquitetura" e dentro dela vamos criar o arquivo HTML, nomearemos ele de "index.html". Usaremos o editor de texto Sublime para realizar nosso projeto.
Para começar, o primeiro passo é falar para o navegador que esse arquivo é do tipo HTML, fazemos isso utilizando a tag <html>. Temos que falar qual a versão do HTML, por isso, digitamos <!doctype html>. E no HTML também temos que acrescentar a cabeça e o corpo, head e body, respectivamente. Na tag head ficam as partes de configuração e na tag body fica o conteúdo.
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>Temos que começar a escrever algum conteúdo e faremos isso baseado em nosso layout. Vamos iniciar pelo que é mais simples, no caso, a seção do "Sobre nós", onde temos apenas um título e uma imagem:
Para acrescentar um título secundário podemos usar a tag h2 e nela acrescentamos o título: Sobre Nós:
<!doctype html>
<html>
<head>
</head>
<body>
<h2>Sobre Nós</h2>
</body>
</html>Bom, depois de acrescentarmos o título vamos testar! Antes de realizar o teste devemos salvar o arquivo, caso contrário nossa página estará toda em branco. Abrimos nosso arquivo "index.html" no Google Chrome e o que temos é uma página que apresenta problemas, é importante realizar testes recorrentes para que os erros possam ser corrigidos o quanto antes. Para funcionar corretamente, falta que acrescentemos, na tag head, o tipo de codificação de caracteres que queremos usar, para isso, digitamos meta charset="utf-8" que resolverá nosso problema:
<head>
<meta charset="utf-8">
</head>E teremos:
Agora, vamos ajeitar o detalhe da fonte, por enquanto ela está diferente da que desejamos para o site. Queremos que a fonte fique igual a fonte do Bootstrap . Se acessarmos o site http://getbootstrap.com podemos ir no menu "CSS" e clicando em "Typography" podemos verificar quais são as fontes utilizadas:
Essa fonte ainda não está sendo aplicada, mas antes mesmo de usá-la é preciso baixar o Bootstrap.
Para baixar o Bootstrap:
Logo que você acessar o site do Bootstrap, na página inicial, existe a opção download.
Basta clicar no botão "Download" e após o arquivo ser baixado podemos ir na pasta onde o arquivo foi salvo na nossa máquina e encontrar o arquivo. Basta copiá-lo para a pasta do projeto, a "top-casa-fina":
Vamos "dezipar" o arquivo baixado do Bootstrap e podemos verificar as pastas que temos:
Nesse instante estamos utilizando o CSS e, por isso, importaremos apenas essa pasta:
Nessa pasta podemos verificar que temos diversos arquivos CSS e para importá-los no HTML temos que colar na tag head a tag link, usando o "Tab" em alguns editores de código como por exemplo no Sublime ela é autocompletada. Falta acrescentar através do href apenas o caminho do arquivo:
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>Repare que usamos o min , pois nesse caminho estamos apontando para o uso de uma versão "minificada". Vejamos nosso resultado utilizando essa fonte:
Introdução - Ajustando a imagem com image responsive
Vamos continuar, o próximo passo é colocar uma imagem no HTML. Para isso acrescentamos a tag <img> com o atributo src, onde o src serve para indicar o caminho da imagem. Na pasta "topCasaFina" temos uma pasta "img" e nessa pasta temos a imagem que queremos, verificamos qual o caminho da pasta , no caso é img/empresa.jpg e inserimos isso em nosso código. Teremos o seguinte no código:
<h2>Sobre Nós</h2>
<img src="img/empresa.jpg">
Agora, temos em nossa página o título e a imagem:
A imagem, entretanto, está desproporcional ao tamanho que queremos. Vamos reparar no Layout que nos guia:
Esse layout, na verdade, é de Mobile, quando desenvolvemos um site pensando em Mobile falamos que é uma abordagem Mobile First. E é exatamente isso que faremos, utilizaremos uma abordagem Mobile First e expandiremos, posteriormente, para Desktop. Para fazer com que nossa imagem fique menor o primeiro passo é simular uma tela menor. Temos duas opções, podemos simplesmente diminuir a tela, o que acaba sendo ruim pois não temos o controle sobre a pixelagem. Existe uma ferramenta no Chrome que nos auxilia nisso, com o atalho de teclado "Command+Option+I" (Mac) que abre as Ferramentas do desenvolvedor. No "inspetor" de elementos você pode selecionar a opção do toggle device toolbar "Ctrl+Shift+I" no Windows para que possamos simular diversos tamanhos de telas.
Podemos, inclusive, selecionar qual o dispositivo que desejamos simular. Agora, tudo parece muito pequeno em nossa tela, parece que ela deu um "Zoom+Out" infinito. Esse "Zoom+Out" é dado para fazer com que tudo caiba na tela. Já deve ter acontecido com vocês de estar com o celular, abrir um site, e ele estar com um super "Zoom+out" e termos que ficar aproximando e ficar dando vários "scroll" por que o site não cabe direito na tela do nosso celular.
O que queremos é que o tamanho da tela seja calculado conforme o tamanho do próprio simulacro. Podemos pedir para que o navegador faça isso por nós, para isso, acrescentamos uma tag de configuração chamada meta com o nome viewport acompanhada do content que deve ser alterado para calcular o tamanho da tela conforme a tela que estamos utilizando, escrevemos também que a largura, width, deve ser igual a largura do device. Para que a largura seja calculada conforme a largura do nosso celular e para evitar o "zoom" automático podemos escrever que a escala inicial deve ser sempre 1, ou seja, "1", initial-scale=1 , conforme o código abaixo:
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>Bom, agora temos a margem conforme queríamos, mas a imagem aparece fora das proporções desejadas:
Por isso, especificaremos que a imagem só pode tomar 100% do espaço da tela, para não extrapolar as margens. Verificaremos na documentação do Bootstrap, como resolver o problema. Ao acessarmos o site, clicaremos na aba "CSS" e depois, na seção "Images > Responsive Images". Para colocarmos uma "imagem responsiva", utilizaremos a classe .img-responsive:
<h2>Sobre Nós</h2>
<img class="img-responsive" src="img/empresa.jpg">
Importante !
No curso, utilizamos a versão do Bootstrap 3. A versão mais atualizada traz uma pequena alteração: a classe
img-responsivefoi substituída pela classeimg-fluid. Se você está utilizando a versão mais atual do Bootstrap deverá utilizar essa nova classe, para que uma imagem seja responsiva.
Podemos verificar que deu certo:
Sobre o curso Bootstrap: criação de uma single-page responsiva
O curso Bootstrap: criação de uma single-page responsiva possui 235 minutos de vídeos, em um total de 67 atividades. Gostou? Conheça nossos outros cursos de HTML e CSS em Front-end, ou leia nossos artigos de Front-end.
Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:
- Introdução
- Começando a implementar o site seguindo o layout
- Mostrando os projetos da Empresa
- Mostrando os depoimentos dos clientes com o carousel
- Criando o formulário de contato colocando o vídeo institucional da empresa
- Mostrando o endereço no rodapé
- Navegando entre as seções com a navbar
- Chamada em destaque no cabeçalho
- Deixando o site responsivo em telas maiores