2

Tengo el siguiente código:

<header>
    <div class="container">
        <a href="index.php" class="logo">
            <span><img src="imagenes/banner.png" alt="UNIDEP" width="250px"/></span>
        </a>
    </div>
</header>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and <span>toggle</span> get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">UNIDEP</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="alta.php">Registrar</a></li>
            <li><a href="consulta.php">Consultas</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Mensajes</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Publicaciones</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<div id="anuncio" class="jumbotron">
  <h1 align="center">Bootstrapin'</h1>
  <p align="center">Dandole sazón a HTML</p>
  <p align="center"><a class="btn btn-primary btn-lg" href="https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip" role="button">Descargar!</a></p>
</div>

<footer class="site-footer">
  <div class="container">
    <div class="row">
      <div class="footer-nav" >
        <div class="col-md-9">
          <ul>
            <li><a href="#"><img src="imagenes\contacto.png" alt="" /> Contacto </a></li>
            <li><a href="#"><img src="imagenes\asistencia.png" alt="" /> Asistencia </a></li>
            <li><a href="#"><img src="imagenes\manual.png" alt="" /> Manual </a> </li>
            <li><a href="#"><img src="imagenes\quiencreo.png" alt=""> Creador</li>
          </ul>
        </div>
      </div>
    </div>
  <div class="bottom-footer">
    <div class="col-md-5"></div>
    <div class="col-md-7">
      <ul class="footer-nav">
        <li><a href="#"><img src="imagenes\facebook.png" alt="" /></a></li>
        <li><a href="#"><img src="imagenes\google-plus.png" alt="" /></a></li>
        <li><a href="#"><img src="imagenes\gorjeo.png" alt="" /></a></li>
      </ul>
     </div>
   </div>
 </div>
</footer>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jQuery.js"></script>

Como pueden ver estan las tags de <script> al final, así acostumbro hacerlo pero esta vez tengo el problema de que si no están dentro de <head></head> y <body></body> en la misma página, no están funcionando mis menús desplegables y demás funciones de Bootstrap, no tengo idea de por qué está sucediendo esto. Se utilizaron diferentes navegadores, editores y computadoras con el mismo código y fue el mismo resultado.

3
  • 1
    Verificó la consola del navegador si lanza algún error. Quizá rutas incorrectas. Y jquery va antes de bootstrap
    – Dev. Joel
    el 18 oct. 2016 a las 20:18
  • 1
    intercambia las ultimas dos lineas jquery.js va primero que bootstrap.js
    – JuankGlezz
    el 18 oct. 2016 a las 20:21
  • Eso arreglo el problema, me siento un poco tonto XD
    – bluRyze
    el 18 oct. 2016 a las 20:35

2 respuestas 2

2

Bootstrap requiere de Jquery. Así que jquery debe cargarse antes. Si no hay problemas de rutas eso debería solucionar el error

    <script type="text/javascript" src="js/jQuery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
1

La llamada a JQuery debe estar antes de la llamada a Bootstrap. Solo debes intercambiar éstas líneas:

<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jQuery.js"></script>

por

<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></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.