Esto es lo que necesita saber antes de comenzar con la barra de navegación:
Navbars requieren un envoltorio .navbarcon .navbar-expand{-sm|-md|-lg|-xl}para plegar y sensibles esquema de color clases.
Las barras de navegación y su contenido son fluidos por defecto. Utilice contenedores opcionales para limitar su ancho horizontal.
Utilice nuestras clases de utilidad de espaciado y flexibilidad para controlar el espaciado y la alineación dentro de las barras de navegación.
Las barras de navegación responden de forma predeterminada, pero puede modificarlas fácilmente para cambiar eso. El comportamiento receptivo depende de nuestro complemento Collapse JavaScript.
Las barras de navegación están ocultas de forma predeterminada al imprimir. Oblígalos a imprimir agregando .d-printal archivo .navbar. Consulte la clase de utilidad de visualización .
Garantice la accesibilidad mediante el uso de un navelemento o, si usa un elemento más genérico como a div, agregue a role="navigation"a cada barra de navegación para identificarla explícitamente como una región histórica para los usuarios de tecnologías de asistencia.
Contenido admitido
Las barras de navegación vienen con soporte incorporado para un puñado de subcomponentes. Elija entre lo siguiente según sea necesario:
.navbar-brand para el nombre de su empresa, producto o proyecto.
.navbar-nav para una navegación ligera y de altura completa (incluida la compatibilidad con menús desplegables).
.navbar-togglerpara usar con nuestro complemento de colapso y otros comportamientos de alternancia de navegación .
.form-inline para cualquier formulario, controles y acciones.
.navbar-text para agregar cadenas de texto centradas verticalmente.
.collapse.navbar-collapse para agrupar y ocultar el contenido de la barra de navegación por un punto de interrupción principal.
A continuación, se muestra un ejemplo de todos los subcomponentes incluidos en una barra de navegación sensible a la luz que se colapsa automáticamente en el lgpunto de interrupción (grande).