Como criar um menu de navegação responsivo utilizando o fram...

Próximas questões
Com base no mesmo assunto
Q2172206 Programação
Como criar um menu de navegação responsivo utilizando o framework Bootstrap?
Alternativas

Gabarito comentado

Confira o gabarito comentado por um dos nossos professores

Resposta correta: C - <nav class="navbar navbar-expand-lg">...</nav>

O tema da questão aborda a criação de um menu de navegação responsivo utilizando o Bootstrap, que é um framework de front-end amplamente utilizado para desenvolvimento web. O Bootstrap oferece um conjunto de classes CSS e componentes que facilitam a criação de layouts responsivos e a implementação de funcionalidades comuns de interface, como menus de navegação, formulários e botões.

Para resolver essa questão, é necessário conhecer as classes que o Bootstrap fornece para criar uma navbar (barra de navegação) e como elas interagem com o layout responsivo do site. A classe navbar é usada para definir um componente de navegação e a classe navbar-expand-lg faz com que o menu de navegação seja horizontal até atingir o breakpoint definido para telas grandes (large), mudando para um menu hamburguer (ícone com três linhas horizontais) em telas menores. Isso garante que o menu seja responsivo e se adapte a diferentes tamanhos de tela.

As outras opções apresentam classes que não correspondem à funcionalidade descrita na pergunta:

  • A classe navbar-fixed-top faz com que a navbar fique fixa no topo da página, mas não afeta a responsividade.
  • A classe navbar-static-top cria uma navbar estática no topo, mas também não está relacionada com a responsividade.
  • A classe navbar-inverse é usada para alterar a cor da navbar, não influencia a responsividade.
  • A classe navbar-toggleable-md é uma forma antiga (Bootstrap versão 4 alpha) para tornar a navbar responsiva, podendo ser confundida com a resposta correta, mas não é a nomenclatura atual no Bootstrap.

Portanto, a alternativa C é a correta porque usa a classe navbar-expand-lg do Bootstrap para criar um menu de navegação que se adapta a diferentes tamanhos de tela, mantendo a usabilidade e o design adequados em dispositivos móveis e desktops.

Clique para visualizar este gabarito

Visualize o gabarito desta questão clicando no botão abaixo

Comentários

Veja os comentários dos nossos alunos

Navbar

Documentação e exemplos para o poderoso e responsivo cabeçalho de navegação, o navbar. Inclui suporte para logo, navegação, plugin collapse e muito mais.

Como funciona

Aqui está oquê você precisa saber, antes de começar a usar o navbar:

Navbars precisam de um .navbar com .navbar-expand{-sm|-md|-lg|-xl} (para responsividade) e classes do esquema de cores;

Navbars e seus conteúdos são fluidos, por padrão;

Use containers alternativos para limitar suas larguras.

Use nossas classes utilitárias de espaçamento e flex para controlar o espaço e alinhamento, dentro das navbars;

Navbars são responsivos, por padrão, mas você pode modificar isso, facilmente;

Comportamento responsivo depende do nosso plugin JavaScript Collapse.

fonte:

https://getbootstrap.com.br/docs/4.1/components/navbar/

Clique para visualizar este comentário

Visualize os comentários desta questão clicando no botão abaixo