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>