Como criar/projetar um barbar no bootstrap 5
No Bootstrap 5, a barra de navegação é usada para conectar e vincular todas as páginas da web relacionadas a um site e um usuário pode se mover entre páginas facilmente. A barra de navegação é um componente muito importante de um site que contém um logotipo da marca, nomes de páginas e seus links e uma caixa de pesquisa de acordo com os requisitos do usuário.
Este artigo fornece um conhecimento detalhado sobre
- Criando uma barra de navegação
- Navbar com menu suspenso
- Navbar com forma embutida
- Navbar dobrável
- Mudando as cores da barra de navegação
Como criar um bar
Para criar um uso de Navbar, .Navi aula e para alinhar o menu em uma linha de uso .navbar-expand-xxl/lg/md/sm. Para escolher entre o uso do humor claro ou escuro .Navbar-Light/Dark e para dar uma cor de fundo para um uso de marinho .BG-Light.
Código:
Bootstrap 5 Navbar
É assim que você cria uma barra de navegação no bootstrap 5.
Navbar com menu suspenso
Para criar uma barra de navegação com o menu suspenso Use .classe suspensa com .Classe Nav-Item In
Código
É assim que um marinho com um menu suspenso é criado.
Navbar com forma embutida
Para criar uma barra de navegação com forma embutida, use Tag com a classe .forma embutida e envolvê -lo em torno de um Tag com a classe .Controle de forma e adicione um botão usando um Tag com a classe .btn, btn-success, Logo após o Tag de fechamento.
É assim que você cria um barra de navegação com forma embutida.
Navbar dobrável
Para criar uma barra naval dobrável, use um com o .colapso e .Navbar-colapso Aulas. Dar uma ID exclusivo = ”” para a div e depois envolver a div em volta do seu e
Tag. Para habilitar o Navbar dobrável, crie um Tag acima .colapso div com o .Navbar-Toggler classe e também Dê dados-BS-Target = “Colapso” e Data-Bs-Target = “#ID”. Dentro disso tag Crie a Tag com a classe .Navbar-Toggler-icon Para criar um botão de ícone de três linhas.
É assim que você cria um barbas de navios dobráveis.
Altere a cor da barra de navegação
Para alterar a cor do uso de marinho seguindo as classes
- BG-Light
- BG-Primary
- BG-success
- BG-caules
- BG-Info
- BG-Danger
ou use embutido marcação com cor de fundo; atributo.
Conclusão
Para criar um uso de Navbar, .Navi, .navbar-expand-xxl/lg/md/sm, .Navbar-Light/Dark, BG-Light/Primary/Success/Aviso/Info/Danger marcação. Para logotipo da marca ou adição de nome Tag com a classe .Marinha na marca dentro tag, para menu Adicionar Tag com a classe .Navbar-Nav dentro Além disso, para os itens da lista de menus Adicionar Tag com a classe .NAV-ITEM dentro
marcação
e para adicionar links da página ao uso de itens de navegação, Tag com a classe .Nav-link por dentro