0

Estoy creando una pagina web. Donde tengo un index y a su mismo nivel una carpeta js con tres archivos javascript (bootstrap.min, jquery.min, popper.min). Y otra carpeta llamada css con dos ficeros dentro (estilos.css y bootstrap.min.css). Tengo este pequeño bloque de código donde trato de crear una cabecera responsive.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Etiqueta que sirve para IE -->
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Hara que la web tenga un tamaño normal independientemente del dispositivo -->

    <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- Cargamos el css de bootstrap.min.css -->
    <link rel="stylesheet" href="css/estilos.css"> <!-- Cargamos el css de estilos.css -->

    <title>Pagina</title>
</head>
<body>    
    <script src="js/jquery.min.js"></script> <!-- Cargamos el js de jquery -->
    <script src="js/bootstrap.min.js"></script> <!-- Cargamos el js de bootstrap -->
    <script src="js/popper.min.js"></script> <!-- Cargamos el js de popper -->

    <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toogle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                   <span class="sr-only">Este boton cambia la barra de navegacion</span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">DAW208</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li href="#">Inicio</li>
                    <li href="#">1</li>
                    <li href="#">2</li>
                </ul>
            </div>
        </div>
    </nav>
</body>
</html>

Y me da este error en consola: CONSOLA

Me imagino que el problema viene de que no estoy cargando bien el popper.min.js pero soy incapaz de solucionarlo. El fichero lo descargue del siguiente enlace:

https://gist.github.com/FezVrasta/16c5d5e5ff1211922ddcf090c8454d74

2
  • 4
    Trata de invertir el orden en que los llamas, primero popper.js y luego bootstrap.
    – Alvarez
    Commented el 28 sept. 2017 a las 14:15
  • Gracias por la ayuda y por la rapidez. Diste en el clavo ;D Commented el 28 sept. 2017 a las 14:16

2 respuestas 2

3

Hay que tener cuidado cuando se hacen llamados a archivos JS que requieren de otros archivos, aqui un claro ejemplo:

<script src="js/jquery.min.js"></script> <!-- Cargamos el js de jquery -->
<script src="js/bootstrap.min.js"></script> <!-- Cargamos el js de bootstrap -->
<script src="js/popper.min.js"></script> <!-- Cargamos el js de popper -->

Aquí se esta llamando a bootstrap.min.js y este marca un error, ya que usa unas funciones de otro archivo(popper.min.js) en este caso, entonces bootstrap ocupa las funcionalidades de popper para funcionar, pero como no se ha leído el archivo popper, estas funcionalidades no existen. Lo mismo pasaria si llamamos a bootstrap.js sin antes llamar a Jquery.js.

Moraleja: El orden en que llamamos los archivos JS es importante.

1
  • Gracias por la respuesta amigo ;D Commented el 28 sept. 2017 a las 16:49
1

Yo te recomendaría cargarlo mediante CDN, revisa si eso funciona, de la siguiente forma:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

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.