Las barras de navegación son meta componentes receptivos que actúan como encabezados de navegación en su aplicación o sitio web.
1. Barra de navegación predeterminada
La barra de navegación se puede plegar (y se puede encender y apagar) en el dispositivo móvil y se vuelve expandido horizontalmente a medida que aumenta el ancho de la ventana contra la vista
Personalizar los umbrales para modos de plegado y modos horizontales
Dependiendo de la longitud de lo que ponga en la barra de navegación, tal vez necesite ajustar el umbral para que la barra de navegación ingrese al modo pliegue y al modo horizontal. Puede lograr sus necesidades cambiando el valor de la variable @grid-float-breakpoint o agregando su propio código CSS de consulta de medios.
Primer paso:
La etiqueta de navegación de contenedor más externa y agregar una clase de estilo de barra navegación para indicar que pertenece a la barra de navegación
<Nav Role = "Navigation"> </am>
Efecto:
Paso 2 : Agregar encabezado
<Nav role = "Navigation"> <div> <button type = "Button" data-toggle = "colapse" data-target = "#bs-example-navbar-collapse-1"> <span> toggle navigation </span> <span> </span> </span> <span> <pan> </span> </span> </botin> </botin> </href = "#"#"#"#"#"#"
La etiqueta del botón está anidada con tres iconos de tramo. Luego, proporcione la clase de estilo Navbar-Toggle y el colapso de atributos (colapso), y el objetivo es el objetivo de datos al hacer clic.
Cuando la ventana se estrecha hasta cierto punto, aparece el efecto en la derecha.
Paso 3: menú desplegable anidado, formulario, menú desplegable.
Código:
<h1> barra de navegación </h1> <navs role = "navegación"> <div> <botón type = "botón" data-toggle = "colapse" data-target = "#bs-example-navbar-collapse-1"> <span> toggle navegati href = "#"> marca </a> </div> <div id = "bs-example-navbar-collapse-1"> <!-menú desplegable anidado-> <ul> <li> <a href = "#"> enlace </a> </li> <li> <a href = "#"> enlace </a> </li> <li> <li> <a href = "#"#"#" <li> <a href = "#" data-toggle = "desplegán" href = "#"> Acción </a> </li> <li> <a href = "#"> Acción </a> </li> <li> <a href = "#"> Action </a> </li> </li> </li> </ul> <!-Formas anidadas-> <formul type = "Button"> Enviar </botón> </form> <! -----> </div> </am>
Avance:
Mejorar la accesibilidad de las barras de navegación
Para mejorar la accesibilidad, asegúrese de agregar rol = "navegación" a cada barra de navegación.
2. Forma
Colocar la forma dentro de la forma de navbar ofrece una buena alineación vertical y un estado colapsado en una ventana escolar más estrecha. Use la opción de alineación para determinar dónde aparece en la barra de navegación.
Se comparte mucho código usando mixin, .navbar-form y .Form-Inline.
Código
<Form Action = "" Role = "Search"> <Viv> <input type = "text"/> </div> <button type = "botón"> enviar </botón> </orm>
Agregar etiqueta etiqueta al cuadro de entrada
Si no agrega etiquetas de etiqueta al cuadro de entrada, el lector de pantalla tendrá problemas. Para los formularios en la barra de navegación, puede ocultar la etiqueta de la etiqueta a través de la clase.
3. Botones
Código:
<botón type = "botón"> Iniciar sesión </botón>
Avance:
4. Texto
Al envolver el texto en .navbar-text, la etiqueta <p> generalmente se usa para el espacio y el color de línea correctos.
Fragmento de código:
<p> texto </p>
5. Enlaces de no navegación
Tal vez desee agregar enlaces estándar fuera de los componentes de navegación estándar, luego usar la clase .navbar-link puede darle al enlace el color predeterminado y el inverso correcto.
Fragmento de código:
Copie el código de la siguiente manera: <p> Este es el <a href = "#"> enlace </a> </p>
6. Alineación de componentes
Use la clase de herramientas .Navbar-Left o .Navbar-Right para alinear los enlaces de navegación, formularios, botones o texto. Ambas clases usan estilos flotantes CSS en direcciones específicas. Por ejemplo, para alinear los enlaces de navegación, debe colocarlos en una clase de herramienta separada <ul>.
Estas clases son versiones de mezcla de .Pull-Left y .Pull-Right, pero se limitan a consultas de medios, lo que hace que sea más fácil manejar los componentes de la barra de navegación en pantallas de varios tamaños.
7. Fijado en la parte superior
Agregar .navbar-fijo-top permite que la barra de navegación se solucione en la parte superior. El efecto no es suficiente.
Necesita configurar el relleno para las etiquetas del cuerpo
Esta barra de navegación fija oscurecerá otro contenido en la página a menos que establezca el relleno de arriba <body>. Use su propio valor o use el código que se proporciona a continuación. Consejo: La altura predeterminada de la barra de navegación es 50px.
cuerpo {Padding-top: 70px; }
Debe colocarse después del archivo central de Bootstrap CSS. (Problemas de cobertura)
8. Fijado en la parte inferior
Use. Navbar-Fixed-Bottom en su lugar.
Necesita configurar internos (relleno) para etiquetas corporales
Esta barra de navegación fija oscurecerá otro contenido en la página a menos que establezca el relleno en la parte inferior de <Body>. Use su propio valor o use el código que se proporciona a continuación. Consejo: La altura predeterminada de la barra de navegación es 50px.
Cuerpo {Bottom: 70px; }
Asegúrese de usarlo después de cargar el núcleo de Bootstrap CSS.
9. Quédate en la cima
Cree una barra de navegación con la página agregando .navbar-static-top. Desaparece a medida que la página se desplaza hacia abajo. A diferencia de la clase .navbar fijada-*, no necesita agregar relleno al cuerpo.
10. Barra de navegación de color inversa
La aparición de la barra de navegación se puede cambiar agregando la clase .navbar-inversa.
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior es una introducción detallada a cómo usar la barra de navegación de bootstrap. Espero que sea útil para el aprendizaje de todos.