A barra de navegação é um bom recurso e é um recurso proeminente do site de bootstrap. A barra de navegação é um componente de meta responsivo que atua como o título de navegação para um aplicativo ou site. A barra de navegação é colapsada na visão do dispositivo móvel e a barra de navegação se expande horizontalmente à medida que a largura da viewport disponível aumenta. No núcleo da barra de navegação Bootstrap, a barra de navegação inclui a definição de estilos para nomes de sites e navegação básica.
As etapas para criar uma barra de navegação padrão são as seguintes:
Para adicionar links à barra de navegação, basta adicionar uma lista não ordenada com a classe .nav, .navbar-nav.
Os exemplos a seguir compartilharão com você a barra de navegação feita usando o bootstrap3. O conteúdo específico é o seguinte
por exemplo
Então, como escrever um componente tão conveniente
Use Bootstrap3!
Conte -nos diretamente
De um modo geral, a navegação é colocada na seguinte estrutura
<NAV RUPE = "navegação"> <div> <div> <a href = "#"> <img src = "..."> </a> </div> </div> </avher>
1. NAV Tags
Na primeira classe, o Navbar é necessário. Outras propriedades são opcionais.
Adicionar o padrão navbar cria a navegação mais básica e não será corrigida onde a cor é transparente.
Adicione a cor da classe Inverse Navbar para ficar preto
Adicione o top NavBar Fixed para corrigir na parte superior, adicione fundo de marinho fixo para corrigir na parte inferior
O efeito de adicionar o topo da NavBar-Static é o seguinte
<div>
Cabeçalho de navegação, por exemplo, o log do site, clique na página inicial ou no nome do site
O efeito está acima
Eu acho que o efeito será melhor se eu puder alterá -lo para o texto aqui
2. Forma
Adicionar formas na navegação, como pesquisa, login etc. também é comum
Por exemplo, minha pesquisa acima
<form role = "search"> <div> <input type = "text" placeholder = "search"> </div> <botão tipo = "submeter"> search </butut> </morm>
Explique que a classe Navbar-Left posicionará este formulário à esquerda
Claro, há também uma aula de Navbar-Right
Da mesma forma, o botão pode ser adicionado assim
<button type = "Button"> Entrar </botão>
O texto pode ser adicionado assim
<p> Assinado como Mark Otto </p>
O link pode ser adicionado assim
<p> assinou como <a href = "#"> mark otto </a> </p>
E, dessa maneira
Minha navegação
<!-Navegação-> <div> <div id = "NavContainer"> <nav role = "navegação"> <div> <div> <a href = "#"> xiansheng biblioteca </a> </div> <form role = "search"> <div> <input type = "text" planilha "> <li> <a data-toggle = "modal" data-target = "#Register"> registrar </a> </li> <li> <a data-toggle = "modal" data-target = "#Signin"> login </a> </li> </ul> </liv> </div> <//Div </a> </li>
O efeito é o seguinte
Para mais conteúdo, você pode consultar o artigo para aprender:
Bootstrap implementa o efeito da barra de navegação padrão
Bootstrap deve aprender todos os dias (ii)
O Bootstrap deve aprender todos os dias Plugin de navegação adicional (Affix)
Mais conteúdo sobre bootstrap também pode ser encontrado em tópicos especiais: "Tutorial de aprendizado de bootstrap"
O exposto acima é a barra de navegação feita usando o bootstrap3. Espero que seja útil para o aprendizado de todos e faça sua própria barra de navegação