As barras de navegação são componentes de meta responsivos que atuam como cabeçalhos de navegação em seu aplicativo ou site.
1. Barra de navegação padrão
A barra de navegação pode ser dobrada (e pode ser ligada e desativada) no dispositivo móvel e se torna um modo expandido horizontalmente à medida que a largura da viewport disponível aumenta
Personalize os limiares para modos de dobragem e modos horizontais
Dependendo da duração do que você coloca na barra de navegação, talvez você precise ajustar o limite para a barra de navegação para inserir o modo de dobra e o modo horizontal. Você pode atingir suas necessidades alterando o valor da variável @grid-float-breakpoint ou adicionando seu próprio código CSS de consulta de mídia.
Primeiro passo:
A tag de navegação de contêineres mais externos e adicione uma classe de estilo de barra de navegação para indicar que ela pertence à barra de navegação
<NAV RUPE = "NAVEGUENT"> </AV>
Efeito:
Etapa 2 : Adicionar cabeçalho
<Nav role = "navegação"> <div> <botão tipo = "botão" data-toggle = "colapso" data-target = "#bs-expler-navbar-colapso-1"> <pan> alternação </span> </span> </buttão
A etiqueta do botão está aninhada com três ícones de extensão. Em seguida, dê a classe de estilo Navbar-Toggle e o colapso do atributo (colapso), e o alvo é alvo de dados ao clicar.
Quando a janela se estreita até certo ponto, o efeito à direita aparece.
Etapa 3: menu suspenso aninhado, formulário de formulário, menu suspenso.
Código:
<H1> barra de navegação </h1> <nav role = "navegação"> <div> <button type = "button" data-toggle = "colapso" data-target = "#bs-expler-navbar-colapso-1"> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> href = "#"> marca </a> </div> <div id = "bs-expler-navbar-collapse-1"> <!-menu suspenso aninhado-> <ul> <li> <a href = "#" link </a> </li> <li> <a href = "#" <li> <a href = "#" data-toggle = "suspenso"> pulldown <b> </b> </a> <ul> <li> <a href = "#"> ação </a> </li> <li> <a href = "#" ação </a> </li> <li> <a> <a> href = "#"> ação </a> </li> <li> <a href = "#"> ação </a> </li> <li> <a href = "#"> ação </a> </li> </li> </li> </ul> <!-formas de anulação <form = "/" "</li> </li> </ul> <!-Forms-> <form =" "" role = ""> "> type = "Button"> Enviar </botão> </morm> <! -----> </div> </avher>
Visualização:
Aumente a acessibilidade das barras de navegação
Para melhorar a acessibilidade, adicione função = "navegação" a cada barra de navegação.
2. Forma
A colocação do formulário dentro do .NavBar fornece um bom alinhamento vertical e um estado em colapso em uma visualização mais estreita. Use a opção de alinhamento para determinar onde ela aparece na barra de navegação.
Muito código é compartilhado usando o mixin, .navbar-form e .form-inline.
Código
<form action = "" role = "search"> <div> <input type = "text"/> </div> <button type = "button"> envie </button> </morm>
Adicionar rótulo de etiqueta à caixa de entrada
Se você não adicionar tags de etiqueta à caixa de entrada, o leitor de tela terá problemas. Para formulários na barra de navegação, você pode ocultar a etiqueta da etiqueta através da classe .SR somente.
3. Botões
Código:
<button type = "button"> login </botão>
Visualização:
4. Texto
Ao envolver o texto no texto .navbar-text, a tag <p> geralmente é usada para o espaçamento e a cor da linha correta.
Trenó de código:
<p> Texto </p>
5. Links de não navegação
Talvez você queira adicionar links padrão fora dos componentes de navegação padrão e, em seguida, usar a classe .navbar-link pode fornecer ao link a cor padrão e inversa correta.
Trenó de código:
Copie o código da seguinte forma: <p> Este é o link <a href = "#"> </a> </p>
6. Alinhamento de componentes
Use a classe de ferramentas .navbar-left ou .navbar-right para alinhar links, formulários, botões ou texto de navegação. Ambas as classes usam estilos flutuantes de CSS em direções específicas. Por exemplo, para alinhar links de navegação, você precisa colocá -los em uma classe de ferramentas separada <ul>.
Essas classes são versões de mistura de .Pull-esquerdista e.
7. fixado no topo
A adição de top .navbar fixo permite que a barra de navegação seja fixada na parte superior. O efeito não é suficiente.
Precisa definir preenchimento para etiquetas corporais
Esta barra de navegação fixa obscurecerá outros conteúdos na página, a menos que você defina o preenchimento acima <Body>. Use seu próprio valor ou o código fornecido abaixo. Dica: A altura padrão da barra de navegação é 50px.
Corpo {Top-top: 70px; }
Ele deve ser colocado após o arquivo principal do Bootstrap CSS. (Problemas de cobertura)
8. fixado no fundo
Use o fundo .navbar fixo.
Precisa definir interno (preenchimento) para etiquetas corporais
Esta barra de navegação fixa obscurecerá outros conteúdos na página, a menos que você defina o preenchimento na parte inferior do <body>. Use seu próprio valor ou o código fornecido abaixo. Dica: A altura padrão da barra de navegação é 50px.
Corpo {Botting-Bottom: 70px; }
Certifique -se de usá -lo após carregar o núcleo do Bootstrap CSS.
9. Fique no topo
Crie uma barra de navegação com a página adicionando .navbar-static-top. Ele desaparece quando a página rola para baixo. Ao contrário da classe .NavBar-Fixed-*, você não precisa adicionar preenchimento ao corpo.
10. Barra de navegação em cores inversas
A aparência da barra de navegação pode ser alterada adicionando a classe .navbar-Inverse.
Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O acima é uma introdução detalhada de como usar a barra de navegação de bootstrap. Espero que seja útil para o aprendizado de todos.