2013-02-22 57 views
1

我使用引導框架並試圖複製http://twitter.github.com/bootstrap/examples/hero.html 任何人都可以告訴我爲什麼下拉菜單不起作用。 下拉菜單在這個例子中工作不與我的代碼工作,我已經包括適當的風格和JS!和另外一個風格正在這麼想着它不是一個概率的風格任何幫助會不勝感激任何人都可以請讓我知道爲什麼引導下拉菜單不起作用

我以前用下面的在線工具
<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
     body { 
     padding-top: 60px; 
     padding-bottom: 40px; 
     } 
    </style> 
    <meta charset="utf-8"> 
     <title> The first step</title> 
     <link rel="stylesheet" href="css/bootstrap.min.css"> 
</head> 

<body> 
<div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="navbar-inner"> 
     <div class="container"> 
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="brand" href="#">Project name</a> 
      <div class="nav-collapse collapse"> 
      <ul class="nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#about">About</a></li> 
       <li><a href="#contact">Contact</a></li> 
       <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></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 class="divider"></li> 
        <li class="nav-header">Nav header</li> 
        <li><a href="#">Separated link</a></li> 
        <li><a href="#">One more separated link</a></li> 
       </ul> 
       </li> 
      </ul> 
      <form class="navbar-form pull-right"> 
       <input class="span2" type="text" placeholder="Email"> 
       <input class="span2" type="password" placeholder="Password"> 
       <button type="submit" class="btn">Sign in</button> 
      </form> 
      </div><!--/.nav-collapse --> 
     </div> 
     </div> 
    </div> 
<hr> 
     <footer> 
     <p>&copy; Company 2013</p> 
     </footer 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js 
"></script> 
    <script src="js/bootstrap.min.js"></script> 

</body> 
</html> 

回答

0

,它很適合我。它是免費的,快捷。我創建了一個示例下拉菜單,然後檢查了適用於我的網站的代碼。祝你好運。

CSS Menu Maker

1

@bana關閉頁腳關閉標籤

編輯您的腳本引用這樣

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> 
+0

+1貌似這個問題對我來說 – Jim 2013-02-22 09:30:40

+0

他使用谷歌的CDN jQuery的..所以沒有錯那個。 – Shail 2013-02-22 09:37:03

+0

@Shail他錯過了http:腳本參考和錯誤輸入的頁腳關閉標記 – snowp 2013-02-22 09:42:04

0

使用的CSS和JS文件方式如下:檢查的jsfiddle Example with cloud hosted bootstrap css and js
你也在您的頁面中使用的是錯誤版本的Jquery,它必須是

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

的HTML應如下所示:

<!DOCTYPE html> 
    <html> 
    <head> 
     <style type="text/css"> 
     body { 
     padding-top: 60px; 
     padding-bottom: 40px; 
      } 
     </style> 
     <meta charset="utf-8"> 
     <title> The first step</title> 
     <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"> 

     <link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet"> 
     </head> 

及腳註:

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script> 
相關問題