Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprenda Desafio e Quiz: Aplicação de Conceitos Básicos do Bootstrap | Conceitos Básicos
Essenciais do Bootstrap para Sites Modernos

bookDesafio e Quiz: Aplicação de Conceitos Básicos do Bootstrap

Tarefa: Aprimorando a Exibição do Portfólio com Classes do Bootstrap

  • Etapa 1: Adicionar a classe apropriada ao elemento div fornecido para criar um contêiner global.
  • Etapa 2: Adicionar a classe apropriada ao elemento div fornecido para criar uma linha dentro do contêiner.
  • Etapa 3: Adicionar as classes apropriadas aos elementos div fornecidos para criar colunas para cada item do portfólio. Garantir que as colunas sejam responsivas e ajustem sua largura conforme necessário. (Lembre-se de que há três elementos div nesta etapa.)
  • Etapa 4: Estilizar os títulos dos itens do portfólio adicionando classes apropriadas aos elementos h2 fornecidos. Centralizar os títulos dentro de suas respectivas colunas.
  • Etapa 5: Tornar as descrições dos itens do portfólio legíveis e com tamanho adequado, adicionando classes apropriadas aos elementos p fornecidos. Definir o tamanho da fonte como fs-6.
index.html

index.html

index.css

index.css

copy

Utilizar o sistema de grid do Bootstrap (container, row, col) para criar um layout responsivo para a exibição do portfólio. Aplicar classes de tipografia (text-center, h2, fs-6) para estilizar adequadamente os títulos e descrições dos itens do portfólio.

index.html

index.html

index.css

index.css

copy

1. Em quantas colunas o sistema de grid do Bootstrap divide a página?

2. Qual classe envolve e centraliza o conteúdo dentro de um container de largura fixa?

3. Quais classes são usadas para criar um grupo horizontal de colunas no sistema de grid?

4. O que as classes sm, md, lg e xl representam?

5. Quais classes são usadas para estilizar títulos com tamanhos diferentes?

6. Quais classes são usadas para alinhar elementos de texto?

7. Qual classe é usada para empilhar botões verticalmente?

8. Qual classe é aplicada aos inputs de checkbox e radio button dentro de um contêiner form-check para garantir uma estilização consistente?

9. Como o sistema de grid do Bootstrap contribui para a organização do layout de formulários?

question mark

Em quantas colunas o sistema de grid do Bootstrap divide a página?

Select the correct answer

question mark

Qual classe envolve e centraliza o conteúdo dentro de um container de largura fixa?

Select the correct answer

question mark

Quais classes são usadas para criar um grupo horizontal de colunas no sistema de grid?

Select the correct answer

question mark

O que as classes sm, md, lg e xl representam?

Select the correct answer

question mark

Quais classes são usadas para estilizar títulos com tamanhos diferentes?

Select the correct answer

question mark

Quais classes são usadas para alinhar elementos de texto?

Select the correct answer

question mark

Qual classe é usada para empilhar botões verticalmente?

Select the correct answer

question mark

Qual classe é aplicada aos inputs de checkbox e radio button dentro de um contêiner form-check para garantir uma estilização consistente?

Select the correct answer

question mark

Como o sistema de grid do Bootstrap contribui para a organização do layout de formulários?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 8

Pergunte à IA

expand

Pergunte à IA

ChatGPT

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

Suggested prompts:

What are the exact Bootstrap classes I should use for each step?

Can you show an example of how the HTML structure should look after applying these classes?

Can you explain how the Bootstrap grid system ensures responsiveness in this scenario?

Awesome!

Completion rate improved to 3.23

bookDesafio e Quiz: Aplicação de Conceitos Básicos do Bootstrap

Deslize para mostrar o menu

Tarefa: Aprimorando a Exibição do Portfólio com Classes do Bootstrap

  • Etapa 1: Adicionar a classe apropriada ao elemento div fornecido para criar um contêiner global.
  • Etapa 2: Adicionar a classe apropriada ao elemento div fornecido para criar uma linha dentro do contêiner.
  • Etapa 3: Adicionar as classes apropriadas aos elementos div fornecidos para criar colunas para cada item do portfólio. Garantir que as colunas sejam responsivas e ajustem sua largura conforme necessário. (Lembre-se de que há três elementos div nesta etapa.)
  • Etapa 4: Estilizar os títulos dos itens do portfólio adicionando classes apropriadas aos elementos h2 fornecidos. Centralizar os títulos dentro de suas respectivas colunas.
  • Etapa 5: Tornar as descrições dos itens do portfólio legíveis e com tamanho adequado, adicionando classes apropriadas aos elementos p fornecidos. Definir o tamanho da fonte como fs-6.
index.html

index.html

index.css

index.css

copy

Utilizar o sistema de grid do Bootstrap (container, row, col) para criar um layout responsivo para a exibição do portfólio. Aplicar classes de tipografia (text-center, h2, fs-6) para estilizar adequadamente os títulos e descrições dos itens do portfólio.

index.html

index.html

index.css

index.css

copy

1. Em quantas colunas o sistema de grid do Bootstrap divide a página?

2. Qual classe envolve e centraliza o conteúdo dentro de um container de largura fixa?

3. Quais classes são usadas para criar um grupo horizontal de colunas no sistema de grid?

4. O que as classes sm, md, lg e xl representam?

5. Quais classes são usadas para estilizar títulos com tamanhos diferentes?

6. Quais classes são usadas para alinhar elementos de texto?

7. Qual classe é usada para empilhar botões verticalmente?

8. Qual classe é aplicada aos inputs de checkbox e radio button dentro de um contêiner form-check para garantir uma estilização consistente?

9. Como o sistema de grid do Bootstrap contribui para a organização do layout de formulários?

question mark

Em quantas colunas o sistema de grid do Bootstrap divide a página?

Select the correct answer

question mark

Qual classe envolve e centraliza o conteúdo dentro de um container de largura fixa?

Select the correct answer

question mark

Quais classes são usadas para criar um grupo horizontal de colunas no sistema de grid?

Select the correct answer

question mark

O que as classes sm, md, lg e xl representam?

Select the correct answer

question mark

Quais classes são usadas para estilizar títulos com tamanhos diferentes?

Select the correct answer

question mark

Quais classes são usadas para alinhar elementos de texto?

Select the correct answer

question mark

Qual classe é usada para empilhar botões verticalmente?

Select the correct answer

question mark

Qual classe é aplicada aos inputs de checkbox e radio button dentro de um contêiner form-check para garantir uma estilização consistente?

Select the correct answer

question mark

Como o sistema de grid do Bootstrap contribui para a organização do layout de formulários?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 8
some-alt