.
La barra de navegación ha sido un componente central desde la primera versión de Bootstrap, versión 2.3.2. Se pueden encontrar hojas de estilo adicionales y más rápidas para la barra de navegación en la última versión de Bootstrap, versión 4.6.
Tenga en cuenta que estas son las mismas hojas de estilo en Bootstrap 4.0, 4.2.1 y 4.3.1. Entonces, si ya instaló alguna de esas versiones anteriores, la siguiente información aún se aplicará.
Si no ha instalado ninguna versión de Bootstrap, puede seguir las instrucciones paso a paso en The Ultimate Guide to Bootstrap CSS y luego continuar con el resto de esta publicación.
Cómo crear una barra de navegación Bootstrap
Supongamos que no desea descargar y alojar Bootstrap 4 localmente, por lo que comenzó a compilar con el plantilla de inicio oficial para la última versión de Bootstrap CDN. Entonces tendrás un diseño básico de Bootstrap que se ve así:
Si esto parece básico, no se preocupe, es solo un punto de partida. Para crear una página web más compleja, puede comenzar a agregar código para los componentes esenciales de la interfaz, como una barra de navegación, a este documento HTML5. Veamos ese proceso a continuación.
Nota: Para las demostraciones a continuación, construiré mi página en el Editor de pluma de código. Puede hacer clic en cualquiera de los enlaces Fuente para ver el fragmento de código completo detrás del ejemplo.
Digamos que desea agregar una barra de navegación estándar con enlaces a su página de inicio, página de características y página de precios. También desea utilizar un estilo receptivo adecuado para que el contenido de su barra de navegación se colapse detrás de un botón de hamburguesa en el dispositivo móvil y luego crezca para ocupar la mayor cantidad de espacio horizontal posible para permanecer alineado en pantallas de mayor tamaño.
En ese caso, tomaría el siguiente ejemplo de Bootstrap y lo copiaría y pegaría en la sección
de su documento HTML5.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
Así es como se vería el resultado final en el escritorio y en pantallas más pequeñas:
Fuente de imagen
Este proceso será el mismo sin importar qué ejemplo de barra de navegación de Bootstrap elija agregar a su sitio web. Ahora pasemos a explorar los diferentes estilos disponibles.
Estilos de barra de navegación Bootstrap
A continuación, veremos las diferentes opciones de estilo para la barra de navegación de Bootstrap. De esa manera, puede elegir el estilo que mejor se adapte a la marca de su sitio.
Desplegable de la barra de navegación de Bootstrap
Digamos que desea incluir muchas páginas en su barra de navegación. En lugar de enumerarlos todos uno al lado del otro, puede enumerar los tres más importantes y luego incluir el resto en un menú desplegable. O tal vez desee incluir algunos elementos de acción que los visitantes podrían tomar, como contactarlo, suscribirse a su blog o suscribirse a su boletín informativo. Luego, podría incluir esos elementos y sus páginas web correspondientes en el menú desplegable.
Para hacerlo, simplemente anide el siguiente fragmento de código después de sus enlaces .nav.
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
En el siguiente ejemplo, reemplacé el texto del marcador de posición «Enlace desplegable», «Acción», «Otra acción» y «Algo más aquí». Así es como se ve el resultado final:
Fuente de imagen
Color de la barra de navegación Bootstrap
Para cambiar el esquema de color de su barra de navegación, solo tiene que cambiar la combinación de las clases de temas y las utilidades de color de fondo mencionadas en la primera línea de código.
En el primer ejemplo, ¿ves dónde dice navbar-light bg-light? La clase CSS .navbar-light requiere colores de fondo claros (mientras que .navbar-dark requiere colores de fondo oscuros). El .bg-light establece la barra de navegación en gris claro. Los otros colores de fondo admitidos se muestran a continuación.
Fuente de imagen
En el siguiente ejemplo, opté por el color azul etiquetado como «información». Así es como se ve el resultado final:
Fuente de imagen
Barra de navegación transparente de Bootstrap
Si prefiere que su barra de navegación sea del mismo color que su color de fondo, entonces no tiene que hacer coincidir los colores. En su lugar, puede hacer que su barra de navegación sea transparente usando la utilidad .bg-transparent. En el siguiente ejemplo, cambié el color de fondo de toda la página web usando el código de color hexadecimal #EAF0F6 e hice la barra de navegación transparente.
Fuente de imagen
Colapso de la barra de navegación Bootstrap
En los ejemplos anteriores, se usan las clases .navbar-toggler, .navbar-collapse y navbar-expand-lg para que el contenido de la barra de navegación se contraiga detrás de un botón en el punto de interrupción grande (960 px). Puede combinar las clases .navbar-toggler y .navbar-collapse con .navbar-expand{-sm|-md|-lg|-xl} para cambiar cuando el contenido se colapsa detrás de un botón.
Digamos que quiero que el contenido se colapse a 540 px, no a 960 px. Luego cambiaría «navbar-expand-lg» a «navbar-expand-sm» en mi código y el resultado se vería así:
Fuente de imagen
Nota: utilicé el Editor de prueba de W3Schools para este ejemplo para que pueda ver cómo cambió el tamaño del resultado.
Barra de navegación vertical Bootstrap
En lugar de tener una barra de navegación horizontal, es posible que desee una barra de navegación vertical en su sitio. En ese caso, debe eliminar las clases .navbar-toggler, .navbar-collapse y navbar-expand-lg.
El resultado será algo como esto:
Fuente de imagen
Barra de navegación fija Bootstrap
De forma predeterminada, las barras de navegación (como cualquier elemento HTML) se colocan estáticas de forma predeterminada. Eso significa que siempre se colocan de acuerdo con el flujo normal de la página, lo que se conoce formalmente como modelo de objeto de documento (DOM).
Si desea colocar su barra de navegación en posiciones CSS no estáticas, puede usar las utilidades de posición de Bootstrap. Posición de uso de las barras de navegación fijas: fija. Abarcan la ventana gráfica de borde a borde y permanecen en el mismo lugar incluso cuando un visitante se desplaza. Puede fijar su barra de navegación en la parte superior o inferior de la pantalla.
A continuación, arreglé mi barra de navegación en la parte inferior de la pantalla agregando .navbar de fondo fijo en la misma línea de código que la clase .navbar-expand{-sm|-md|-lg|-xl}. También agregué un texto ficticio en el cuerpo para que pueda ver cómo permanece en el mismo lugar mientras me desplazo.
Fuente de imagen
Es importante tener en cuenta que la posición fija puede requerir relleno CSS para evitar la superposición con otros elementos.
Formularios de barra de navegación Bootstrap
También puede agregar un cuadro de búsqueda en su barra de navegación usando la clase .form-inline. De esa manera, los visitantes pueden buscar en todo su sitio web un tema o una palabra clave específica.
Simplemente tiene que anidar el siguiente fragmento de código debajo de la clase .navbar-brand.
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
En el siguiente ejemplo, quería cambiar el color del botón de verde a gris para que se viera mejor con el color de fondo de la barra de navegación. Para hacerlo, reemplacé «btn-outline-success» con «btn-outline-light». Hay otros opciones de color de los botones para elegir también. Aquí está el resultado final:
Fuente de imagen
Personalizar la barra de navegación de Bootstrap
Si desea crear una barra de navegación completamente única, puede comenzar con una de las plantillas prediseñadas anteriores y personalízalo usando CSS personalizado.
Veamos un ejemplo. Diga, quiero cambiar el color de fondo de mi barra de navegación a un color personalizado, en lugar de usar cualquiera de las 10 clases de utilidad de color que proporciona Bootstrap.
En ese caso, eliminaría cualquier utilidad de color de mi HTML (como «bg-light», por ejemplo). Luego, en mi CSS, usaría el selector de clase .navbar y establecería la propiedad de fondo en el tono de naranja que quería (#FF7A59).
Aquí está el CSS y el resultado:
ver la pluma Personalice Bootstrap Navbar con CSS personalizado de Christina Perricone (@hubspot) sobre CódigoPen.
Para obtener más información sobre cómo personalizar Bootstrap, consulte Cómo editar, personalizar y anular CSS de Bootstrap para adaptarlo a su marca.
Ejemplos de barras de navegación Bootstrap personalizadas
Muchos desarrolladores y diseñadores han creado sus propias barras de navegación Bootstrap personalizadas y las han puesto a disposición para su compra o descarga. Echemos un vistazo a algunos de estos ejemplos a continuación.
Website Menu V01 es una barra de navegación Bootstrap transparente que se vuelve blanca cuando un usuario comienza a desplazarse. Cuenta con un menú desplegable de varios niveles, así como iconos de redes sociales.
La barra de navegación Bootstrap con el logotipo centrado arriba es un ejemplo minimalista y moderno. En lugar de tener la marca de la barra de navegación hacia abajo y hacia la izquierda, este ejemplo presenta un logotipo centrado en la página y encima de los enlaces de navegación. Estos enlaces de navegación colapsarán detrás de un botón de alternar en tamaños de pantalla más pequeños.
Simple Horizontal Bootstrap Navbar es un ejemplo de barra de navegación avanzada. Tiene un color de fondo personalizado que es algo transparente y un borde inferior azul. Los elementos de navegación son blancos, pero se vuelven del mismo tono azul cuando el usuario pasa el cursor sobre ellos. Los menús desplegables también aparecen cuando un usuario se desplaza sobre…
