Bootstrap | Barra de navegación
La barra de navegación de un sitio web consta de varios menús vinculados a diferentes secciones del sitio web. Más específicamente, la barra de navegación es un encabezado de página generalmente ubicado en la parte superior del sitio web. Usando el marco Bootstrap, podemos crear una barra de navegación con gran facilidad. Bootstrap también ofrece varias clases con estilos predefinidos para ajustar la barra de navegación.
Este artículo lo guiará en la barra de navegación de Bootstrap ilustrando los temas a continuación:
- Cómo crear una barra de navegación de arranque simple?
- Cómo agregar un menú desplegable a la barra de navegación?
- Cómo agregar iconos a la barra de navegación?
- Cómo alinear los menús de navegación?
- Cómo crear una barra de navegación oscura?
- Cómo arreglar la posición de la barra de navegación?
- Cómo hacer una barra de navegación colapsando?
Cómo crear una barra de navegación de arranque simple?
Para crear una barra de navegación simple utilizando el marco Bootstrap, siga los pasos a continuación:
- Primero, agregue el ""Etiqueta con el".barra de navegación" y ".defensa de la navbar"Clases.
- Agrega un ""Etiqueta con la clase"fluido de contenedores"Para agregar contenido a la barra de navegación.
- Para incluir un logotipo, cree un "" y asigne una clase "pastor".
- Dentro de este elemento div, agregue un ""Etiqueta para hacer que el logotipo se pueda hacer clic y configure una clase"marina de navicar".
- Después de eso, cree una lista de menús utilizando el
- etiqueta con el "navegación" y "navegador de navicar"Clases.
- Dentro de
- etiqueta, incluye el
- Etiquetas para especificar los elementos. Coloque los nombres de la página usando la etiqueta para hacerlos hacer clic:
La descripción de las clases importantes de Bootstrap utilizadas en el fragmento de código anterior se da a continuación:
- "barra de navegación"La clase tiene estilos predefinidos para crear una barra de navegación estándar.
- "defensa de la navbar"Se usa para crear una barra de navegación predeterminada.
- "Navbar-Expand-LGLa clase se ajusta para proporcionar clases de esquemas de color y crear un colapso receptivo.
- "fluido de contenedores"Proporciona un contenedor de ancho completo.
- "pastor", Una clase de arquitectura, asignó el área en píxeles a la izquierda de la barra de navegación, lo que permite que el logotipo llene todo el espacio. También proporciona capacidad de respuesta a la clase de marca Navbar que tiene un logotipo y evita superponerse al menú con el logotipo.
- "marina de navicar"Coloca la imagen o texto del logotipo en la parte superior de la barra de navegación.
Producción
Cómo agregar un menú desplegable a la barra de navegación?
Puede agregar un menú desplegable a la barra de navegación utilizando el "desplegable" clase.
Siga los pasos para ver cómo ajustar un menú desplegable en la barra de navegación:
- Agregar
- Elemento a la lista donde desea agregar un menú desplegable y asignarlo una clase "desplegable".
- Para hacer clic en el menú, asignar el nombre del menú dentro de la etiqueta. Asignarlo una clase "toggle desplegable"Y atributos"toggle de datos" y "href"Para agregar un enlace a él. Luego, para agregar un símbolo de careto, mencione un "signo de intercalación" clase.
- Para enumerar los elementos del menú, especifique el
- etiqueta con el "Menú desplegable" clase.
- Dentro de este
- elemento, mencione los elementos de la lista utilizando el
- elementos. Cada uno de ellos contiene la etiqueta para establecer enlaces:
Menú desplegable
class = "Caret">En el código anterior:
- "desplegable"La clase indica el menú desplegable.
- "toggle desplegable"Ayuda a crear un descenso interactivo al hacer clic en el menú alternar.
- "signo de intercalación"Crea el ícono de la flecha.
- "toggle de datosEl atributo se utiliza para mostrar una sección de ocultación al hacer clic.
Producción
Cómo agregar iconos a la barra de navegación?
Hay varios iconos de glifo en bootstrap que se pueden usar sin costo. Más específicamente, necesitamos un elemento en línea, como ","Para incrustar íconos en la barra de navegación.
Para hacerlo, establezca el atributo de clase del elemento como "glificón", Agregue un espacio y luego mencione el"nombre de glificón"Como el nombre de la clase:
Producción
Cómo alinear los menús de navegación?
Bootstrap ofrece varias clases para establecer la alineación de los menús de navegación. Por ejemplo, el ".navegan"La clase ajusta la alineación del menú a la derecha.
Ejemplo
Consulte el ejemplo a continuación que muestra cómo ajustar los dos elementos de la lista para estar alineados correctamente:
Producción
Cómo crear una barra de navegación oscura?
El "navegaciónLa clase se utiliza para convertir el color de la barra de navegación a la oscuridad de la siguiente manera:
Producción
Cómo arreglar la posición de la barra de navegación?
Se pueden asignar muchas utilidades de posición de arranque para establecer la posición de la barra de navegación. Por ejemplo, el ".navegación"Correce la barra de navegación en la parte superior de la página:
Producción
Cómo hacer una barra de navegación colapsando?
Como sabemos, el objetivo principal del marco de bootstrap es la capacidad de respuesta. Entonces, para configurar la barra de navegación en tamaños de pantalla pequeños, agregemos un botón para expandir la barra de navegación al hacer clic.
Para diseñar un botón de hamburguesa, agregue tres iconos de barra en el elemento. El "barra de icono"La clase muestra el icono de la barra. Luego, configure el atributo "toggle de datos" con el "colapsar" valor. El "objetivo"Atributo se asigna el"#mynavbar"Señalando la identificación del Div:
Aquí:
- "marina"Extiende los elementos.
- "toggle de datos"Con el valor"colapsar"Determina el elemento plegable oculto o visible al hacer clic.
- "objetivo"El atributo selecciona el selector CSS al que se aplica la operación de colapso. El "#mynavbar"¿Es la identificación del elemento Div.
Luego, envuelva los elementos del menú de navegación en un elemento Div que tiene ID "mynavbar":
En el fragmento de código anterior:
- "colapsar"Indica el contenido que muestra o se esconde.
- "cañón naval"Significa los elementos del menú de navegación en la vista móvil.
La salida dada a continuación significa que la barra de navegación está colapsada en un botón:
En pantallas pequeñas, como en Mobile, la barra de navegación se muestra y se ve cuando se hace clic en el botón:
Eso es todo! Has aprendido sobre la creación de la barra de navegación de bootstrap usando diferentes clases.
Conclusión
Para crear una barra de navegación de bootstrap, primero, utilice el HTML
- y
- Etiquetas para hacer una lista de menús junto con las clases de bootstrap. Además, se utilizan varias clases de arranque para crear una barra de navegación receptiva para nuestro sitio web, como ".barra de navegación",".navbar-expand-xl | lg | md | sm",".marca de mar", y muchos más. Este artículo ha explicado cómo crear una barra de navegación de bootstrap que tenga diferentes características.