Responsividade com Bootstrap [HandsOn]

1 – Introdução

E ai Programador, tudo bem?

Tenho certeza que você já passou várias horas tentando desenvolver a responsividade de seu site não é mesmo? E se eu te falar, que existe uma ferramenta (ou melhor, framework) que pode te ajudar com esse problema? Fazendo com que você precise digitar bem menos código em seu arquivo CSS somente utilizando as classes que esse framework disponibiliza para você?

É exatamente isso que o Bootstrap trás para gente, um framework que faz com que você possa construir sites de forma mais rápida, e com uma responsividade monstra!!

O que é responsividade?

Responsividade, basicamente é como nossa página vai se comportar em vários tamanhos de tela, seja ela uma tela de celular, de tablet, de notebooks, de monitores e etc.

E como ele faz isso?

O Bootstrap já trás uma pré-configuração em css, fazendo com que a gente ao criar nossas tags no nosso arquivo html, só precise adicionar na class dela, algumas palavras reservadas pelo framework para que essa configuração feita em css já seja automaticamente feita.

2 – Criando o Projeto

1. Vamos abrir o nosso terminal e navegar até a pasta que vamos criar nosso projeto.
   
2. Agora iremos criar a nossa pasta de nosso projeto utilizando o comando mkdir (nome do projeto) e entrar na pasta do projeto.
3. Feito isso, iremos abrir o nossa pasta com o nosso editor de código, no meu caso, usarei o VScode, mas você pode utilizar o de sua preferência. Utilizaremos o comando code.
4. Com o nosso projeto aberto, vamos criar o arquivo index.html. Após criar o nosso arquivo, dentro dele, vamos digitar html e deixar que o autocomplete nós auxilie, escolhendo a opção html:5.

3 – Instalando o Bootstrap

Nesta etapa, nós temos duas formas de está instalando o bootstrap em nosso projeto. Via CDN ou via terminal.

Instalando via CDN

1. Para instalar via CDN é bem simples, basta a gente ir no site do bootstrap, descer um pouco para a parte de jsDelivr.
   
   
2. Nesta parte, podemos ver que à direita do site, temos dois snippets, um para o CSS e o outro para o Javascript.
   • O de CSS, como o próprio nome já sugere, são os estilos que o bootstrap nos trás. Já o JavaScript, são algumas funções que servem para que algumas coisas funcionem em nosso projeto, como por exemplo, o dropdown.
3. Vamos copiar o css e dentro de nosso arquivo index.html e inseri-lo.

Dessa forma, já temos o bootstrap funcionando em nosso projeto.

Instalando via terminal

1. Vamos abrir o nosso terminal, e dentro da pasta de nosso projeto, digitar o comando npm init -y. Com esse comando teremos instalado o package.json em nosso projeto.
2. Agora, digitamos o comando npm install bootstraphow do gay men meet
3. Podemos ver em nosso projeto que já temos instalado em nosso projeto, o bootstrap, tanto o css quanto o javascript.https://onebitcode.com/best-free-dating-sites-usa-2019/

1. Dessa forma, fica faltando somente importar o bootstrap em nosso index.html. Vamos importá-lo abaixo das nossas tags meta, no mesmo local que importamos ele via CDN.

Dessa forma, já temos o bootstrap instalado em nosso projeto e importado, pronto para uso.

4 – Container e container-fluid.

Quando estamos criando nossas páginas utilizando o bootstrap, temos que ter em mente que sempre vamos procurar colocar nossos conteúdos dentro de containers, e para isso, o bootstrap nos disponibiliza dois tipos de containers. São eles o container e o container-fluid.

container

Para criarmos o container, nós vamos criá-lo passando como class em uma div.

Ele por si só, não gera nenhum resultado visual em nossa página, afinal, como podemos ver a nossa página ainda está toda em branco.

Será dentro dele que vamos inserir o nosso conteúdo. Passaremos como exemplo, um Lorem Ipsum dentro de uma tag <p>.

Como podemos ver em nossa página, o container faz com que o nosso conteúdo fique centralizado em nossa página, utilizando uma combinação de margem e padding. E se nós utilizarmos o inspect de nosso navegador, podemos ver que em todas as resoluções vamos ter essa configuração.

Essa configuração é excelente para quando queremos que nosso conteúdo não fique tão colado nas bordas de nossa tela.

container-fluid

Diferente do container, o container-fluid ele não não esse espaçamento nas laterais, fazendo com que o conteúdo fique mais colado. Como podemos ver no exemplo:

Combinando os containers

Podemos também está combinando ambos os containers, passando o container dentro do container-fluid.

5 – Row

O bootstrap ele trabalha com rows e cols, como o próprio nome já sugere, as rows são as linhas e as cols são as colunas.

As rows, nós vamos sempre procurá-las colocar, dentro de um container ou de um container-fluid,

Na primeira impressão, visualmente nós não vemos diferença nela, afinal, ela está ocupando todo o espaço do container.

Porém, se duplicarmos essa row, e passarmos uma outra class além da row, e inserirmos um background nela, podemos ver melhor.

Note que só temos um container e dentro do container agora, ao invés de somente uma row, nós temos duas rows.

6 – Columns

O bootstrap ele trabalha com um sistema 12 colunas. Quando temos só uma coluna, automaticamente o bootstrap interpreta em 12 colunas. A palavra reservada pelo boostrap para as columns é a col

Como podemos ver, visualmente não temos nenhum resultado, afinal, a row está recebendo uma col e essa col, apesar de não termos setado ela para 12 (col-12), ela interpreta que essa col tenha 12 colunas por padrão.

Porém nós podemos modificar isso, dizendo que a col terá menos que 12 colunas, por exemplo, passando um col-6.

