Primeiras aulas do curso Bootstrap: criação de uma single-page responsiva

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-responsive foi substituída pela classe img-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:

Aprenda HTML e CSS acessando integralmente esse e outros cursos, comece hoje!

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana