Menus NAV em Bootstrap 5
Então, este artigo fornece conhecimento detalhado sobre
- Como criar um NAV básico?
- Quais são os diferentes estilos de menu Bootstrap?
Então, hoje vamos discutir diferentes menus de navegação (menus de navegação) que um usuário pode usar de acordo com seu requisito para fazer um design responsivo.
Como criar um NAV básico?
O NAV básico abaixo é criado usando .Nav classe com
- tag e .NAV-ITEM murcha
- marcação:
Mas no bootstrap 5, podemos usar o NAV como uma tag html
Também podemos alterar o alinhamento horizontal ou vertical do conteúdo de NAV, conforme o requisito de design.
Alinhamento horizontal
- Começar
- Centro
- Fim
Começar
Para alinhar o conteúdo de NAV horizontalmente no início, use a classe "justify-content-start":
Centro
Para alinhar o conteúdo de NAV horizontalmente no centro, use a classe "justify-content-center":
Fim
Para alinhar o conteúdo de NAV horizontalmente no final, use a classe "Justify-Content-End":
Alinhamento vertical
Para alinhar o conteúdo de navegação verticalmente, use a classe "Flex-Column":É assim que um menu de navegação está alinhado verticalmente.
Estilos de menus de bootstrap
Os menus de bootstrap são classificados em categorias de dois estilos:
- Guias
- Pílulas
Guias
Para converter o menu NAV em guias, basta adicionar o .NAV NAV-TABS classe para o seu
Guias usando
É assim que as guias usando
Guias usando
- marcação
É assim que as guias usando
Pílulas
Para converter o menu NAV em pílulas, basta adicionar o .NAV NAV-PILLS classe para o seu
Pílulas usando
É assim que os comprimidos usando
Pílulas usando
- marcação
É assim que os comprimidos usando
- tag são criadas.
Guias com menu suspenso usando
Para criar guias com menu suspenso usando tag, use .suspenso classe com .NAV-ITEM classe e envolva -a em torno de uma etiqueta de ancoragem que contém .Nav-link, .suspenso-toggle classes junto com data-bs-toggle = "suspenso" atributo. Depois embrulhe esta tag de ancoragem
É assim que as guias com o menu suspenso usando
Guias com menu suspenso usando
- marcação
Para criar guias com menu suspenso usando
É assim que as guias com menus suspensos usando
- tag são criadas.
Pílulas com menu suspenso usando
Para criar pílulas com menu suspenso usando tag, use .suspenso classe com .NAV-ITEM classe e envolva -a em torno de uma etiqueta de ancoragem que contém .Nav-link, .suspenso-toggle classes junto com data-bs-toggle = "suspenso" atributo. Depois embrulhe esta tag de ancoragem
É assim que as pílulas com um menu suspenso usando
Pílulas com menu suspenso usando
- marcação
Para criar pílulas com menu suspenso usando tag, use .suspenso classe com .NAV-ITEM classe e envolva -a em torno de uma etiqueta de ancoragem que contém .Nav-link, .suspenso-toggle classes junto com data-bs-toggle = "suspenso" atributo. Depois embrulhe esta tag de ancoragem
É assim que as pílulas com um menu suspenso usando
- tag são criadas.
Pílulas verticais
Para criar pílulas verticais, basta adicionar uma aula .coluna flexível com .pilhas de navegação aula.
Preencha e justifique o menu de guias e comprimidos
.preenchimento de navegação A classe é usada para preencher espaços de maneira injustificada enquanto .Justificado de Nav A classe é usada para preencher espaços de maneira justificada.
Guias com .preenchimento de navegação
Para preencher os espaços descobertos de um contêiner, basta adicionar .preenchimento de navegação classe com .NAV NAV-TABS. Mas o .preenchimento de navegação A classe apenas encheu os espaços, mas não os justificou.
É assim que as guias com .preenchimento de navegação são criados.
Guias com .Justificado de Nav
.Justificado de Nav A classe não apenas preenche os espaços ideais, mas também a distribui igualmente entre todos os itens de navegação.
É assim que as guias com .Justificado de Nav são criados.
Pílulas com .preenchimento de navegação
Para preencher os espaços descobertos de um contêiner, basta adicionar um .preenchimento de navegação classe com .NAV NAV-PILLS. Mas o .preenchimento de navegação A classe apenas encheu os espaços, mas não os justificou.
É assim que os comprimidos com .preenchimento de navegação são criados.
Pílulas com .Justificado de Nav
.Justificado de Nav A classe não apenas preenche os espaços ideais, mas também a distribui igualmente entre todos os itens de navegação.
É assim que os comprimidos com .Justificado de Nav são criados.
Conclusão
Os menus de nav são criados usando
- e