2016-11-10 5 views
1

こんにちは、私はブートストラップで新しく、私はドロップダウンブートストラップを作成しようとしており、動作していません。ブートストラップw3schoolチュートリアルドロップダウンが動作しない

は、ここで私はリファレンスとしてw3school.comを使用しています私のHTML

<!DOCTYPE html> 
<html> 
<head> 
<title>Sample</title> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
    <script type="text/javascript" src="js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
</head> 
<body> 
    <div class="dropdown"> 
     <button class="btn btn-primary dropdown-toggle" type="button" id="ddButton" data-toggle="dropdown">Button</button> 
     <ul class="dropdown-menu" role="menu"> 
       <li><a href="#">HTML</a></li> 
       <li><a href="#">CSS</a></li> 
       <li><a href="#">JavaScript</a></li> 
     </ul> 
    </div> 
</body> 
</html> 

です。

+4

は何のためにW3Schoolsのを使用しないでください。公式のドキュメントは、より正確かつ最新のものです:http://getbootstrap.com/components/#dropdowns –

答えて

1

bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4 

更新jQueryの

3.xがスニペット:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
をの

2.xでは、スニペット:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 

1.1は、スニペット:

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

これは私のために働く。ありがとう – yok2xDuran

0

スクリプトとCssプロジェクトで。詳細情報はこちらブートストラップドロップダウンW3schools Tutorial

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

を参照してください例

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="dropdown"> 
 
     <button class="btn btn-primary dropdown-toggle" type="button" id="ddButton" data-toggle="dropdown">Button</button> 
 
     <ul class="dropdown-menu" role="menu"> 
 
       <li><a href="#">HTML</a></li> 
 
       <li><a href="#">CSS</a></li> 
 
       <li><a href="#">JavaScript</a></li> 
 
     </ul> 
 
    </div> 
 
</body> 
 
</html>

1

ブートストラップのJavaScriptはjQueryのバージョン1.9.1以降が必要ですが、バージョン4. より低いですあなたのjqueryバージョンは1.6.2 ですそれまでの日付recent one.

0

あなたはブートストラップのためにCSSを含めることができませんでした。これを試して。含まれているパスが間違っている可能性があります。それを確認してください。コンソールから

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <body> 
 
     <div class="dropdown"> 
 
      <button class="btn btn-primary dropdown-toggle" type="button" id="ddButton" data-toggle="dropdown">Button</button> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li><a href="#">HTML</a></li> 
 
       <li><a href="#">CSS</a></li> 
 
       <li><a href="#">JavaScript</a></li> 
 
      </ul> 
 
     </div> 
 
    </body> 
 
</body> 
 

 
</html>

関連する問題