Aula Prática Bootstrap 5

Prévia do material em texto

Público 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
DESENVOLVIMENTO 
RESPONSIVO 
 
 
 
 
 
Roteiro 
Aula Prática 
 
2 
 
Público 
ROTEIRO DE AULA PRÁTICA 
 
DESENVOLVIMENTO RESPONSIVO: 
 
Unidade: 
U2_LAYOUTS_RESPONSIVOS_(CONSTRUÇÃO_DE_LAYOUTS_E_TEMPLATES_RESPONSIV
OS) 
Aula: A4_LAYOUTS_COM_FRAMEWORKS_E_BIBLIOTECAS_FRONT-END 
 
OBJETIVOS 
Definição dos objetivos da aula prática: 
- Compreender o funcionamento do sistema de grid do Bootstrap 5, explorando o uso de colunas, 
containers e breakpoints para construir layouts responsivos. 
- Aplicar os conceitos teóricos de web design responsivo na criação de uma página adaptável a 
diferentes tamanhos de tela. 
- Desenvolver uma interface responsiva e organizada, utilizando as boas práticas de construção 
de layout com o Bootstrap 5. 
 
SOLUÇÃO DIGITAL: 
 
“Visual Studio Code” ou “qualquer editor de código html como o w3schools” 
É um editor código-fonte gratuito e poderoso da Microsoft para Windows, macOs e Linux, 
usado por desenvolvedores para o desenvolvimento de sistemas. 
LINK SOLUÇÃO DIGITAL ONLINE (EXCETO 
ALGETEC): https://code.visualstudio.com/download 
 
PROCEDIMENTOS PRÁTICOS E APLICAÇÕES 
Procedimento/Atividade nº 1 
Inserir o nome do experimento: Página Responsiva com Bootstrap Grid 
 
Atividade proposta: 
Nesta atividade, você criará uma página web responsiva utilizando o sistema de grid do Bootstrap 
5. A página deverá conter um cabeçalho, uma seção principal com três colunas e um rodapé, 
ajustando-se automaticamente a diferentes larguras de tela (celular, tablet e desktop). 
 
https://code.visualstudio.com/download
 
3 
 
Público 
 
Procedimentos para a realização da atividade: Siga as etapas descritas a seguir para realizar 
a atividade. 
1. Preparação do ambiente 
o Baixe e instale o Visual Studio Code. 
o Crie uma nova pasta chamada layout-bootstrap. 
o Dentro dela, crie o arquivo index.html. 
o Vincule o Bootstrap 5 via CDN no do HTML. 
2. Estrutura básica do layout 
o Crie um com o nome do site dentro de um container-fluid. 
o Crie uma com uma row e 3 colunas (col-12 col-md-4). 
▪ Cada coluna deve conter um pequeno texto e um fundo com cores 
diferentes. 
o Adicione um centralizado com o texto “Desenvolvido com Bootstrap 5”. 
3. Responsividade 
o Use as classes do Bootstrap para que: 
▪ Em telas pequenas (celular): as colunas fiquem empilhadas (col-12). 
▪ Em telas médias (tablet): apareçam duas colunas (col-md-6). 
▪ Em telas grandes (desktop): fiquem três colunas lado a lado (col-lg-4). 
4. Customização 
o Adicione um pouco de espaçamento (p-3), sombras (shadow), e bordas 
arredondadas (rounded). 
o Aplique utilitários de background (bg-light, bg-primary, etc.) e text-center. 
5. Testes e ajustes 
o Visualize a página no navegador. 
o Redimensione a janela para observar o comportamento do layout. 
o Teste no modo responsivo (F12 → ferramenta de dispositivos). 
 
Avaliando os resultados: 
Responda a seguinte questão de acordo com o cenário a seguir: 
Durante o desenvolvimento da página responsiva utilizando o sistema de grid do Bootstrap 5, 
você pôde observar que o layout se adapta automaticamente a diferentes larguras de tela graças 
às classes de breakpoints (como col-12, col-md-6 e col-lg-4). Por que é importante compreender 
como esses breakpoints funcionam ao criar interfaces modernas, e como isso impacta 
diretamente a experiência do usuário em dispositivos distintos? 
 
 
4 
 
Público 
Checklist: 
• Vincular corretamente o Bootstrap 5 via CDN 
• Criar estrutura de layout com header, 3 colunas e footer 
• Utilizar classes de grid (row, col-*) corretamente 
• Implementar breakpoints (col-12 col-md-6 col-lg-4) 
• Aplicar utilitários de espaçamento e alinhamento 
• Testar a responsividade em diferentes tamanhos de tela 
• Garantir boa legibilidade e estética geral da página 
 
RESULTADOS 
Resultados do experimento: 
O estudante deve entregar um arquivo em PDF contendo toda a codificação necessária para 
realizar o exercício. 
O arquivo deverá conter: 
• Capa; 
• Folha de rosto com os dados da disciplina e do aluno; 
• Codificação completa do exercício; 
• Prints do exercício; 
• Referências bibliográficas (quando houver). 
 
Resultados de Aprendizagem: 
Ao final da atividade, espera-se que o aluno: 
• Compreenda o funcionamento e a aplicação do grid system do Bootstrap 5; 
• Desenvolva um layout responsivo funcional e esteticamente agradável; 
• Utilize corretamente os breakpoints e utilitários CSS para ajustar o layout conforme o 
dispositivo; 
• Aplique boas práticas de design responsivo e mobile-first; 
• Reforce a integração entre teoria e prática na construção de interfaces web modernas.