Menú desplegable
Declaración especial: Debido a que el efecto de interacción del componente de Bootstrap se basa en complementos escritos por la biblioteca jQuery, primero debe cargar jQuery.min.js antes de usar bootstrap.min.js para producir efectos.
<Div> <Botton type = "Button" id = "DropdownMenu1" Data-Toggle = "Dropdown"> menú desplegable <span> </span> </boton> <ul roly = "menú" aria-labelledBy = "desplegable rol = "Presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> Elemento de menú desplegable </a> </li> <li role = "presentación"> <a role = "menuitem" tabindex = "-1" href = "#"> elementos de menú de menú </a> </li> <li = "presente"> <a rol = "Menuitem" TabindEx " href="#">Drop down menu items</a></li></ul></div> <!--jquery must be imported before bootstrap, the latter is implemented on the basis of the former --><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src = "// maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
Imagen de reproducción:
Principio de implementación:
Al principio, había una pantalla: ninguna en la clase; Echa un vistazo a CSS a continuación
.Dropdown-Menu {posición: absoluto;/*Establecer posicionamiento absoluto, en relación con el elemento principal div.dropdown*/top: 100%;/*Deje que el elemento del menú desplegable en la parte inferior del elemento del menú principal. Si el elemento principal no establece el posicionamiento relativo, el elemento es relativo al elemento del cuerpo*/izquierda: 0; z-index: 1000;/*Establezca el elemento del menú desplegable no está cubierto por otros elementos*/Display: Ninguno;/*Ocultar el elemento del menú desplegable*/Float: Left; Min-width: 160px; none;background-color: #fff;background-clip: padding-box;border: 1px solid #ccc;border: 1px solid rgba(0, 0, 0, .15);border-radius: 4px;-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);box-shadow: 0 6px 12px rgba(0, 0, 0, .175);}Luego use el evento de clic para controlar la eliminación y la adición de la clase de etiqueta para lograr la pantalla y ocultar
A través de la tecnología JS, agregue o elimine el nombre de la clase "abierto" al contenedor principal "Div.dropdown" para controlar la pantalla o ocultación del menú desplegable. Es decir, por defecto,
"Div.dropdown" no tiene el nombre de clase "abierto". Cuando el usuario hace clic por primera vez, el nombre de clase "Abrir" se agregará al nombre de clase "Open"; Cuando el usuario hace clic nuevamente, el nombre de clase "Abrir" en el contenedor "Div.dropdown" se eliminará nuevamente. Podemos ver todo el proceso a través del Firebug del navegador:
Por defecto:
El usuario hace clic por primera vez:
El usuario hace clic nuevamente:
CSS abierto
.open> .dropdown-Menu {display: block;}Línea dividida del menú desplegable
¡Echemos un vistazo al ejemplo anterior y luego pegue el código! Mire el efecto, ¡aún necesita presentar el archivo JS! ¡No hay muchas cosas después!
<Div> <Botton type = "Button" id = "DropdownMenu1" Data-Toggle = "Dropdown"> menú desplegable <span> </span> </boton> <ul roly = "menú" aria-labelledBy = "desplegable role = "Presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> Elemento de menú desplegable </a> </li> <li role = "presentación"> <a role = "menuitem" tabindex = "-1" href = "#"> elemento de menú desplegable </a> </li> <li role = "menuitem" tabindex = "-1" href = "#"> Elemento de menú desplegable </a> </li> </ul> </div>
Imagen de reproducción:
En realidad, hay una línea de código más
<li role = "presentación"> </li>
Título del menú desplegable del menú
Cargue directamente el código
<Div> <Botton type = "Button" id = "DropDownMenu1" Data-Toggle = "Dropdown"> menú desplegable <span> </span> </boton> <ul role = "menú" Aria-LabelledBy = "Downmenu1"> <li rol = "Presentation"> Part 1 Header </li> <li role = "Presentation"> <a roli href="#">Dropdown Menu Item</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Dropdown Menu Item</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Drop down menu item</a></li><li role = "Presentation"> </li> <li role = "Presentation"> Parte 2 Encabezado del menú </li> <li role = "presentación"> <a role = "menuitem" tabindex = "-1" href = "#"> Elemento de menú desplegable </a> </li> <li rol = "Presentación"> <a rol = "menuitem" tabindex = "-1" hreff = ""#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#" Menu "Menu" Elemento </a> </li> <li role = "presentación"> <a role = "menuitem" tabindex = "-1" href = "#"> Elemento de menú desplegable </a> </li> </ul> </div>
Imagen de reproducción:
De hecho, solo se agregó un código:
<li role = "presentación"> encabezado del menú Parte 2 </li>
Alineación del menú desplegable
<H4> Use la clase Pull-Right para alinear el menú desplegable con el lado derecho del contenedor principal </h4> <div style = "float: left;"> <button type = "button" id = "desplegable" "Data-toggle =" desplegable ">
Menú desplegable
<span> </span> </boton> <ul role = "menú" aria-labelledby = "desplegablemenu1"> <li role = "presentación"> <a role = "menuitem" tabindex = "-1" href = "#"> Elemento de menú desplegable </a> </li> <li rol = "presentación"> <a rol = "Menuitem" TABINDEX = "-1 1" HREF "HREF" HREF "#"#"" "" "" "" "" "" "" " Elemento </a> </li> <li role = "Presentation"> <a role = "Menuitem" tabindex = "-1" href = "#"> Elemento de menú desplegable </a> </li> <li role = "presentación"> <a rol = "menuitem" tabindex = "-1" href = "#"> elemento de menú desplegable </a> </li> <li rol = "Presentation"> <a role = "Menuitem" tabindex = "-1" href = "#"> Elementos del menú desplegable </a> </li> </ul> </div> <br/> <br/> <h4> use la clase desplegable-menu-right para alinear el menú desplegable con el lado derecho del contenedor parental </h4> <Div style = "Float: Float:" Button " id = "Dropdownmenu1" Data-Toggle = "Discutivo">
Menú desplegable
<span> </span> </boton> <ul role = "menú" aria-labelledby = "desplegablemenu1"> <li role = "presentación"> <a role = "menuitem" tabindex = "-1" href = "#"> Elemento de menú desplegable </a> </li> <li rol = "presentación"> <a rol = "Menuitem" TABINDEX = "-1 1" HREF "HREF" HREF "#"#"" "" "" "" "" "" "" " Elemento </a> </li> <li role = "Presentation"> <a role = "Menuitem" tabindex = "-1" href = "#"> Elemento de menú desplegable </a> </li> <li role = "presentación"> <a rol = "menuitem" tabindex = "-1" href = "#"> elemento de menú desplegable </a> </li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Drop down menu items</a></li></ul></div><br /><br /><h4>The drop down menu is aligned with the left side of the parent container</h4><div style="float: left;"><button type="button" id="dropdownMenu1" data-toggle = "desplegable">
Menú desplegable
<span> </span> </boton> <ul role = "menú" aria-labelledby = "desplegablemenu1"> <li role = "presentación"> <a role = "menuitem" tabindex = "-1" href = "#"> Elemento de menú desplegable </a> </li> <li rol = "presentación"> <a rol = "Menuitem" TABINDEX = "-1 1" HREF "HREF" HREF "#"#"" "" "" "" "" "" "" " Elemento </a> </li> <li role = "Presentation"> <a role = "Menuitem" tabindex = "-1" href = "#"> Elemento de menú desplegable </a> </li> <li role = "presentación"> <a rol = "menuitem" tabindex = "-1" href = "#"> elemento de menú desplegable </a> </li> <li role = "Presentation"> <A Role = "Menuitem" TabIndex = "-1" href = "#"> Elemento de menú desplegable </a> </li> </ul> </div>
En realidad, agregue un nombre de clase "Pull-Right" o "Dropdown-Menu-Right" en "Dropdown-Menu", donde el código de estilo de CSS
.dropdown-menu.pull-right {derecha: 0; izquierda: auto;}. Dropdown-Menu-Right {Right: 0; Left: Auto;}Menú desplegable (estado del elemento del menú)
El estado predeterminado del elemento del menú desplegable (sin configuración) tiene un estado suspendido (: hover) y un estado de enfoque (: enfoque)
Además de los dos estados anteriores, los elementos del menú desplegable también tienen el estado actual (.Active) y el estado deshabilitado (.disable).
<Div> <Botton type = "Button" id = "DropdownMenu1" Data-Toggle = "Dropdown"> menú desplegable <span> </span> </boton> <ul roly = "menú" aria-labelledBy = "desplegable role = "Presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> Elemento de menú desplegable </a> </li> <li role = "presentación"> <a role = "menuitem" tabindex = "-1" href = "#"> elemento de menú desplegable </a> </li> <li role = "menuitem" tabindex = "-1" href = "#"> Elemento de menú desplegable </a> </li> </ul> </div>
Pon el mouse y se mostrará un letrero prohibido en el desactivado. ¡La captura de pantalla no se puede insertar!
Botones (grupo de botones)
El uso de botones individuales en páginas web a veces no satisface nuestras necesidades comerciales. A menudo vemos múltiples botones combinados, como un conjunto de pequeños botones de iconos en un editor de texto rico.
<Div> <Botton type = "Button"> <span> </span> </Button> <Button type = "Button"> <span> </span> </Button> <Button type = "Button"> <span> </span> </botón> <botón type = "botón"> <span> </span> </botte> <botón type = "button"> <span> </botte> <botte> type="button"><span></span></button><button><button type="button"><span></span></button><button><button type="button"><span></span></button><button><button type="button"><span></span></button><button><button type="button"><span></span></button><button><button type = "botón"> <span> </span> </boton> <botón type = "botón"> <span> </span> </boton> </div>
Imagen de reproducción:
¡Aquí puede generar diferentes botones de iconos de acuerdo con diferentes iconos! Puede verlo en este sitio web: http://getbootstrap.com/components/#glyphicons
Botones (barra de herramientas de botón)
En un editor de texto rico, los grupos de botones de grupo, como copiar, cortar y pegar un grupo; Aline izquierdo, alineado medio, alineado derecho y alinee final un grupo, como se muestra en la figura a continuación:
Luego, la barra de herramientas del botón Bootstrap Frame también proporciona dicho método de fabricación. Solo necesita colocar el grupo de botones "BTN-Group" en grupos en un recipiente grande "BTN-Toolbar", como se muestra a continuación:
<Div> <div> <button type = "button"> <span> </span> </boton> <button type = "button"> <span> </span> </button> <button type = "button"> <span> </span> </boton> </div> <div> <button type = "button"> <span> </pan> </botón> </div> <div> <button type = "Button"> <span> </span> </boton> </div> <div> <button type = "botón"> <span> </span> </boton> </div> <div> <button type = "botón"> <span> </span> </botón> <botón> <botón> </botón> <botón> </botón> <botón </botón> </div> <div> <botón <botón <botón> type = "Button"> <span> </span> </boton> <boton> </boton> <botton> <button type = "Button"> <span> </span> </boton> <button type = "botón"> <pan> </span> </boton> </div> <div> <boton type = "botón"> <span> </pan> </botón> </div>
Imagen de reproducción:
El segundo conjunto de iconos en la figura se agrega con una clase:
BTN-GROUP-LG: grupo de botones grandes
BTN-Group-SM: grupo de botones pequeños
BTN-Group-XS: Grupo de botones ultra pequeños
Simplemente agregue el nombre de clase correspondiente al nombre de clase ".BTN-Group" para obtener grupos de botones de diferentes tamaños.
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 usarlo, solo necesita reemplazar el contenedor que hizo el "desplegable" que originalmente creó el menú desplegable con "BTN-Group" y colocarlo en el mismo nivel que el botón ordinario.
<Div> <button type = "Button"> Home </Button> <Button type = "Button"> Pantalipla de producto </botón> <botón tipo = "botón"> Análisis de casos </botón> <botón Tipo de botón = "botón"> contáctenos </botón> <div> <button data-toggle = "retraso" type = "botón"> Acerca de nosotros <pan> </span> </botón> <li> <li> <li> <a href = "##################span <span> </span> </boton> <li> <li> <li> <a aza Perfil </a> </li> <li> <a href = "##"> Cultura corporativa </a> </li> <li> <a href = "##"> Estructura organizacional </a> </li> <li> <a href = "##"> Servicio al cliente </a> </li> </ul> </div> </iv>
Imagen de reproducción:
Botones (agrupación vertical)
En el ejemplo visto anteriormente, el grupo de botones se muestra horizontalmente. Pero en uso real, el efecto de visualización vertical siempre se encontrará. Este estilo también se proporciona en el marco Bootstrap. Solo necesitamos cambiar el nombre de clase de "grupo BTN" de agrupación horizontal a "btn-group-vertical"
<Div> <button type = "Button"> Home </Button> <Button type = "Button"> Pantalipla de producto </botón> <botón tipo = "botón"> Análisis de casos </botón> <botón Tipo de botón = "botón"> contáctenos </botón> <div> <button data-toggle = "retraso" type = "botón"> Acerca de nosotros <pan> </span> </botón> <li> <li> <li> <a href = "##################span <span> </span> </boton> <li> <li> <li> <a aza Perfil </a> </li> <li> <a href = "##"> Cultura corporativa </a> </li> <li> <a href = "##"> Estructura organizacional </a> </li> <li> <a href = "##"> Servicio al cliente </a> </li> </ul> </div> </iv>
Imagen de reproducción:
Botón (botón igual)
El efecto del botón de segmento igual es particularmente práctico en las terminales móviles. Todo el ancho del grupo de botones es el 100% del contenedor, y cada botón en el grupo de botones divide todo el ancho del contenedor. Por ejemplo, si tiene cinco botones en un grupo de botones, entonces cada botón es de 20% de ancho, si hay cuatro botones, entonces cada botón es de 25% de ancho, y así sucesivamente.
El botón de igualación también a menudo se llama un botón de agrupación adaptativa. El método de implementación 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> <Viv> <a href = "#"> home </a> <a href = "#"> PRANUNCIONA DEL PRODUCTO </a> <a href = "#"> Análisis de casos </a> <a href = "#"> Contáctenos </a> </div> </div>
Cambiar el ancho de la pantalla
Declaración especial: al hacer un grupo de botones alícuotas, intente usar el elemento de etiqueta <a> para hacer botones, porque al usar el elemento de etiqueta <botte>, usando la pantalla: la tabla no es amigable para admitirlo en algunos navegadores.
El triángulo hacia arriba hacia arriba del botón
El triángulo descendente del botón, agregamos un elemento de etiqueta "" a la etiqueta y lo nombramos "Caret":
A veces, nuestro menú desplegable aparecerá (la siguiente sección lo presentará). En este momento, nuestra dirección del triángulo debe mostrarse hacia arriba. Método de implementación: debe agregar el nombre de clase "Drowup" a la clase ".BTN-Group" (este también es el nombre de clase que se puede usar para el menú desplegable Pop-Upward).
<div> <botón data data-toggle = "desplegable" type = "botón"> Menú desplegable del botón <Span> </span> </botón> <ul> <li> <a href = "##"> Elemento de menú desplegable del botón </a> </li> <li> <a href = "##"> Elemento de menú desplegable Artículo </a> </li> </ul> </div>
Imagen de reproducción:
Navegación (estilo básico)
La navegación no es ajena a una persona frontal. Se puede decir que la navegación es uno de los elementos importantes de un sitio web, que puede facilitar a los usuarios encontrar los diversos servicios funcionales proporcionados por el sitio web. El método de navegación también es muy diverso y diverso.
Las barras de navegación se realizan principalmente en el marco de Bootstrap a través del estilo ".nav". El estilo predeterminado ".nav" no proporciona el estilo de navegación predeterminado. Se debe adjuntar otro estilo para que sea efectivo, como "Tabs Nav", "Pills Nav", etc. Por ejemplo, hay un ejemplo de una barra de navegación de pestañas en el editor de códigos a la derecha. Su método de implementación es agregar dos estilos de clase a la etiqueta UL.NAV y las Tabs Nav.
<ul> <li> <a href = "##"> Inicio </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> </li> <li> <a. href = "##"> Responsive </a> </li> </ul>
Navegación (navegación en la pestaña en forma de etiqueta)
Navegación en forma de etiqueta, también conocida como navegación TAB. Especialmente cuando se muestran muchos contenidos en trozos, es muy adecuado usar esta pestaña para agruparlos.
La navegación en forma de etiqueta se implementa a través del estilo "NAV-Tabs". Al crear navegación en forma de etiqueta, debe agregar este tipo de nombre a la navegación original "NAV"
<ul> <li> <a href = "##"> Inicio </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> </li> <li> <a. href = "##"> Responsive </a> </li> </ul>
De hecho, el efecto del ejemplo anterior no es consistente con los efectos de pestaña que generalmente vemos. En general, la pestaña enseña una selección actual. De hecho, el marco Bootstrap también se proporciona en consecuencia. Supongamos que queremos que el elemento "Inicio" sea el elemento seleccionado actualmente, solo agregue el nombre de clase "class =" activo "" a su etiqueta.
<ul> <li> <a href = "##"> Inicio </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> </li> <li> <a. href = "##"> Responsive </a> </li> </ul>
Imagen de reproducción:
Además del elemento actual, algunas pestañas también tienen un estado deshabilitado. Para lograr este efecto, solo necesita agregar "class =" discapacitado "" al elemento de la etiqueta:
<ul> <li> <a href = "##"> Inicio </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> </li> <li> <a. href = "##"> Responsive </a> </li> </ul>
Imagen de reproducción:
Navegación (pastillas) navegación)
La navegación de la forma de la cápsula (píldoras) suena un poco incómoda porque se parece un poco a una forma de cápsula. Pero es más como la navegación masiva que generalmente vemos. El elemento actual se resalta con un efecto de esquina redondeado. El método de implementación es similar a "NAV-Tabs". Con la misma estructura, solo necesita reemplazar el nombre de clase "NAV-Tabs" con "Pills Nav":
<ul> <li> <a href = "##"> Inicio </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> </li> <li> <a. href = "##"> Responsive </a> </li> </ul>
Imagen de reproducción:
¡Lo mismo que se mencionó anteriormente!
Navegación (navegación apilada vertical)
En uso real, además de la navegación horizontal, también hay navegación vertical, al igual que los botones de disposición vertical introducidos anteriormente. Hacer la navegación de la pila vertical solo requiere agregar un nombre de clase de "NAV" basado en "Pills Nav"
<ul> <li> <a href = "##"> Inicio </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> </li> <li> <a. href = "##"> Responsive </a> </li> </ul>
Imagen de reproducción:
En la sección del menú desplegable, hay un divisor entre el grupo de menú desplegable y el grupo. De hecho, la navegación de pila vertical también tiene este efecto, solo necesita agregar "
" Justo:
<ul><li><a href="##">Home</a></li><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><li><a href = "##"> Responsive </a> </li> </ul>
Imagen de reproducción:
Navegación adaptativa (usado)
La navegación adaptativa se refiere a la navegación que ocupa todo el ancho del contenedor, y los elementos del menú pueden adaptarse al ancho como las celdas de una tabla. La navegación adaptativa es la misma que el grupo de botones adaptativos realizados con "btn-group justificado". Es solo que al hacer navegación adaptativa, otro nombre de clase "Nav-Justified". Por supuesto, debe usarse con "Tabas NAV" o "Pills". como:
<ul> <li> <a href = "##"> Inicio </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> </li> <li> <a. href = "##"> Responsive </a> </li> </ul>
Imagen de reproducción:
Esta es una pantalla diferente
Navegación más menú desplegable (navegación secundaria)
Los ejemplos anteriores son sobre el uso del marco Bootstrap para crear navegación en primer nivel, pero en muchos casos, el efecto de la navegación de segundo nivel es inseparable de la página web. Entonces es más fácil hacer navegación secundaria en el marco Bootstrap. Simplemente trate a Li como el contenedor principal, use el nombre de clase "desplegable" y anida otra lista UL en Li, y use el método introducido en el menú desplegable anterior:
<ul> <li> <a href = "##"> Inicio </a> </li> <li> <a href = "##" data-toggle = "desplegable"> tutorial <span> </span> </a> <ul> <li> <a href = "##"> CSS3 </a> </li> <li> href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> </li> <li> <a href = "##"> receptivo </a> </li> </li> <li> <a href = "##"> Acerca de nosotros </a> </li> </ul>
Imagen de reproducción:
A través de la herramienta de depuración del navegador, no es difícil encontrar eso haciendo clic en el elemento del menú con navegación secundaria, el nombre de la clase "abierto" se agregará automáticamente. ¡Hacer clic nuevamente eliminará el nombre de clase "Abrir" agregado y el principio de implementación del menú desplegable es el mismo!
Luego, al usar la línea divisoria en la navegación secundaria, solo necesita agregar una etiqueta vacía como "<li class =" nav-divider "> </li>".
Navegación de pan
Las migas de pan generalmente se usan para la navegación, y su función principal es decirle al usuario la ubicación actual de la página (ubicación actual)
<Ol> <li> <a href = "#"> Home </a> </li> <li> <a href = "#"> mi libro </a> </li> <li> "CSS3 ilustrado" </li> </ol>
Imagen de reproducción: