Este artigo apresentará principalmente o menu e a navegação do Bootstrap.
Começando com este artigo, apresentaremos arquivos relacionados a JavaScript, como segue:
<!-coloque-o no final da etiqueta corporal para fazer a página carregar mais rápido->
<!-Se você quiser usar o plug-in JS de bootstrap, você deve primeiro ligar para o jQuery->
<script src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script>
<!-Inclui todos os plugins de bootstrap js ou js que podem ser usados conforme necessário->
<script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
No Bootstrap, o componente menu suspenso é um componente independente. O efeito de interação do componente do Bootstrap é todos baseados em plugins escritos pela JQuery Library; portanto, antes de usar o bootstrap.min.js, você deve primeiro carregar jQuery.min.js para entrar em vigor.
1. Uso do menu de retirada
<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>Basic usage of drop-down menu</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <!--css Estilo-> <yoy> corpo {margin: 50px; preenchimento: 50px;} </style> </ad Head> <body> <div> <button type = "button" id = "suspenso menu1" data-toggle = "suspensão"> menu suspenso </span> </button> <ul Role = "menu" "aria-liBelledbyMbysbynmy </span> </button> <ul Role =" menu "" ARIA-LILELLMMBYMBYMBYMBY (SPAN> </button> <ul> Role = "menuitem" tabindex = "-1" href = "#"> menu1 </a> </li> <li role = "Apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> menu2 </a> </li> <!-Defina o status do status de menu "role">- tabindex = "-1" href = "#"> menu3 </a> </li> <!-Defina o status do item do menu como desativado (.Disabled)-> <li role = "Apresentação"> <a Role = "Menatem" Tabindex = "-1" href = "#"> menu 4 </a> </li> <-! TABINDEX = "-1" href = "#"> menu 4 </a> </li> <li role = "Apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> menu 4 </a> </li> <li role = "Apresentação"> <a Role = "Menuitem" TABINDEX = 1 " Role = "Apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> menu 6 </a> </li> </ul> </div> <!-Coloque-o no final do documento para fazer a página carregar mais rápido-> <!-se você quiser usar o js plugin do bootsTrap, você deve chamar Jquer. 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.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>Nota: Às vezes, é necessário saltar para cima, então você só precisa adicionar o nome da classe "Dropup" ao nome da classe "suspenso".
As renderizações são as seguintes:
2. Alinhamento do menu puxador
O menu suspenso no bootstrap é alinhado à esquerda por padrão. Se você deseja que o menu suspenso seja alinhado à direita em relação ao contêiner pai, você pode adicionar um nome de classe "puxar-right" ou "suspenso-menu-direto" ao "menu suspenso", como mostrado abaixo:
Parte omitida, como código em 1-> ... <div> <button type = "button" id = "suspensomenu1" data-toggle = "suspenso"> menu suspenso </span> </span> </button> <ul role = "Menu" "hemeniUt" HERLONENENENET "HETROUT" HERLONET ". Item do menu </a> </li> <li role = "Apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> item de menu suspenso </a> </li> </ul> </div> ...
As renderizações são as seguintes:
3. Grupo de botão
O grupo de botões também é um componente independente. Ele precisa confiar no plug -in Button.js para ser executado normalmente. E o bootstrap.js integrou a função de plug-in button.js.
Uso: use o contêiner "BTN-Grupo" e coloque vários botões nesse contêiner. Como mostrado abaixo:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> grupo de botões </ititle> <link rel = "Stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/cssssssstap.Bootstrap.MinMinMinMinMin.inMinMin.inMinMinMin.Imssp.nicsstrap.nicsstrap.nicsstrap.nicsstrap.nicsstrap.nicsstrap.nicsstrap.nicsstrap.nicsstrap.nicsstrap.nicsstrap.nicsstrap.-STIL) corpo {margem: 30px; preenchimento: 30px; } </style></head><body><div> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type = "Button"> <pan> </span> </butut> </div> <!-Coloque-o no final do documento para fazer a página carregar mais rápido-> <!-se você deseja usar o plug-in JS do bootstrap, você deve primeiro chamar jQuery-> <script src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-incluindo todos os plugins js de bootstrap ou js que podem ser chamados conforme necessário-> <script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>As renderizações são as seguintes:
4. Botões - agrupamento aninhado
Muitas vezes, geralmente organizamos o menu suspenso e os grupos de botões comuns para obter um efeito semelhante ao menu de navegação. Ao usar o agrupamento aninhado dos botões de bootstrap, você só precisa substituir o contêiner "suspenso" que fez o menu suspenso com "BTN-Group" e colocá-lo no mesmo nível que os botões comuns. Como mostrado abaixo:
<!-peças omitidas, como código em 3-> ... <div> <botão, tipo = "Button"> home </butão> <div> <button data-toggle = "suspenso" type = "button"> desenvolvimento móvel </span> </button> <ul> <li> <a href = "###" Android </a> </li> <li> </ul> </div> <button type = "button"> Java Web Development </button> <button type = "button"> PHP Development </button> <button type = "button"> big data </button> </div> ...
As renderizações são as seguintes:
No uso real, o efeito de exibição vertical sempre será encontrado. Esse estilo também é fornecido no bootstrap. Precisamos alterar apenas o nome da classe "BTN-Grupo" do agrupamento horizontal para "vertical do grupo BTN" para realizar o agrupamento vertical do botão.
5. Botão equivalente ao botão
O botão Método de Implementação de Equalização (botão de agrupamento adaptativo) também é muito simples. Você só precisa adicionar um nome de classe "BTN-Group-Justified" ao grupo de botões "BTN-GROUP", como mostrado abaixo:
<div> <a href = "#"> um terço </a> <a href = "#"> um terço </a> <a href = "#"> um terço </a> <a href = "#"> um terço </a> </div>
As renderizações são as seguintes:
6. Navegação - uso básico
As barras de navegação são fabricadas principalmente em bootstrap através do estilo ".nav". .nav "Deve ser anexado com outro estilo para ser eficaz, como" Nav-Tabs "," Nav-Pills ", etc.
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> uso de navegação-bacharel Estilo-> <Toy> Body {margin: 30px; preenchimento: 30px;} </style> </ad Head> <body> <ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> news </a> </li> <li> <a> Navegação-> <li> <a href = "##"> fórum </a> </li> <!-status desativado-> <li> <a href = "##"> feedback </a> </li> </ul> <!-Coloque o js no final do documento para fazer o carregamento da página-> <!-se você quiser usar o js plugin src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-incluindo todos os plugins JS para bootstrap ou plugins JS que podem ser chamados conforme necessário-> <script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>As renderizações são as seguintes:
7. Navegação de navegação (pílulas) Navegação
Navegação da cápsula (pílulas), o item atual é destacado e tem um efeito de canto arredondado. Basta substituir o nome da classe "NAV-TABS" por "pilhas de navegação":
<ul> <!-status atual-> <li> <a href = "##"> home </a> </li> <!-status suspenso-> <li> <a href = "##"> news </a> </li> <li> <a href = "#" data-toggle = "DropDown"> </span> </spanil href = "##"> blog da front-end </a> </li> <li> <a href = "##"> blog java </a> </li> </li> </li> <li> <a href = "##"> fórum </a> </!
As renderizações são as seguintes:
8. Navegação - navegação vertical empilhada
Para criar navegação na pilha vertical, você só precisa adicionar um nome de classe "empilhado para navegação" com base em "pilhas de navegação":
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> notícias </a> </li> <li> <a href = "##"> blog </a> </li> <li> <a href = "##"> </a> href = "##"> feedback </a> </li> </ul>
As renderizações são as seguintes:
9. Navegação - navegação adaptativa
Navegação adaptativa "Justificada NAV" (consulte o arquivo bootstrap.css, linha 3585 à linha 3607) precisa ser usada em conjunto com "Nav-Tabs" ou "Nav-pills". como:
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> notícias </a> </li> <li> <a href = "##"> blog </a> </li> <li> <a href = "##"> </a> href = "##"> feedback </a> </li> </ul>
As renderizações são as seguintes:
10. Navegação-breadcrumb
BreadCrumb também é um componente de módulo independente, geralmente usado para navegação, e sua principal função é dizer ao usuário o local atual da página (localização atual). O método de uso é muito simples, adicione a aula de pão para OL:
<ol> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> China </a> </li> <li> beijing </li> </ol>
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.