Como criar um menu de navegação responsivo utilizando o fram...
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