2016-10-05 35 views
1

Ich kann nicht den Grund finden, warum, wenn Sie versuchen, die Navigationsschaltfläche von Bootstrap zu verwenden, funktioniert es nicht.Bootstrap Navbar Kollaps funktioniert nicht

Ich denke, es hat etwas mit meiner Seite zu tun, die jQuery-Bibliothek oder etwas zu laden, obwohl ich nicht verstehe.

Hier ist mein Code. Ich werde nur die Kopf- und Navbar-Teile zeigen, da ich glaube, dass dort das Problem liegt. Alles andere ist einfach HTML-Struktur:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="initial-scale=1"> 
    <!--Boostrap jQuery--> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjsmfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
     crossorigin="anonymous"></script> 
    <!--Boostrap--> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
     crossorigin="anonymous"> 
    <!--Favicon--> 
    <link rel="icon" type="image/png" href="media/favicon-32x32.png" sizes="32x32" /> 
    <!--Mi CSS--> 
    <link rel="stylesheet" type="text/css" href="index.css"> 

    <!-- p5.js--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.min.js"></script> 
    <script src="js/sketch.js" type="text/javascript"></script> 

    <title>Festival Sonorum</title> 
</head> 

<body> 
    <!-- navbar --> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" 
        aria-controls="navbar"> 
      <span class="sr-only">Navegación</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
       <a class="navbar-brand" href="index.html">Festival Sonorum</a> 
      </div> 
      <div id="navbar" class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="programa.html">Programa</a></li> 
        <li><a href="#acerca">Acerca</a></li> 
        <li><a href="#contacto">Contacto</a></li> 
        <li><a href="#galeria">Galería</a></li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Artistas <span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Action</a></li> 
          <li><a href="#">Another action</a></li> 
          <li><a href="#">Something else here</a></li> 
          <li role="separator" class="divider"></li> 
          <li class="dropdown-header">Nav header</li> 
          <li><a href="#">Separated link</a></li> 
          <li><a href="#">One more separated link</a></li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
      <!--/.nav-collapse --> 
     </div> 
    </nav> 
    <!--fin del navbar--> 

Fehle ich etwas? Wie lädt man eine Bibliothek?

+0

Hallo @dawn :) Wenn Sie meine Antwort hilfreich gefunden, bitte [akzeptieren & vote up] (https: // Meta .stackexchange.com/questions/5234/how-does-akzeptieren-eine-antwort-arbeiten) –

Antwort

2

Bootstrap enthält jQuery nicht, Sie müssen es also selbst hinzufügen, damit es funktioniert. Fügen Sie es direkt vor dem Skript bootstrap.js hinzu.

Per Bootstrap's docs:

jQuery required

Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template. Consult our bower.json to see which versions of jQuery are supported.

Hinzu kommt, dass, schlägt die Integritätsprüfung auf Ihrem bootstrap.min.js Skript. Damit es funktioniert, dass und fügen Sie mindestens Version 1.9.0 von jQuery reparieren müssen:

... 
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 

<!--Boostrap jQuery--> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
... 
+0

Es funktioniert immer noch nicht – dawn

+1

Hi @dawn, scheinbar 'bootstrap.min.js' fehlgeschlagen die cdn Integritätsprüfung, also nie Wird geladen. Ich aktualisierte die Antwort und ersetzte das

Verwandte Themen