Este artículo presentará principalmente el menú y la navegación de Bootstrap.
Comenzando con este artículo, presentaremos archivos relacionados con JavaScript, de la siguiente manera:
<!-colóquelo al final de la etiqueta del cuerpo para que la página se cargue más rápido->
<!-Si desea usar el complemento JS de Bootstrap, primero debe llamar a jQuery->
<script src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script>
<!-Incluye todos los complementos de Bootstrap JS o complementos JS que se pueden usar según sea necesario->
<script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
En Bootstrap, el componente del menú desplegable es un componente independiente. El efecto de interacción del componente de Bootstrap se basa en complementos escritos por la biblioteca jQuery, por lo que antes de usar bootstrap.min.js, primero debe cargar jQuery.min.js para entrar en vigencia.
1. Uso de menú-duende masico
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> Uso básico del menú desplegable </title> <link rel = "Stylesheet" href = "http://netdna.bootstrapcdn.com/bootstap/3.1.1/csss/bootstrap.min.css" Estilo-> <style> Body {margin: 50px; relleno: 50px;} </ystye> </head> <body> <div> <button type = "button" id = "desplegable" "data-toggle =" desplegable "> menú de desplegable <span> </span> </botte> <ul role =" menú "Aria marcado a =" desplegable rol = "menuitem" tabindex = "-1" href = "#"> menú1 </a> </li> <li role = "presentación"> <a role = "menuitem" tabindex = "-1" href = "#"> menú2 </a> </li> <!-Establezca el estado del elemento de menú en el estado actual (.Active)--<li role = "presente"> <a rol de roliemem " tabindex = "-1" href = "#"> menú3 </a> </li> <!-Establezca el estado del elemento del menú en discapacitado (.disable)-> <li role = "presentación"> <a role = "menuitem" tabindex = "-1" href = "#"> menú 4 </a> </li> < tabindex = "-1" href = "#"> menú 4 </a> </li> <li role = "presentación"> <a role = "menuitem" tabindex = "-1" href = "#"> menú 4 </a> </li> <li role = "presentación"> <a role = "menuitem" tabindex = "-1" href = "#" </aa> role = "Presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> menú 6 </a> </li> </ul> </div> <!-colóquelo al final del documento para que la página se cargue más rápido-> <!-Si desea usar el complemento JS de Bootstrap, primero debe llamar a Jququery-> <Script. src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-incluyendo todos los complementos JS para complementos de arranque o js que se pueden usar según sea necesario-> <script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>Nota: A veces es necesario rebotar hacia arriba, por lo que solo necesita agregar el nombre de la clase "Dostep" al nombre de la clase "desplegable".
Las representaciones son las siguientes:
2. Alineación de menú desplegable
El menú desplegable en Bootstrap está alineado a la izquierda de forma predeterminada. Si desea que el menú desplegable se alinee a la derecha en relación con el contenedor principal, puede agregar un nombre de clase "Pull-Right" o "Dropdown-Menu-Right-Right" a "Dropdown-Menu", como se muestra a continuación:
< Elemento de menú </a> </li> <li role = "presentación"> <a role = "menuitem" tabindex = "-1" href = "#"> Elemento de menú desplegable </a> </li> </ul> </div> ... ...
Las representaciones son las siguientes:
3. Grupo de botón de botón
El grupo de botones también es un componente independiente. Debe confiar en el complemento Button.js para ejecutarse normalmente. Y Bootstrap.js ha integrado la función de complemento Button.js.
Uso: use el contenedor "BTN-Group" y coloque múltiples botones en este contenedor. Como se muestra a continuación:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> grupo de botones </title> <link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">! cuerpo {margen: 30px; relleno: 30px; } </style> </head> <body> <viv> <button type = "button"> <span> </span> </botte> <button type = "button"> <span> </span> </botte> <button type = "botón"> <span> </span> </button> <button type = "botón de botón"> </botón> </botón> <button> <poth type = "<pan> </span> </span> </span type = "Button"> <span> </span> </boton> <Button type = "Button"> <span> </span> </Button <Button type = "Button"> <span> </span> </Button> <Button type = "Button"> <span> </span> </Button> <button type = "Button">> </span> </botón> <button tyte type = "Button"> <span> </span> </boton> <Button type = "Button"> <span> </span> </Button <Button type = "Button"> <span> </span> </Button> <Button type = "Button"> <span> </span> </Button> <button type = "Button">> </span> </botón> <button tyte type = "Button"> <span> </span> </boton> </div> <!-colóquelo al final del documento para que la página se cargue más rápido-> <!-Si desea usar el complemento js de bootstrap, primero debe llamar a jQuery-> <script src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.mins" "/<! Incluyendo todos los complementos de Bootstrap JS o complementos JS que se pueden llamar según sea necesario -> <script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>Las representaciones son las siguientes:
4. Botones - Agrupación anidada
Muchas veces, a menudo organizamos el menú desplegable y los grupos de botones comunes para lograr un efecto similar al menú de navegación. Al usar la agrupación anidada de botones de arranque, solo necesita reemplazar el "desplegable" del contenedor que hizo el menú desplegable con "BTN-Group" y colocarlo en el mismo nivel que los botones ordinarios. Como se muestra a continuación:
< </div> <botón type = "botón"> Desarrollo web de Java </botón> <botón type = "botón"> Php Development </boton> <button type = "botón"> big data </boton> </div> ... ...
Las representaciones son las siguientes:
En uso real, el efecto de visualización vertical siempre se encontrará. Este estilo también se proporciona en Bootstrap. Solo necesitamos cambiar el nombre de clase "BTN-Group" de la agrupación horizontal a "BTN-Group-vertical" para realizar la agrupación vertical del botón.
5. Botón equivalente de botón
El método de implementación del botón de ecualización (botón de agrupación adaptativa) también es muy simple. Solo necesita agregar un nombre de clase "BTN-Group-Justified" al grupo de botones "BTN-Group" como se muestra a continuación:
<div> <a href = "#"> un tercio </a> <a href = "#"> un tercio </a> <a href = "#"> un tercio </a> <a href = "#"> un tercio </a> </div>
Las representaciones son las siguientes:
6. Navegación - Uso básico
Las barras de navegación se realizan principalmente en Bootstrap a través del estilo ".nav". .Nav "debe adjuntarse con otro estilo para ser efectivo, como" Tabs de navegación "," Pills de Nav ", etc.
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> uso de navegación-basic </title> <link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstap/3.1.1/css/bootstrap.min.css". Estilo-> <style> Body {margin: 30px; padding: 30px;} </style> </head> <body> <ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> News </a> </li> <li> <a href = "##"> Blog </a> </li-li-shape navegación-> <li> <a href = "##"> foro </a> </li> <!-estado de discapacitados-> <li> <a href = "##"> retroalimentación </a> </li> </ul> <!-lugar al final del documento para hacer que la página se cargue más rápido-> <!-Si desea usar el plugin js de bootstrap, primero debe llamar a la mierda de la página. src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-incluyendo todos los complementos JS para complementos de arranque o js que se pueden llamar según sea necesario-> <script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>Las representaciones son las siguientes:
7. Navegación de cápsula de navegación (píldoras)
Navegación de cápsula (píldoras), el elemento actual se resalta y tiene un efecto de esquina redondeado. Simplemente reemplace el nombre de clase "NAV-Tabs" con "Pills Nav":
<ul> <!-Estado actual-> <li> <a href = "##"> Inicio </a> </li> <!-Estado suspendido-> <li> <a href = "##"> News </a> </li> <li> <a href = "##" Data-toggle = "Blog"> blog </span> </a> <ul> <! href = "##"> Blog front-end </a> </li> <li> <a href = "##"> blog java </a> </li> </li> </li> <li> <a href = "##"> foro </a> </li> <!-estado de discapacidad-> <li> <a href = "##"> retroalimentados </a> </li> </li>
Las representaciones son las siguientes:
8. Navegación - Navegación vertical apilada
Para crear navegación de pila vertical, solo necesita agregar un nombre de clase "NAV" basado en "Pills Nav":
<ul> <li> <a href = "##"> Inicio </a> </li> <li> <a href = "##"> News </a> </li> <li> <a href = "##"> Blog </a> </li> <li> <a href = "##"> foro </a> </li> <!-DiABLED-> <AH A <A A a. href = "##"> Comentarios </a> </li> </ul>
Las representaciones son las siguientes:
9. Navegación - Navegación adaptativa
Navegación adaptativa "NAV-Justified" (consulte el archivo bootstrap.css, la línea 3585 a la línea 3607) debe usarse junto con "navegación navegación" o "píldoras navegantes". como:
<ul> <li> <a href = "##"> Inicio </a> </li> <li> <a href = "##"> News </a> </li> <li> <a href = "##"> Blog </a> </li> <li> <a href = "##"> foro </a> </li> <!-DiABLED-> <AH A <A A a. href = "##"> Comentarios </a> </li> </ul>
Las representaciones son las siguientes:
10. Navegación-Breadcrumb
Breadcrumb también es un componente de módulo independiente, generalmente utilizado para la navegación, y su función principal es decirle al usuario la ubicación actual de la página (ubicación actual). El método de uso es muy simple, agregue la clase Breadcrumb a OL:
<Ol> <li> <a href = "#"> Home </a> </li> <li> <a href = "#"> China </a> </li> <li> Beijing </li> </ol>
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.