0

Muy buenas a todos! Estuve haciendo un html muy sencillito con bootstrap y no consigo que el navbar se despliegue D: he estado leyendo por ahí y no consigo que funcione.

Se que el proyecto debe incluir jquery para su funcionamiento, es decir, para que el navbar funcione, pero no me queda muy claro con la documentación que he estado leyendo si estoy incluyendo correctamente esto mismo en mi html.

Probe cambiar la posición de los links en el head pero no funcionó. ¿Alguno ve el error? Soy muy nuevo en todo esto, así que disculpen si estoy preguntando una tonteria.

El proyecto tiene instadas las siguientes dependencias con npm dentro de mi archivo package.json:

"dependencies": {
    "@popperjs/core": "^2.9.2",
    "bootstrap": "^5.0.1",
    "jquery": "^3.6.0"
  }

Además mi index.html contiene lo siguiente:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo Bootstrap</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="stylesheet" href="css/styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600&display=swap" rel="stylesheet">
   
        <!-- Jquery -->
    <link rel="stylesheet" href="node_modules/jquery/dist/jquery.min.js">
        <!-- Bootstrap -->
    <link rel="stylesheet" href="node_modules/bootstrap/dist/js/bootstrap.min.js"> 
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
        <!-- Popperjs --> 
    <link rel="stylesheet" href="node_modules/bootstrap/dist/js/bootstrap.bundle.js">
    <link rel="stylesheet" href="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js">            
</head>

<body>
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="#"><img src="images/pngwing.com.png" alt="logo" class="logo-brand"></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">
                <ion-icon name="menu-outline"></ion-icon>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#" id="home">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" id="portfolio">Portfolio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" id="pricing">Pricing</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" id="testimonial">Testimonial</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" id="contact">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
</body>

</html>
1
  • 2
    Ten en cuenta que Bootstrap 5 no usa jQuery. Bootstrap 5 ya tiene su propio JavaScript puro y nuevo CSS. Controla eso Commented el 27 may. 2021 a las 1:54

1 respuesta 1

0

¡Listo! Te tengo algunas observaciones:

1- NO pongas scripts dentro del HEAD, dado que algunas cosas de tu página no cargaran hasta que estos se carguen, esos ponlos antes del BODY y después del HEAD

2- Eliminé todo esto, en primera porque como mencionan arriba, Bootstrap 5 ya no requiere de Jquery. Basta con agregar el Bundle tanto CSS y JS, no necesitas tanta cosa, los reemplacé por CDN para más rapidez.

3- Acomodé el bootstrap.min.css dentro del head porque así es recomendable que vayan todos los CSS, y el JS al final, además de formatear tu código, procura mantenerlo ordenado para que no te cueste tanto tiempo encontrar las cosas.

<!-- Jquery -->
    <link rel="stylesheet" href="node_modules/jquery/dist/jquery.min.js">
        <!-- Bootstrap -->
    <link rel="stylesheet" href="node_modules/bootstrap/dist/js/bootstrap.min.js"> 
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
        <!-- Popperjs --> 
    <link rel="stylesheet" href="node_modules/bootstrap/dist/js/bootstrap.bundle.js">
    <link rel="stylesheet" href="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js">

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Ejemplo Bootstrap</title>
      <link rel="preconnect" href="https://fonts.gstatic.com">
      <link rel="stylesheet" href="css/styles.css">
      <link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600&display=swap" rel="stylesheet">
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
   </head>
   <body>
      <nav class="navbar navbar-expand-lg">
         <div class="container">
            <a class="navbar-brand" href="#"><img src="images/pngwing.com.png" alt="logo" class="logo-brand"></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">
               <ion-icon name="menu-outline"></ion-icon>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
               <ul class="navbar-nav ml-auto">
                  <li class="nav-item">
                     <a class="nav-link" href="#" id="home">Home</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" href="#" id="portfolio">Portfolio</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" href="#" id="pricing">Pricing</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" href="#" id="testimonial">Testimonial</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" href="#" id="contact">Contact</a>
                  </li>
               </ul>
            </div>
         </div>
      </nav>
      <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
   </body>
</html>

Y ya, tu código está bien y funciona bien (si se despliega). Espero haberte ayudado.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.