Este artigo contém os métodos básicos de uso da barra de navegação de bootstrap para sua referência. O conteúdo específico é o seguinte
1. Estilo de navegação básico de bootstrap
As barras de navegação são fabricadas principalmente na estrutura do bootstrap através do estilo ".nav". O estilo ".nav" padrão não fornece o estilo de navegação padrão. Outro estilo deve ser anexado a ele para ser eficaz, como "NAV-TABS", "NAV-PILLS", etc. Por exemplo, há um exemplo de uma barra de navegação de guias no editor de código à direita. Seu método de implementação é adicionar dois estilos de classe à tag UL.NAV e NAV-TABS
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> href = "##"> Responsivo </a> </li> </ul>
2. Barra de navegação básica de bootstrap
Ao criar uma barra de navegação básica, envolve principalmente as seguintes etapas:
Etapa 1: primeiro adicione o nome da classe "NavBar-Nav" com base na lista de navegação (<Ul class = "Nav">)
Etapa 2: Adicione um contêiner (div) fora da lista e use os nomes da classe "Navbar" e "Navbar-Default"
A principal função do estilo ".navbar" é definir os efeitos do preenchimento esquerdo e direito e cantos arredondados, mas os estilos relacionados à cor não são definidos de forma alguma.
<Div Role = "Navegação"> <ul> <li> <a href = "##"> página inicial </a> </li> <li> <a href = "##"> série de tutoriais </a> </li> <li> <a href = "####) para os professores famosos </a> </li> <li> <a href = "##"> sobre nós </a> </li> </ul> </div>
3. Adicione o título à barra de navegação de bootstrap
Na produção de páginas da web, muitas vezes há um título na frente do menu (o tamanho do texto é um pouco maior que outros textos). De fato, a estrutura do bootstrap também fez essa consideração para todos, que é implementada através de "Navbar-header" e "Navbar-Brand".
<div role = "Navegação"> <div> <a href = "##"> barra de navegação </a> </div> <ul> <li> <a href = "##"> homepage </a> </li> <li> <a href = "##"> série de tutoriais </a> <li> <li> <a href = "##"> " <li> <a href = "##"> casos de sucesso </a> </li> <li> <a href = "##"> sobre nós </a> </li> </ul> </div>
4. Menu secundário da barra de navegação Bootstrap
Também é muito fácil adicionar um menu secundário à barra de navegação
<div role = "navegação"> <div> <a href = "##"> barra de navegação </a> </div> <ul> <li> <a href = "##"> homepage </a> </li> <li> <a href = "##"> data-toggle = "DropDown"> <li> <mpan> </sprank href = "##"> css3 </a> </li> <li> <a href = "##"> javascript </a> </li> <li> <a href = "##"> php </a> </li> </li> <li> <li> <a href = "#) href = "##"> casos de sucesso </a> </li> <li> <a href = "##"> sobre nós </a> </li> </ul> </div>
5. Barra de navegação de bootstrap com forma
Algumas barras de navegação contêm formulários de pesquisa e uma "forma de navegação" é fornecida na estrutura do bootstrap. O método é muito simples de usar. Coloque um formulário com o nome da classe de forma de marinho no contêiner de navbar. NavBar-Left ”permite que o formulário flutue à esquerda para obter melhor alinhamento. Na estrutura de bootstrap, um estilo" Nav-Right-Right "também é fornecido para permitir que os elementos sejam alinhados à direita na barra de navegação.
<div role = "navegação"> <div> <a href = "##"> bootstrap </a> </div> <ul> <li> <a href = "#"> homepage </a> </li> <li> <a href = "##"> data-toggle = "suspenso"> <li> sprank href = "##"> css3 </a> </li> <li> <a href = "##"> javascript </a> </li> <li> <a href = "##"> php </a> </li> </li> <li> <li> <ahref> href = "##"> Introdução a professores famosos </a> </li> <li> <a href = "##"> casos de sucesso </a> </li> <li> <a href = "##"> sobre nós </a> </li> </ul> <formulário = "" Rol = "> <button type = "submit"> pesquisa </butut> </morm> </div>
6. Botões, texto e links na barra de navegação de bootstrap
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 da estrutura de bootstrap. A estrutura fornece três outros estilos:
1). Botão na barra de navegação Navbar-btn
2). Texto na barra de navegação na barra
3) .navbar-link na barra de navegação
No entanto, esses três estilos estão sujeitos a certas restrições quando usados na estrutura e precisam ser usados em combinação com a marca naval e Navbar-Nav. Além disso, existem certas restrições à quantidade. Geralmente, não haverá problema ao usar um ou dois, e haverá problemas se exceder dois.
<div role = "navegação"> <div> <a href = "##"> bootstrap </a> </div> <ul> <li> <a href = "##"> textbar </a> </li> <li> <a href = "#"> textbar </a> <li> <li> <a> <a href = "#"> navbar text </a> <li> <li> <li> <a href = "##"> texto de navbar </a> </li> </ul> </div> <div role = "navegação"> <div> <a href = "##"> bootstrap </a> </df> <div> <a href = "##"> text <bar </a> <a> href = "##"> Texto de navbar </a> </div> </div>
7. Barra de navegação fixa de bootstrap
Em um dos muitos casos, os designers querem que a barra de navegação seja fixada na parte superior ou inferior do navegador, e a aplicação dessa barra de navegação fixa é mais comum no desenvolvimento móvel. A estrutura de bootstrap fornece duas maneiras de consertar barras de navegação:
.navbar fixed-top: a barra de navegação é fixa na parte superior da janela do navegador
.NavBar Fixed-Bottom: a barra de navegação é fixada na parte inferior da janela do navegador
<div role = "navegação">… </div> <div> Eu sou contente </div> <div role = "navegação">… </div>
8. Navegação de paginação de bootstrap
A navegação de paginação numerada na página pode ser a navegação de paginação mais comum, especialmente quando há muito conteúdo na página da lista, ela fornecerá aos usuários métodos de navegação de paginação. Geralmente, muitos estudantes gostam de usar estruturas div> a e div> span para criar navegação paginada. No entanto, na estrutura do bootstrap, uma estrutura como Ul> Li> A é usada e um método de paginação é adicionado à tag UL.
<ul> <li> <a href = "#"> «</a> </li> <li> <a href ="#"> 1 </a> </li> <li> <a href ="#"> 2 </a> <li> href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> <li> <a href = "#"> »</a> </li> </ul>
Na estrutura de bootstrap, você também pode definir o tamanho do botão de paginação em várias situações diferentes.
1). Tornar a navegação de paginação maior através de "Paginação-LG";
2). Tornar a navegação de paginação menor através de "paginação-sm"
<ul> …</ul> <ul> …</ul> <ul> …</ul> <ul>… </ul>
Além de fornecer a navegação de página com número de página, a estrutura de bootstrap também fornece navegação por volta da página. Esse tipo de navegação de paginação é frequentemente visto em alguns sites simples, como blogs pessoais, sites de revistas etc. Esse tipo de navegação de paginação não vê o número específico da página e fornece apenas um botão "página anterior" e "próxima página".
No uso real, a navegação de paginação que virou a página é semelhante à navegação de paginação codificada por página, adicionando a classe de pager à tag UL.
<ul> <li> <a href = "#"> «página anterior </a> </li> <li> <a href ="#"> próxima página» </a> </li> </lul>
Por padrão, a navegação de paginação que virou página é exibida no centro, mas às vezes precisamos que uma esteja à esquerda e a outra à direita. O Bootstrap Framework fornece dois estilos
Anterior: Deixe o botão "anterior" deixar
Próximo: Deixe o botão "próximo" à direita
<ul> <li> <a href = "#"> «página anterior </a> </li> <li> <a href ="#"> próxima página» </a> </li> </lul>
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 exposto acima é sobre a barra de navegação de bootstrap, espero que seja útil para o aprendizado de todos.