Cómo mostrar la navegación guiada de hamburguesas en la computadora

El framework Bootstrap debe estar disponible y tener una plantilla básica. Si no está seguro, lea el artículo de la "Serie 1".

Método/Pasos

El Bootstrap aquí utiliza la nueva etiqueta de navegación de html5.

La etiqueta ltnav gt define parte del enlace de navegación.

Utilice estilos...estilos de barra de navegación para identificar una barra de navegación.

Entre ellos,. La barra de navegación incluye:. Título de la barra de navegación. Barra de navegación-alternar. marca de barra de navegación.

Pongamos un código de muestra con enlace y soporte para terminales móviles.

La barra de navegación de arranque tiene dos páginas opcionales (puedes escribir tu propia definición CSS). El primer valor predeterminado es . barra de navegación predeterminada, el efecto es: texto negro sobre fondo blanco, el segundo es. barra de navegación inversa, el efecto es: texto blanco sobre fondo negro. Simplemente elige el efecto que deseas. Una cosa a tener en cuenta aquí es que si desea estos dos otros efectos predeterminados, debe implementar el estilo usted mismo. Puedes mirar el código fuente CSS y ver cómo hacerlo. Implementé navbar-inverse y luego imité la implementación. Este es un enfoque estúpido. Otra forma es reescribir el estilo con menos, porque bootstrap puede ejecutar el estilo. También rara vez se construye y también hay una versión atrevida. A continuación se ofrece solo una breve introducción a los estilos definidos, que se mencionarán en futuras experiencias.

Lo anterior define una barra de navegación simple con enlaces, y luego creo que explicaré este código simple.

1. El comienzo del estilo de la barra de navegación. Algo a tener en cuenta aquí es que para mejorar la accesibilidad (y la compatibilidad del navegador), es necesario agregar el atributo role="navigation " a cada barra de navegación. Es conveniente que js en bootstrap maneje el estilo de visualización de la barra de navegación.

2. El título de la barra de navegación, es decir, el título de la barra de navegación que se muestra al frente. Esta es una etiqueta con un ícono en bootstrap, y también está en el lado móvil, que es más pequeña que el efecto que se muestra en 768 dispositivos.

3. Esta parte es la parte plegable del terminal móvil y también se utiliza para mostrar mejor la página en el terminal móvil.

Además de algunos enlaces, también se pueden añadir botones y formularios a la barra de navegación, como por ejemplo un cuadro de búsqueda.

Por ejemplo: botón, simplemente escriba el atributo de etiqueta del botón directamente. Algo a tener en cuenta. Asegúrese de agregar navbar-btn al estilo del botón, para que el efecto que vea sea más hermoso.

No sólo hay botones, sino también algunas listas desplegables. Aquí, la lista desplegable es la lista desplegable en bootstrap. Utilice el siguiente código para mostrar el estilo desplegable.

Aquí si queremos poner el botón, enlace o texto a la derecha ¿cómo debemos hacerlo? Podemos aprovechar. Barra de navegación: izquierda y. navbar-right en bootstarp permite que botones, menús desplegables y otros elementos ocupen la izquierda y la derecha. Cabe señalar que este estilo sólo se puede escribir en ul. Sólo mira el ejemplo y lo entenderás.