Bootstrap | Barra de navegação
A barra de navegação de um site consiste em vários menus vinculados a diferentes seções de sites. Mais especificamente, a barra de navegação é um cabeçalho de página geralmente posicionado no topo do site. Usando a estrutura de bootstrap, podemos criar uma barra de navegação com grande facilidade. O Bootstrap também oferece várias classes com estilos predefinidos para ajustar a barra de navegação.
Este artigo o guiará na barra de navegação de bootstrap ilustrando os tópicos abaixo:
- Como criar uma simples barra de navegação de bootstrap?
- Como adicionar um menu suspenso à barra de navegação?
- Como adicionar ícones à barra de navegação?
- Como alinhar menus de navegação?
- Como criar uma barra de navegação escura?
- Como consertar a posição da barra de navegação?
- Como fazer uma barra de navegação desabando?
Como criar uma simples barra de navegação de bootstrap?
Para criar uma barra de navegação simples usando a estrutura de bootstrap, siga as etapas abaixo:
- Primeiro, adicione o “”Tag com a“.Navi" e ".Navbar-Default" Aulas.
- Adicione um “”Tag com a classe“Fluid de contêiner”Para adicionar conteúdo à barra de navegação.
- Para incluir um logotipo, crie um "" e atribua uma classe "Navar-header”.
- Dentro deste elemento div, adicione um “”Tag para tornar o logotipo clicado e definir uma classe“Brand-marinho”Para isso.
- Depois disso, crie uma lista de menus utilizando o
- tag com o "Nav" e "Navbar-Nav" Aulas.
- Dentro de
- tag, inclua o
- Tags para especificar os itens. Coloque os nomes da página usando a tag para torná -los clicáveis:
A descrição das classes importantes de bootstrap utilizadas no snippet de código acima é dada abaixo:
- ““Navi”A classe possui estilos predefinidos para criar uma barra de navegação padrão.
- ““Navbar-Default”É usado para criar uma barra de navegação padrão.
- ““NavBar-Expand-LG”A classe é ajustada para fornecer aulas de esquemas de cores e criar um colapso responsivo.
- ““Fluid de contêiner”Fornece um contêiner de largura total.
- ““Navar-header”, Uma classe de arquitetura, alocou a área em pixels à esquerda da barra naval, o que permite ao logotipo preencher todo o espaço. Ele também fornece capacidade de resposta à classe Navbar-Brand com um logotipo e evita sobreposição do menu com o logotipo.
- ““Brand-marinho”Coloca a imagem ou texto do logotipo na parte superior da barra de navegação.
Saída
Como adicionar um menu suspenso à barra de navegação?
Você pode adicionar um menu suspenso à barra de navegação utilizando o “suspenso" aula.
Siga as etapas para ver como ajustar um menu suspenso na barra de navegação:
- Adicionar
- Elemento da lista em que você deseja adicionar um menu suspenso e atribui-la a uma classe “suspenso”.
- Para tornar o menu clicável, aloque o nome do menu dentro da tag. Atribua uma classe “suspenso-toggle”E atributos“Data-Toggle" e "Href”Para adicionar um link a ele. Em seguida, para anexar um símbolo intermediário, mencione um “Caret" aula.
- Para listar os itens do menu, especifique o
- tag com o "menu suspenso" aula.
- Dentro disto
- elemento, mencione os itens da lista usando o
- elementos. Cada um deles segura a tag para definir links para ele:
Menu suspenso
class = "Caret">No código acima:
- ““suspenso”A classe indica o menu suspenso.
- ““suspenso-toggle”Ajuda a criar um suspensão interativo ao clicar nos alternantes do menu.
- ““Caret”Cria o ícone de seta.
- ““Data-Toggle”O atributo é usado para exibir uma seção de ocultar no clique.
Saída
Como adicionar ícones à barra de navegação?
Existem vários ícones de glifos no bootstrap que podem ser usados sem custo. Mais especificamente, precisamos de um elemento embutido, como “,”Para incorporar ícones na barra de navegação.
Para fazer isso, defina o atributo de classe do elemento como “glificon”, Adicione um espaço e depois mencione o“Nome do glificon”Como o nome da classe:
Saída
Como alinhar menus de navegação?
Bootstrap oferece várias classes para definir o alinhamento de menus de navegação. Por exemplo, o “.Navir-right”A classe ajusta o alinhamento do menu à direita.
Exemplo
Confira o exemplo abaixo que mostra como ajustar os dois itens da lista a serem alinhados:
Saída
Como criar uma barra de navegação escura?
O "Navbar-Inverse”A classe é utilizada para converter a cor da barra de navegação em escuro da seguinte maneira:
Saída
Como consertar a posição da barra de navegação?
Muitos utilitários de posição de bootstrap podem ser alocados para definir a posição da barra de navegação. Por exemplo, o “.Navbar fixed-top”Corrige a barra de navegação no topo da página:
Saída
Como fazer uma barra de navegação desabando?
Como sabemos, o principal objetivo da estrutura do bootstrap é a capacidade de resposta. Então, para definir a barra de navegação em tamanhos de tela pequena, vamos adicionar um botão para expandir a barra de navegação no clique.
Para projetar um botão de hambúrguer, adicione três ícones de barras no elemento. O "ícone-bar”Classe exibe o ícone da barra. Então, defina o atributo “Data-Toggle" com o "colapso" valor. O "alvo de dados”Atributo é atribuído o“#mynavbar“Apontando para o ID da div:
Aqui:
- ““Navbar-Toggle”Estende os elementos.
- ““Data-Toggle"Com o valor"colapso”Determina o elemento dobrável oculto ou visível no clique.
- ““alvo de dados”O atributo seleciona o seletor CSS ao qual a operação de colapso é aplicada. O "#mynavbar”É o id do elemento div.
Em seguida, embrulhe os itens do menu de navegação em um elemento div tendo id “Mynavbar”:
No trecho de código acima:
- ““colapso”Indica o conteúdo que mostra ou esconde.
- ““Navbar-colapso”Significa os itens do menu de navegação na visualização móvel.
A saída abaixo do ritmo significa que a barra de navegação está desabada em um botão:
Em telas pequenas, como no celular, a barra de navegação é exibida e visível quando o botão é clicado:
É isso! Você aprendeu sobre a criação da barra de navegação de bootstrap usando diferentes classes.
Conclusão
Para criar uma barra de navegação de bootstrap, primeiro, utilize o HTML
- e
- Tags para fazer uma lista de menus junto com as classes de bootstrap. Além disso, várias aulas de bootstrap são utilizadas para criar uma barra de navegação responsiva para o nosso site, como “.Navi",".NavBar-exPand-xl | lg | md | sm",".marca naval", e muitos mais. Este artigo explicou como criar uma barra de navegação de bootstrap com recursos diferentes.