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 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 fixa 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 responsivas
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 paginação
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:
5. Cinco tags práticos
Em algumas páginas da web, uma tag é frequentemente adicionada para informar aos usuários algumas informações adicionais, como:
Esse efeito é extraído em bootstrap em um componente de etiqueta e destacado no estilo ".Label". Semelhante ao botão do elemento do botão, o estilo da etiqueta também fornece uma variedade de cores, principalmente através desses nomes de classes para modificar a cor do fundo e o texto:
As renderizações são as seguintes:
6. Combate prático Seis - crachá
Os crachás são usados principalmente para lembrá -lo de quantas mensagens não lidas são necessárias. No bootstrap, o estilo "emblema" é usado para alcançar o efeito do crachá.
Medalha da barra de navegação NavBar-Default-Default-> <div role = "navegação"> <div> <a href = "##"> title </a> </div> <ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> blog </a> </a> href = "##"> fórum <span> 10 </span> </a> </li> <li> <a href = "##"> feedback </a> </li> </ul> </div>
As renderizações são as seguintes:
7. Caixa pop -up prática de sete - que impulsiona a transição de animação
<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>Animated transition pop-up box</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <!--css Estilo-> <yoy> corpo {margin: 30px; preenchimento: 30px;} </style> </head> <body> <button type = "button"> clique em mim </button> <div id = "mymodal"> <div> <div> <div> <div> <butt type = "button" dismiss = "sma" <npan> <npan> <div-hidden] <H4> Título pop-up </h4> </div> <div> <p> Conteúdo do corpo popt No final do documento, para tornar a página carregar mais rápido-> <!-Se você deseja usar o plug-in JS do bootstrap, primeiro você chama jQuery-> <script src = "http://libs.baidu.com/jquery/1.9.0/jQuery.Min.js"> </! -> <script src = "http://maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> <cript> $ (function () {$ (". }); </script> </body> </html>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.
Se você ainda deseja aprender em profundidade, clique aqui para aprender e anexar dois tópicos interessantes a você: Bootstrap Learning Tutorial Bootstrap Tutorial Practical Tutorial