2013-12-12 190 views
3

嘗試着手學習Bootstrap。我創造一些代碼來創建響應菜單,這樣導航欄崩潰在引導程序中不起作用

<head> 
    <meta charset="UTF-8"> 
    <title>Bootstrap</title> 
    <link rel="stylesheet" type="text/css" href="CSS/bootstrap.css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
<body> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a href="#" class="navbar-brand">Application Name</a> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Home</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <script type="text/javascript" src="JS/bootstrap.js"></script> 
</body> 
</html> 

我的問題是,爲什麼當我嘗試選擇小瀏覽器菜單,菜單不顯示? 有人能告訴我爲什麼嗎? 謝謝

回答

14

我的geuss是你沒有加載jQuery。將此放在你的頭,看看它的工作原理:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 

此外,我建議還加載引導js文件的標題,只是 jQuery庫後。

5

這很可能是因爲bootstrap.js腳本依賴jQuery來工作。嘗試在bootstrap.js之前包括jQuery

0

不知道這是否有幫助,但我注意到,在引導站點它告訴你鏈接頁腳中的js文件。

我也有wordpress將它們放在我的標題中,因爲我必須將腳本排入我的functions.php文件中。一旦我刪除鏈接到頁腳jquery.js文件和bootstrap-min.js,導航按鈕開始正確摺疊。

+0

這是用來加快頁面加載和問題是因爲上述告知原因。 @DemPorkChops –