Saltar al contenido

Cómo crear, editar y hacer que su barra de navegación sea impresionante en Bootstrap

febrero 10, 2022
Bootstrap site owner creating an awesome navbar.jpgkeepProtocol

67% de los usuarios móviles abandonará un sitio web si está frustrado con la navegación. La navegación deficiente puede afectar la experiencia de los visitantes y disminuir la posibilidad de que regresen a su sitio.

Para evitar esto, puede crear un encabezado de navegación impresionante en Oreja. Bootstrap es un conjunto de herramientas de desarrollo de código abierto que ofrece plantillas para los componentes de la interfaz para que pueda agregar rápidamente funciones receptivas que enriquecen la experiencia del usuario en su sitio. Si bien deberá estar familiarizado con HTML y CSS para usar Bootstrap, no tendrá que crear un sitio desde cero.

Descargar ahora: Guía de introducción gratuita a HTML y CSS

Una barra de navegación es una característica particularmente importante porque permite a los visitantes encontrar rápida y fácilmente páginas importantes en su sitio web, como su blog, páginas de productos, precios, información de contacto y documentación. Esto mejora las posibilidades de que los visitantes naveguen por su sitio por más tiempo, lo que puede aumentar las vistas de su página y reducir su tasa de rebote.

Ahora que comprendemos los beneficios de una barra de navegación, echemos un vistazo más de cerca a lo que es y cómo puede crear y editar una.

Barra de navegación Bootstrap 4

barra de navegación es el encabezado de navegación sensible de Bootstrap. Aquí hay algunos puntos clave que debe saber sobre este componente:

  • Las barras de navegación responden y son fluidas de forma predeterminada. Es decir, se expanden o contraen según el ancho de la ventana gráfica actual.
  • Las barras de navegación requieren una .navbar envolvente con las clases .navbar-expand{-sm|-md|-lg|-xl}. Estas clases determinan cuándo el contenido se colapsa detrás de un botón.
  • El elemento

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í:

Diseño básico de arranque sin barra de navegación

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:

Diseño de arranque básico con estilo de colapso de la barra de navegación móvil

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:

Diseño de arranque básico con estilo desplegable de barra de navegación

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.

Utilidades de color de fondo de Bootstrap para la barra de navegació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:

Diseño de arranque básico con estilo de color de barra de navegación "información"

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.

diseño básico de arranque con estilo de 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í:

Diseño de arranque básico con estilo de colapso de la barra de navegación establecido en un punto de interrupción pequeño

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:

diseño básico de arranque con estilo de barra de navegación vertical

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.

diseño básico de arranque con estilo de barra de navegación inferior fija-1

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:

diseño de arranque básico con estilo de formulario de barra de navegación

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.

Menú del sitio web V01

Ejemplo de bootstrap navabr personalizado que es transparente pero se vuelve blanco sólido en el desplazamiento

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.

Bootstrap Navbar con logotipo centrado arriba

ejemplo de barra de navegación personalizada de Bootstrap con el logotipo centrado y encima de los enlaces de navegaciónLa 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.

Barra de navegación Bootstrap horizontal simple

Ejemplo de bootstrap navabr personalizado que es algo transparente con un borde azulSimple 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…