2016-10-05 316 views
1

我找不到原因,當試圖從Bootstrap使用導航欄按鈕時,它不起作用。Bootstrap導航欄崩潰不起作用

我認爲這與我的頁面加載jQuery庫或某事有關,但我不明白。

這是我的代碼。我只會展示頭部和導航欄部分,因爲我相信問題存在的地方。其他一切都很簡單HTML結構:

<!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--> 

我錯過了什麼嗎?像加載一個庫?

+0

喜@dawn :)如果你發現我的答案有幫助,請[接受它與投了(https://開頭元.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) –

回答

2

Bootstrap不包括jQuery,所以你需要自己添加它才能使它工作。在你的bootstrap.js腳本之前添加它。

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.

最重要的是,完整性校驗失敗對你bootstrap.min.js腳本。爲了使它工作,你需要修復,並添加至少版本1.9.0的jQuery:

... 
<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

它仍然不起作用 – dawn

+1

嗨@dawn,顯然'bootstrap.min.js'失敗了cdn完整性檢查,因此從來沒有加載。我更新了答案,並替換了