Scribd
Carregar
9 visualizações6 páginas

Lab. 03 - Bootstrap

O documento apresenta um conjunto de exercícios práticos para o desenvolvimento de aplicações web utilizando Bootstrap, organizados em seis níveis. Cada nível aborda diferentes aspectos, como layout de grade, tabelas, imagens, botões, formulários e componentes, com instruções detalhadas para a criação de páginas responsivas. Os alunos devem utilizar arquivos base e ferramentas como o gerador de texto Lorem Ipsum e a documentação do Bootstrap para completar as atividades.

Enviado por

lu2018prata
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
9 visualizações6 páginas

Lab. 03 - Bootstrap

O documento apresenta um conjunto de exercícios práticos para o desenvolvimento de aplicações web utilizando Bootstrap, organizados em seis níveis. Cada nível aborda diferentes aspectos, como layout de grade, tabelas, imagens, botões, formulários e componentes, com instruções detalhadas para a criação de páginas responsivas. Os alunos devem utilizar arquivos base e ferramentas como o gerador de texto Lorem Ipsum e a documentação do Bootstrap para completar as atividades.

Enviado por

lu2018prata
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 6

Desenvolvimento de Aplicações Web

2024 / 2025

Licenciatura em Gestão de Sistemas de Informação

Lab. 03 – Bootstrap

Os exercícios desta ficha de trabalho têm como base de partida os ficheiros incluídos no ficheiro
bootstrap-base.zip disponível no moodle. Para cada um dos exercícios faça uma cópia do ficheiro
base index.html e trabalhe nessa cópia (ex1.html, ex2.html, etc.)

Para os conteúdos textuais desta ficha deverá usar o gerador Ipsum Lorem disponível em
https://lipsum.com/ e deverá consultar a documentação do Bootstrap que está disponível em
https://getbootstrap.com/docs/

Nível 1 – Grid Layout

1. Usando a classe container e a classe row, e parágrafos ipsum lorem, crie uma página web
com três parágrafos em que cada parágrafo está numa coluna. Verifique que a página está
“responsive” ao encurtar a janela do browser.

2. Modifique o exemplo anterior para acrescentar mais uma coluna à direita.

3. Reponha novamente o exemplo com três colunas e modifique a primeira coluna de modo a
ser maior do que as outras. Considerando uma grelha de 12 “blocos”, a primeira deverá
ocupar 6 “blocos” e as outras duas deverão ocupar os restantes “6” blocos (3 para cada
uma).

1/6
4. Modifique novamente o exemplo para que a primeira coluna ocupe 6 “blocos”, a segunda
coluna ocupe 4 “blocos” e a última ocupe o restante espaço.

5. Redimensione a janela e verifique que a terceira coluna é a primeira a passar para baixo.
Modifique o código para que seja a primeira coluna a passar para baixo. Sugestão: explore
os tamanhos de quebra das colunas em https://getbootstrap.com/docs/5.3/layout/grid/#grid-
options.

6. Por fim, modifique o exemplo de modo a que o texto das colunas esteja centrado
verticalmente.

Nível 2 – Tabelas

1. A partir do ficheiro index.html vazio, coloque dentro de um container a seguinte tabela. Use
<thead><tr><th> e <tbody><tr><td> para separar o cabeçalho da tabela do corpo da tabela.

Nome Apelido Email


John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

2. Aplique a classe “table” para formatar a tabela.

3. Modifique a tabela para que haja linhas com fundo cinzento seguido de linhas com fundo
branco e assim sucessivamente.

4. Adicione os rebordos (borders) a todos os lados da tabela.

2/6
5. Acrescente a classe necessária de modo a que cada linha seja salientada quando se passa o
rato por cima.

6. Por fim modifique a primeira linha (John) de modo a ficar com fundo azul (table-primary)

Nível 3 – Imagens

1. A partir do ficheiro index.html vazio, dentro de um div container coloque a imagem do gato
que vem no ficheiro zip.

2. Aplique a classe necessária para arredondar os cantos da imagem.

3. Torne a imagem redonda (use .rounded-circle).

4. Mova a imagem para a direita.

5. Modifique a largura do browser e verifique que a imagem não está “responsive”. Faça-a
responsive.

Nível 4 – Botões

1. A partir do ficheiro index.html vazio, dentro de um div container coloque um botão do tipo
primary.

2. Modifique o botão para ficar vermelho.

3. Coloque mais três botões e modifique os tamanhos de modo a ficarem por ordem: large,
medium, small e extra-small.

4. Volte a colocar apenas um botão do tipo primary e modifique-o de forma a ocupar toda a
largura do container.

5. Altere-o de forma a que o botão aparente estar desactivado.

Nível 5 – Formulários

1. Utilize o ficheiro index_form.html. Este ficheiro contém a implementação de um formulário


básico.

3/6
2. Coloque as classes necessárias de modo a formatar o formulário como na seguinte imagem.
Sugestão: utilize as classes form-group, form-control e btn-* para formatar os vários
componentes.

Nível 6 – Componentes

Nesta secção pretende-se construir uma página web com vários componentes. Para tal deverá
utilizar o ficheiro index.html base com o mínimo essencial para o bootstrap.

1. Crie a seguinte página que contém uma barra de navegação, um jumbotron que ocupa toda a
largura do browser e 3 colunas com conteúdo do Ipsum lorem.

4/6
2. Acrescente as seguintes funcionalidades à barra de navegação:
◦ A barra deverá estar fixa no topo do ecrã
◦ Três novos menus “Home”, “About” e “Contact”
◦ Um formulário com uma caixa de texto “Search” e um botão “Search”

3. Modifique a página com o seguinte:


◦ Adicione um botão primário com o texto “Learn more” ao jumbotron
◦ Adicione botões com o texto “View details” com icons após cada parágrafo nas colunas.
◦ Explore os ícons em https://icons.getbootstrap.com/

4. Por fim adicione um alerta antes das colunas, adicione as palavras “Heading” antes de cada
coluna (e a palavra “New” na terceira coluna) e adicione um badge com o número 3 no item
de contactos da barra de navegação. Veja a imagem seguinte:

5/6
(fim de enunciado)

6/6

Você também pode gostar