0

Tengo un problema. Al dar clic a mi botón (hice que desapareciera el menu cuando es chica la pantalla) no me despliega el menu. Llevo rato viendo y revisando la documentación y ejemplos de Bootstrap y no doy con la solución. ¿Alguien tendrá alguna idea para que me oriente?

Dejo el código.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- Estilos CSS -->
    <style type="text/css">
        .slider {
          background: url(images/slide0.jpg);
          height: 85vh;
          background-size: cover;
          background-position: center;
        }
    </style>
  </head>


  <body>

    <!-- Imagen Superior -->
    <section class="container-fluid slider d-flex justify-content-center align-items-center">
    <!-- d-flex sirve para alinear elementos uno al lado del otro-->
      <h1 class="display-4">AutoEdifica, un problema una solución!</h1>
    </section>

    <!-- Barra de Navegación -->
    <div class="container"> <!-- Dentro de div para tener margenes -->
      <!-- Barra de bootstrap azul (navbar-inverse bg-inverse) -->
      <!-- navbar-toggleable-md indica hasta cuando queremos que desaparezcan elmentos del menu -->
      <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md">
        <!-- Boton para Responsive, para que despliegue menu hacia abajo -->
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#id01" aria-controls="id01" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
          <!-- Logo de la barra se ponen medida porque es img vectorizada -->
          <a class="navbar-brand" href="#">
            <img src="images/logo.svg" width="30" height="30" class="d-inline-block align-top" alt="Logo"> AutoEdifica
          </a>

          <!-- Queremos que cuando la pantalla sea muy chica me siga manteniendo el logo en la barra por eso se coloca el div aqui -->
          <div class="collapse navbar-collapse justify-content-end" id="id01">
            <!-- Se podría poner ul y li o nav-items esta es mas nueva-->
            <div class="navbar-nav">
              <a href="" class="nav-item nav-link active">Nosotros</a>
              <a href="" class="nav-item nav-link">Asesorías</a>
              <a href="" class="nav-item nav-link">Preupuestos</a>
              <a href="" class="nav-item nav-link">Contacto</a>
            </div>
          </div>  
      </nav>   
    </div>




    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"</script>
  </body>
</html>
0

1 respuesta 1

2

Tienes la etiqueta que referencia al archivo bootstrap mal formada:

<script src="js/bootstrap.min.js"</script>

Cuando deberia de ser:

 <script src="js/bootstrap.min.js"></script>
4
  • jajajaj sabes que tambien habia revisado eso y no me percate jajajjajajaja bueno de los errores se aprenden, muchas gracias!
    – Naoto
    el 29 jul. 2017 a las 19:00
  • @Naoto sí la pregunta solucionó su problema por favor marcarla como aceptada.
    – Dev. Joel
    el 29 jul. 2017 a las 19:44
  • Me alegra haberte ayudado. Recuerda marcarla si te funciono.
    – Einer
    el 29 jul. 2017 a las 20:46
  • @Einer muchas gracias creo que ya la marque como respondida, marcando el chek no ?
    – Naoto
    el 5 ago. 2017 a las 17:27

Tu Respuesta

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

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