Esse slide é sobre como usar o Bootstrap nas práticas mais usadas entre desenvolvedores front-end e back-end, contém um exercício prático.

1. Bootstrap
Práticas mais usadas
Marconi Pacheco - Designer Digital

2. O que é o Bootstrap
Bootstrap – Práticas mais usadas
 O Bootstrap é uma ferramenta
gratuita para desenvolvimento
HTML, CSS e Javascript.
 Ajuda no desenvolvimento de
protótipos ou aplicações
completas com várias estilos CSS,
sistemas de grid responsivo,
componentes pré-construídos.

3. Ferramentas do Bootstrap
Bootstrap – Práticas mais usadas
 Menu lateral
Todas as ferramentas que o Bootstrap
possui estão neste menu, incluindo as:
 Documentação de uso;
 Exemplos práticos;
 Componentes pré-prontos.

4. Classes frequentemente usadas
Bootstrap – Práticas mais usadas
 Espaçamento, margem e alinhamento de textos
<div class=“mt-5">
<div class=“p-5”>
<p class=“text-center”> </p>
</div>
</div>
m - para usar margin; p - para usar padding
t = top; b = bottom; l = left; r = right; x = horizontais; y = verticas
Os campos de tamanhos vai de 0 a 5
 Alinhamento de textos são para: esquerda, centralizado, direita

5. Classes frequentemente usadas
Bootstrap – Práticas mais usadas
 Cores e bordas
<div class=“mt-5 border">
<div class=“p-5 bg-warning”>
<p class=“text-center text-success”> </p>
</div>
</div>
 Cores: existem algumas cores direta da bootstrap, para textos, fundos,
bordas, links e botões (consultar utilitários > cores).
 Bordas: use os utilitários de borda para adicionar ou remover as bordas de
qualquer elemento. Escolha entre um dos lados ou todos de uma vez.

6. Componentes frequentemente usados
Bootstrap – Práticas mais usadas
 Botões
<button type="submit” class="btn btn-primary" > Botão </button>
 Podem serem editados em cores, tamanhos e estados interativos.
 Tags para uso de botões:
<a>;
<button> ;
<input> do tipo button, submit e reset
 Classes
btn = forma de botão btn-primary = cor do botão btn-block = largura 100%

7. Componentes frequentemente usados
Bootstrap – Práticas mais usadas
 Campos de texto (input)
<input type=“text” class=“form-control" placeholder=“Nome”>
 Podem serem editados em tamanhos e estados interativos.
 Classe
form-control = Esta classe insere forma e cores, dando um visual melhor.

8. Grid do Bootstrap
 É um sistema de doze colunas
para arranjar e alinhar conteúdo.
 Totalmente, responsivo.
 Trabalha com Mobile-first,
iniciando com resolução menor
para a maior.
Bootstrap – Práticas mais usadas

9. Como funciona a grid do Bootstrap
 Tabela com aspectos do
funcionamento de sistema
grid.
 A grid contém 5 breakpoints:
col-xs = extra small (implícito);
col-sm = small;
col-md = medium;
col-lg = large;
col-xl = extra large.
Bootstrap – Práticas mais usadas

10. Como usar a grid do Bootstrap
 Ao escrever as tags em HTML precisamos seguir uma ordem hierárquica,
são elas: container, raw e col-(...).
 Container - cria meios para centralizar e horizontalmente preencher os conteúdos;
.container - para ter uma largura referente ao tamanho da tela com máximo de 1140px;
.container-fluid - para largura de 100% da tela, em todos tamanhos de dispositivos.
<div class="container">
</div>
Bootstrap – Práticas mais usadas

11. .container.row .col
.container propriedades da classe
Bootstrap – Práticas mais usadas

12. .container .row .col
<div class="container">
<div class=“row">
</div>
</div>
 row - são elementos para envolver colunas.
 Tira os espaços padding de cada lado da coluna e alinha todo conteúdo
dentro a esquerda, além de possuir display: flex, para controle de CSS
Flexbox.
Bootstrap – Práticas mais usadas

13. .Row propriedades da classe
.container .row .col
Bootstrap – Práticas mais usadas

14. .container .row .col
<div class="container">
<div class=“row">
<div class=“col">
</div>
</div>
</div>
 Classes de colunas “col-” indicam o número de colunas que você quer
usar, dentro de uma possibilidade de 12.
 Largura de colunas são definidas em porcentagem para que elas sejam
sempre fluidas e dimensionadas com relação a seus elementos pais.
Bootstrap – Práticas mais usadas

15. .col propriedades da classe
.container .row .col
Bootstrap – Práticas mais usadas

16. Colunas - observações importantes
 Colunas sem breakpoint declarado
Automaticamente se dimensionará com
larguras iguais. Por exemplo, .col-4 vão
automaticamente, ter 33% de largura, em
qualquer resolução de tela.
 Colunas sem número declarado
Automaticamente se dimensionará com
larguras iguais. Por exemplo, quatro .col-sm
vão automaticamente, ter 25% de largura, no
breakpoint sm (inicia em 576px) ou maior;
Bootstrap – Práticas mais usadas

17. Exercício prático
 1º Abrir um novo arquivo em HTML, escrevendo a estrutura da template inicial do Bootstrap;
 2º Escreva estrutura com topo <header>, meio <main> e rodapé <footer>;
 3º Na tag <header> insira a classe container-fluid (é = 100% tela), nas <main> e <footer> insira a classe container;
 4º <header>, <main> e <footer> - Insira uma <div> com a classe row;
 5º <header> e <footer> Dentro das <div> ’s com row insira uma outra <div> com classe col-12 (é = 1 coluna);
 6º <header> na tag com a classe da coluna, insira cor de fundo amarela, padding-vertical e margin-bottom com valor 5;
 7º <header> Insira o conteúdo com <h2> com seu nome e com o texto centralizado (topo finalizado);
 8º <footer> na tag com a classe da coluna, insira cor de fundo verde, padding-vertical e margin-top com valor 5;
 9º <footer> Insira o conteúdo com <h2> com seu último nome, texto centralizado e de cor branco (rodapé finalizado);
 10º <main> Na tag <row> insira cor de fundo cinza (light), bordas e padding-vertical com valor 5.
 11º <main> Insira o conteúdo dividido em três colunas contendo um input de texto para as duas primeiras colunas e um
botão verde na 3º coluna. As colunas precisam ter comportamento diferentes para cada resolução, igual imagem a seguir...
Bootstrap – Práticas mais usadas

18. Bootstrap – Práticas mais usadas

19. Obrigado
Bootstrap – Práticas mais usadas
Marconi Pacheco
Designer Digital
marconidesenhos@gmail.com
linkedin.com/in/marconipachecobehance.net/marconipacheco
github.com/marconip