--- title: Navigation Bar localeTitle: Barra de navegación --- ## Barra de navegación El marco de Bootstrap le proporciona una función de barras de navegación de llamada. En resumen, una barra de navegación (también denominada barras de navegación) es un encabezado en la parte superior de la página para mostrar información de navegación. #### Cómo utilizar Para usar las Barras de navegación de Bootstrap, agregue un elemento `

` en la parte superior dentro del elemento `` de su página web. Hay varios estilos que puede agregar para personalizar la visualización de sus barras de navegación. #### Ejemplo de código Este es el código necesario para hacer una barra de navegación básica. ```html ``` #### Estilos de la barra de navegación Bootstrap proporciona un conjunto de clases en el marco de Bootstrap para diseñar tus barras de navegación. Estas clases son las siguientes: * `navbar navbar-default` Este es el estilo predeterminado para tus barras de navegación. * `navbar navbar-inverse` Esto es similar al estilo predeterminado, excepto que los colores están invertidos. #### Agregar menús desplegables a la barra de navegación Puede incluir un menú desplegable dentro de una barra de navegación. Esta característica requiere que incluyas el archivo javascript de Bootstrap para que funcione. ```html ``` #### Añadiendo botones a la barra de navegación Puedes añadir botones en la barra de navegación. Las clases existentes de Bootstrap Button funcionan, sin embargo, deberá incluir la clase `navbar-btn` al final de la lista de clases. ```html ``` #### Agregar formularios a la barra de navegación También puede agregar formularios a la barra de navegación. Esto podría ser usado para tareas como un campo de búsqueda, un campo de inicio de sesión rápido, etc. ```html ``` #### Alineando elementos a la derecha en la barra de navegación. En algunos casos, es posible que desee alinear elementos en una barra de navegación a la derecha (por ejemplo, un botón de inicio de sesión o registro). Para hacer esto necesitarás usar la `navbar-right` la `navbar-right` . ```html ``` #### Visualización de la barra de navegación independiente del desplazamiento En algunos casos, es posible que desee mantener la barra de navegación en la parte superior o inferior de la pantalla, independientemente del desplazamiento. Deberá agregar la `navbar-fixed-top` o `navbar-fixed-bottom` al elemento `

` . ```html ``` #### Colapsando la barra de navegación En una pantalla pequeña (como un teléfono o una tableta) la barra de navegación ocupará demasiado espacio. Afortunadamente existe la opción de collase la barra de navegación. Puedes lograr esto usando el siguiente ejemplo. ```html ``` #### Ejemplos de Navbar `navbar navbar-default` [Nombre del sitio](#navbar-default) * [Casa](#navbar-default) * [Página 1](#navbar-default) * [Página 2](#navbar-default) * [Página 3](#navbar-default) Botón * [Enlace de acción # 1](#navbar-default) * [Enlace de acción # 2](#navbar-default) `navbar navbar-inverse` [Nombre del sitio](#navbar-inverse) * [Casa](#navbar-inverse) * [Página 1](#navbar-inverse) * [Página 2](#navbar-inverse) * [Página 3](#navbar-inverse) Botón * [Enlace de acción # 1](#navbar-inverse) * [Enlace de acción # 2](#navbar-inverse) #### Más información: [Documentación de la barra de navegación de BootStrap](https://getbootstrap.com/docs/4.0/components/navbar/)