Menús de Nav en Bootstrap 5
Entonces, este artículo le brinda un conocimiento detallado sobre
- Cómo crear un NAV básico?
- ¿Cuáles son los diferentes estilos de menú de bootstrap??
Entonces, hoy vamos a discutir diferentes menús de NAV (menús de navegación) que un usuario puede usar de acuerdo con su requisito para hacer un diseño receptivo.
Cómo crear un NAV básico?
El NAV básico a continuación se crea usando .navegación clase con
- etiqueta y .ítem de navegación marchitar
- etiqueta:
Pero en Bootstrap 5 podemos usar NAV como etiqueta HTML
También podemos cambiar la alineación horizontal o vertical del contenido de NAV según los requisitos de diseño.
Alineación horizontal
- Comenzar
- Centro
- Fin
Comenzar
Para alinear el contenido de NAV horizontalmente al principio, use la clase "Justify-Content-start":
Centro
Para alinear el contenido de NAV horizontalmente en el centro, use la clase "Justify-Content-Center":
Fin
Para alinear el contenido de NAV horizontalmente al final, use la clase "Justify-Content-End":
Alineamiento vertical
Para alinear el contenido de NAV verticalmente, use la clase "Flex-Column":Así es como se alinea un menú de navegación verticalmente.
Estilos de menús de bootstrap
Los menús de bootstrap se clasifican en dos categorías de estilo:
- Pestañas
- Píldoras
Pestañas
Para convertir el menú de Nav en pestañas, solo agregue el .NAV NAV-Tabs clase a tu
Pestañas usando
Así es como se usa las pestañas
Pestañas usando
- etiqueta
Así es como se usa las pestañas
Píldoras
Para convertir el menú de navegación en píldoras, solo agregue el .píldoras de navegación clase a tu
Píldoras usando
Así es como se usan las píldoras
Píldoras usando
- etiqueta
Así es como se usan las píldoras
- Se crean la etiqueta.
Pestañas con menú desplegable usando
Para crear pestañas con menú desplegable usando etiqueta, usa .desplegable clase con .ítem de navegación clase y envuélvelo alrededor de una etiqueta de anclaje que contiene .enlace de navegación, .toggle desplegable clases junto con data-bs-toggle = "desplegable" atributo. Luego envuelve esta etiqueta de anclaje
Así es como las pestañas con el menú desplegable usando
Pestañas con menú desplegable usando
- etiqueta
Para crear pestañas con menú desplegable usando
Así es como las pestañas con menús desplegables usando
- Se crean la etiqueta.
Píldoras con menú desplegable usando
Para crear píldoras con menú desplegable usando etiqueta, usa .desplegable clase con .ítem de navegación clase y envuélvelo alrededor de una etiqueta de anclaje que contiene .enlace de navegación, .toggle desplegable clases junto con data-bs-toggle = "desplegable" atributo. Luego envuelve esta etiqueta de anclaje
Así es como las píldoras con un menú desplegable usando
Píldoras con menú desplegable usando
- etiqueta
Para crear píldoras con menú desplegable usando etiqueta, usa .desplegable clase con .ítem de navegación clase y envuélvelo alrededor de una etiqueta de anclaje que contiene .enlace de navegación, .toggle desplegable clases junto con data-bs-toggle = "desplegable" atributo. Luego envuelve esta etiqueta de anclaje
Así es como las píldoras con un menú desplegable usando
- Se crean la etiqueta.
Píldoras verticales
Para crear píldoras verticales, solo agregue una clase .columna flexible con .píldoras de navegación clase.
Menú de pestañas y pastillas llenar y justificar las pestañas
.llenado de navegación La clase se usa para llenar espacios de manera injustificada mientras .navegante La clase se usa para llenar espacios de manera justificada.
Pestañas con .llenado de navegación
Para llenar los espacios descubiertos de un contenedor, simplemente agregue .llenado de navegación clase con .NAV NAV-Tabs. Pero el .llenado de navegación La clase solo llenó los espacios pero no los justificó.
Así es como las pestañas con .llenado de navegación son creados.
Pestañas con .navegante
.navegante La clase no solo llena los espacios ideales, sino que también lo distribuye por igual entre todos los artículos de NAV.
Así es como las pestañas con .navegante son creados.
Píldoras con .llenado de navegación
Para llenar los espacios descubiertos de un contenedor, solo agregue un .llenado de navegación clase con .píldoras de navegación. Pero el .llenado de navegación La clase solo llenó los espacios pero no los justificó.
Así es como las píldoras con .llenado de navegación son creados.
Píldoras con .navegante
.navegante La clase no solo llena los espacios ideales, sino que también lo distribuye por igual entre todos los artículos de NAV.
Así es como las píldoras con .navegante son creados.
Conclusión
Los menús de Nav se crean usando
- y