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.
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:
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-responsive
foi 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:
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:
Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.
Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.
Emitimos certificados para atestar que você finalizou nossos cursos e formações.
Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.
Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.
Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.
Emitimos certificados para atestar que você finalizou nossos cursos e formações.
Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.
Acesso completo
durante 1 ano
Estude 24h/dia
onde e quando quiser
Novos cursos
todas as semanas