es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo llegar a la sección correcta al hacer clic en un elemento de la barra de navegación usando Bootstrap 5?

Cómo llegar a la sección correcta al hacer clic en un elemento de la barra de navegación usando Bootstrap 5?

25 Jul, 2023 Programación

Soy nuevo en el desarrollo front-end y espero obtener claridad sobre este tema de parte de ustedes. Necesito construir un sitio web en el que implemente una barra de navegación y, cuando se haga clic en un elemento o enlace de esta barra de navegación, debe desplazarse hasta la sección correcta de la página web. Todo es una página única.

Mi pregunta es cómo implementar una barra de navegación utilizando Bootstrap 5 y/o una hoja de estilos CSS externa alineada en el lado derecho con los siguientes elementos: Acerca de mí, Datos aleatorios, Habilidades, Portafolio, Contáctame, donde cuando se hace clic en, por ejemplo, Datos aleatorios, se desplaza hasta Datos aleatorios.

También quiero saber cuál es exactamente la diferencia entre

<a class="nav-link active" aria-current="page" href="#"> </a>

y el estándar

<a class="nav-link" href="#"> </a>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Fabian Zaiser</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Acerca de mí</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Datos aleatorios</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Habilidades</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</body>

Esto es lo que tengo actualmente. Muchas gracias de antemano.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para implementar una barra de navegación (navbar) utilizando Bootstrap 5 alineada a la derecha, con elementos como “Sobre mí”, “Datos aleatorios”, “Habilidades”, “Portafolio” y “Contáctame”, donde cada uno enlace a una sección específica de la página web, puedes utilizar el siguiente código:

    <body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fabian Zaiser</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#about-me">Sobre mí</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#random-facts">Datos aleatorios</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#skills">Habilidades</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#portfolio">Portafolio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contact-me">Contáctame</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- Tu contenido de una página va aquí -->

</body>

    En este código se crea la barra de navegación (navbar) utilizando la clase navbar, y su contenido se encuentra dentro de una etiqueta div con la clase container-fluid. La clase ms-auto utilizada en el elemento ul alinea los elementos de la barra de navegación a la derecha.

    Cada elemento a en la barra de navegación tiene un atributo href que enlaza a una sección específica de la página web. Por ejemplo, el enlace “Sobre mí” tiene href="#about-me", lo cual significa que enlaza al elemento con el id="about-me" en la página web.

    Para hacer que un elemento de la barra de navegación esté activo cuando se está visualizando la sección correspondiente, se utiliza la clase active de la siguiente manera:

    <a class="nav-link active" aria-current="page" href="#about-me">Sobre mí</a>

    Esto significa que el enlace “Sobre mí” tendrá un estilo CSS diferente a los demás enlaces cuando el usuario esté viendo la sección correspondiente. El atributo aria-current="page" se utiliza con fines de accesibilidad para indicar la página o sección actual.

    Por otro lado, se utiliza la clase nav-link estándar sin la clase active para los demás enlaces en la barra de navegación.

    Espero que esto aclare tus dudas. ¡Buena suerte con tu desarrollo front-end!

Comments are closed.