Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprenda Desafio e Quiz: Domine Recursos Avançados do Bootstrap | Conceitos Avançados
Essenciais do Bootstrap para Sites Modernos

bookDesafio e Quiz: Domine Recursos Avançados do Bootstrap

Tarefa: Criando um Modal Bootstrap

Crie um componente de janela modal do Bootstrap que exiba detalhes do produto. Siga as etapas fornecidas no código inicial para preencher as classes Bootstrap ausentes e completar a estrutura do modal.

  • Etapa 1: Criar a estrutura do modal.
    • Aplique a classe modal ao contêiner mais externo;
    • Utilize a classe modal-dialog para a caixa de diálogo;
    • Adicione a classe modal-content para a área de conteúdo;
    • Certifique-se de que o modal esteja centralizado verticalmente na janela de visualização aplicando a classe modal-dialog-centered ao contêiner modal-dialog;
    • Use a classe modal-title para o elemento de título (<h5>);
    • Aplique a classe btn-close ao botão de fechar dentro do cabeçalho do modal.
  • Etapa 2: Adicionar detalhes do produto.
    • Insira a imagem do produto dentro do corpo do modal e garanta que ela seja redimensionada adequadamente utilizando a classe img-fluid;
    • Exiba o título do produto usando uma tag de título apropriada (<h6>) e aplique a classe modal-title;
    • Forneça uma breve descrição do produto utilizando um elemento de parágrafo (<p>) e aplique a classe modal-text.
index.html

index.html

copy
  1. Utilize as classes de componente modal do Bootstrap para criar a estrutura do modal:
    • Use a classe modal para o contêiner mais externo;
    • Use a classe modal-dialog para a caixa de diálogo;
    • Use a classe modal-content para a área de conteúdo.
  2. Centralize o modal verticalmente na janela de visualização utilizando a classe modal-dialog-centered aplicada ao contêiner modal-dialog.
  3. Certifique-se de que o título do modal esteja devidamente estilizado aplicando a classe modal-title ao elemento de título (<h5>).
  4. Utilize a classe btn-close para o botão de fechar dentro do cabeçalho do modal para garantir estilo e funcionalidade consistentes.
  5. Personalize o tamanho do modal aplicando uma das classes de tamanho (modal-lg, modal-xl, etc.) ao contêiner modal-dialog.
index.html

index.html

copy

1. Qual é o principal objetivo das Navbars do Bootstrap?

2. Qual classe deve ser usada para criar uma estrutura básica de navbar?

3. Qual classe deve ser aplicada às imagens para torná-las responsivas?

4. Quais classes adicionais podem ser usadas para estilizar imagens como miniaturas?

5. Qual componente do Bootstrap é adequado para exibir artigos, perfis de usuários e produtos de forma estruturada?

6. Qual componente do Bootstrap é utilizado para criar sliders de imagens interativos?

7. Qual classe deve ser aplicada ao elemento contêiner de um carrossel?

question mark

Qual é o principal objetivo das Navbars do Bootstrap?

Select the correct answer

question mark

Qual classe deve ser usada para criar uma estrutura básica de navbar?

Select the correct answer

question mark

Qual classe deve ser aplicada às imagens para torná-las responsivas?

Select the correct answer

question mark

Quais classes adicionais podem ser usadas para estilizar imagens como miniaturas?

Select the correct answer

question mark

Qual componente do Bootstrap é adequado para exibir artigos, perfis de usuários e produtos de forma estruturada?

Select the correct answer

question mark

Qual componente do Bootstrap é utilizado para criar sliders de imagens interativos?

Select the correct answer

question mark

Qual classe deve ser aplicada ao elemento contêiner de um carrossel?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 6

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Awesome!

Completion rate improved to 3.23

bookDesafio e Quiz: Domine Recursos Avançados do Bootstrap

Deslize para mostrar o menu

Tarefa: Criando um Modal Bootstrap

Crie um componente de janela modal do Bootstrap que exiba detalhes do produto. Siga as etapas fornecidas no código inicial para preencher as classes Bootstrap ausentes e completar a estrutura do modal.

  • Etapa 1: Criar a estrutura do modal.
    • Aplique a classe modal ao contêiner mais externo;
    • Utilize a classe modal-dialog para a caixa de diálogo;
    • Adicione a classe modal-content para a área de conteúdo;
    • Certifique-se de que o modal esteja centralizado verticalmente na janela de visualização aplicando a classe modal-dialog-centered ao contêiner modal-dialog;
    • Use a classe modal-title para o elemento de título (<h5>);
    • Aplique a classe btn-close ao botão de fechar dentro do cabeçalho do modal.
  • Etapa 2: Adicionar detalhes do produto.
    • Insira a imagem do produto dentro do corpo do modal e garanta que ela seja redimensionada adequadamente utilizando a classe img-fluid;
    • Exiba o título do produto usando uma tag de título apropriada (<h6>) e aplique a classe modal-title;
    • Forneça uma breve descrição do produto utilizando um elemento de parágrafo (<p>) e aplique a classe modal-text.
index.html

index.html

copy
  1. Utilize as classes de componente modal do Bootstrap para criar a estrutura do modal:
    • Use a classe modal para o contêiner mais externo;
    • Use a classe modal-dialog para a caixa de diálogo;
    • Use a classe modal-content para a área de conteúdo.
  2. Centralize o modal verticalmente na janela de visualização utilizando a classe modal-dialog-centered aplicada ao contêiner modal-dialog.
  3. Certifique-se de que o título do modal esteja devidamente estilizado aplicando a classe modal-title ao elemento de título (<h5>).
  4. Utilize a classe btn-close para o botão de fechar dentro do cabeçalho do modal para garantir estilo e funcionalidade consistentes.
  5. Personalize o tamanho do modal aplicando uma das classes de tamanho (modal-lg, modal-xl, etc.) ao contêiner modal-dialog.
index.html

index.html

copy

1. Qual é o principal objetivo das Navbars do Bootstrap?

2. Qual classe deve ser usada para criar uma estrutura básica de navbar?

3. Qual classe deve ser aplicada às imagens para torná-las responsivas?

4. Quais classes adicionais podem ser usadas para estilizar imagens como miniaturas?

5. Qual componente do Bootstrap é adequado para exibir artigos, perfis de usuários e produtos de forma estruturada?

6. Qual componente do Bootstrap é utilizado para criar sliders de imagens interativos?

7. Qual classe deve ser aplicada ao elemento contêiner de um carrossel?

question mark

Qual é o principal objetivo das Navbars do Bootstrap?

Select the correct answer

question mark

Qual classe deve ser usada para criar uma estrutura básica de navbar?

Select the correct answer

question mark

Qual classe deve ser aplicada às imagens para torná-las responsivas?

Select the correct answer

question mark

Quais classes adicionais podem ser usadas para estilizar imagens como miniaturas?

Select the correct answer

question mark

Qual componente do Bootstrap é adequado para exibir artigos, perfis de usuários e produtos de forma estruturada?

Select the correct answer

question mark

Qual componente do Bootstrap é utilizado para criar sliders de imagens interativos?

Select the correct answer

question mark

Qual classe deve ser aplicada ao elemento contêiner de um carrossel?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 6
some-alt