A barra de navegação (NavBar) é um componente independente no bootstrap, e há uma clara diferença entre a barra de navegação (NavBar) e a navegação (NAV) no bootstrap. Existe uma cor de fundo na barra de navegação (NavBar), e a barra de navegação pode ser de várias formas, como links puros, formas, formas e navegação.
1. Barra de uma navegação de combate prático com menu e formulário de nível 2
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> barra de navegação </title> <link rel = "Stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/csssss/Bootsstrap.Bootsstrap. corpo {margin: 30px; preenchimento: 30px;} </style> </head> <body> <div role = "navegação"> <!-O título é implementado através de "Navbar-header" e "NavBar-Brand"-> <li> <li> <a href = "###) </a> </div" <ul>> <li> href = "##" data-toggle = "suspenso"> blog <span> </span> </a> <!-segundo menu-> <ul> <li> rol = "Pesquise"> <div> <input type = "text" placeholder = "por favor digite palavras-chave"/> </div> <button type = "submit"> pesquise </botão> </morm> </div> <!-Coloque-o no final do documento para fazer o carregamento da página-> <!! src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-incluindo todos os plug-ins JS para bootstrap ou plugins JS que podem ser usados conforme necessário-> <script src = "http://maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>As renderizações são as seguintes:
Além de usar o elemento A na marca naval e a forma UL e Navbar de Navbar-Nav, outros elementos podem ser usados na barra de navegação do bootstrap:
1) Botão na barra de navegação Navbar-btn
2) texto na barra de navegação na barra
3) Link normal na barra de navegação na barra de navegação
2. Barra de navegação com 2 odos de combate prático
BARMA DE NAVEGIAÇÃO TOP-> <div role = "navegação"> <div> <a href = "##"> título </a> </div> <ul> <li> <a href = "#"> home </a> </li> <li> <a href = "##"> blog </a> </li> <li> </ul> </div> <!-Barra de navegação no fundo-> <div role = "navegação"> <div> <a href = "##"> título </a> </div> <ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> blog </aa> </a> href = "##"> fórum </a> </li> </ul> </div> <!-conteúdo de texto-> <div> Página da web conteúdo </div>
As renderizações são as seguintes:
3. Barra de navegação prática de três responsivos
<div role="navigation"> <div> <!-- .navbar-toggle style is used to content that shrinks toggle, that is, the element where the nav-collapse collapse style is located --> <button type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span></span> <span></span> <span></span> <span></span> <!-verifique se a marca navbar é exibida em telas largas e estreitas-> <a href = "##"> título </a> </div> <!-Quando a largura da tela for menor que 768px, o conteúdo do contêiner-devive-rate-rate-ascola. Quando o ícone do ícone-bar for clicado, expanda-o novamente. Quando a tela é maior que 768px, ela será exibida por padrão. -> <Div>
As renderizações são as seguintes:
Às vezes, é necessário inverter a cor. O Bootstrap fornece uma barra de navegação invertida para isso, mas apenas substitui o nome da classe Navbar-Dealt por Navbar-Inverse e, em seguida, a cor de fundo da barra de navegação e a cor do texto será modificada.
4. Navegação prática de quatro paguas
1) Navegação de paginação com números de página
<!-Paginação: Tamanho normal Paginação-LG: Faça a navegação de paginação maior paginação de paginação-sm: torne a paginação menor-> <ul> <li> <a href = "#"> «home </a> </li> <li> <a href ="#"> 1 </a> </li> <li> <a>-" "#"> 1 </a> </li> <li> <a> href = "#"> 3 </a> </li> <li> <a href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> <!-status desabilitado-> <li> <a href = "#" última página »
As renderizações são as seguintes:
2) Página virada e navegação de paginação
<ul> <li> <a href = "#"> «página anterior </a> </li> <!-status desativado-> <li> <a href ="#"> próxima página» </a> </li> </ul> <!-alinhe à esquerda e direita-> <ul> <li> <ahf = "#" ">« página »</a> </li> </ul>
As renderizações são as seguintes:
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.