Dessa forma, a col irá ocupar só metade do espaço da row.

Podemos inclusive, trabalhar com qualquer número desde a col-1 até a col-12. Vamos então a alguns exemplos:

• Col-2
  
  

• col-4
  
  

• col-8
  
  

Além disso, nós podemos ter mais de uma col dentro de uma row.

Veja que como passamos somente o col, no lugar do ser interpretado que essa coluna teriam 12, ela terá somente 8, afinal, temos uma outra col dentro da row ocupando somente 4 colunas.

7 – Offset

Além das várias formas de utilizar as cols que vimos, nós também temos uma outra classe reservada pelo bootstrap que é a offset.

Ela é responsável por deixar uma parte vazia entre as cols, por exemplo, no caso anterior, utilizamos duas cols, uma coma class col-4 e a outra com a col-8.

Agora vamos fazer um pouco diferente, vamos mudar a class col-8 para col-4 e além disso vamos passar a class offset-4.

Note que dessa forma, nós agora teremos um lado vazio, ficando assim, entre as cols.

Podemos também no lugar de utilizar o offset-4, utilizar o offset-2, dessa forma, terá um lado vazio tanto na esquerda quanto à direita da segunda col.

Ah, caso você queira também ter mais de uma row dentro do seu container, você pode fazer e essas alterações que vimos até agora nas cols, não interfere na segunda row.

Note que a segunda col que está dentro da row, está representada pela cor vermelha e nada do que foi feito na primeira col interferiu na segunda.

8 – Comportamento em diferentes telas.

Se formos no site do bootstrap podemos ver em layout>grid que temos várias formas de trabalhar melhor as colunas, para que elas se comportem de formas diferentes diferentes dependendo do tamanho da tela do usuário.

col: Se comportará da mesma forma independente do tamanho da tela.

col-xs-: se comportará somente em telas menores à 576px.

col-sm-: se comportará somente em telas maiores ou iguais a 576px.

col-md-: se comportará somente em telas maiores ou iguais a 768px.

col-lg-: se comportará somente em telas maiores ou iguais a 992px.

col-xl-: se comportará somente em telas maiores ou iguais a 1200px.

col-xxl-: se comportará somente em telas maiores ou iguais a 1400px.

Vamos a alguns exemplos:

Se passarmos nas nossas cols o col-sm-6

Podemos ver com o inspect que se nós colocarmos na tela de 575px, o bootstrap entenderá que quando não for maior que 575px ele deverá fazer com que as cols recebam seu padrão (col-12).

Porém se aumentarmos, podemos ver que a forma como as cols serão mostradas nas telas iguais ou maiores à 576px ficará como o col-6.

A mesma coisa se passarmos uma nova class. Agora veremos que ela terá 3 comportamentos diferentes.

Menor que 576px:

Maior ou igual à 576px

E igual ou maior que 768px.

Também foi passado uma class que foi modificada através de um arquivo.css para poder facilitar a visualização.

Também podemos passar uma class na row pra centralizar o conteúdo, caso a gente não queira que esse conteúdo quando ocupar somente uma parte da tela, não fique no canto. Podemos passar a class justify-content-center.

Dessa forma, a tela de 768px ou maior ficará da seguinte forma:

Tenho certeza que você ficou bem interessado em saber melhor como funciona esse framework, não é mesmo? 😃

Então você não pode perder a oportunidade de conhecer o nosso treinamento Programador Full Stack Javascript.
Um curso COMPLETO, que vai fazer você sair do zero ao nível Full Stack.

Nele você vai aprender tanto o Front-End, aprendendo sobre HTML, CSS, SaSS, Bootstrap, Javascript, Typescript e React, como também vai aprender a trabalhar com o Javascript lá no Back-End, com o NodeJS, Express e também banco de dados!! — Ufa, bastante coisa, não é mesmo? —, Mas não se preocupa, nós aqui do One Bit Code desenvolvemos um Plano de Estudos de 8 semanas, para que você possa fazê-lo e se tornar cada vez mais um Programador F0D%.

Ah e caso você precise de mais tempo, não se preocupa, tá? Afinal, o curso é vitalício e você pode fazer ele no seu tempo! 😃

Ficou interessado? Então acessa o link e vem fazer parte do nosso treinamento Programador Full Stack Javascript!

Link para o treinamento: https://programador.onebitcode.com/

9 – Conclusão

E aí Programador, espero que você tenha entendido melhor sobre como funcionam a questão da responsividade utilizando o grid do bootstrap.

Nesse tutorial a gente conseguiu ver várias coisas bacanas, não é mesmo?!

Vimos sobre os containers e como eles se comportam, se nós queremos que ocupe a tela inteira ou só uma parte dela.

Vimos também sobre as rows que elas funcionam como uma linha dentro de nossos containers,

As columns que podemos dividi-las em várias colunas dentro de uma row ou então somente em uma coluna por linha.

O offset que faz com que a gente possa deixar um espaço “nulo” de linhas.

Vimos também como podemos fazer com que as colunas se comportem de maneiras diferentes em vários tipos de tela, utilizando o sm, md, lg, entre outros.

Tenho certeza que após esse tutorial você vai tá expert em responsividade e vai poder aproveitar muita coisa bacana em seus futuros projetos!

Então se você curtiu esse tutorial, não esquece de compartilhar com os amigos, de curtir o vídeo, pois assim nós aqui do OneBitCode vamos saber o tipo de material que podemos trazer para o canal para que a gente possa te ajudar a se tornar cada vez um programador melhor.

Ah e não esquece de se inscrever no canal também, para não perder nenhum conteúdo novo. Estamos vindo com muito material bacana que tenho certeza que você vai gostar!