2016-11-10 2 views
1

Привет, я новичок в бутстрапе, и я пытаюсь создать выпадающий бутстрап и его не работает.Bootstrap w3school учебник Dropdown не работает

Вот мой 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> 

Я использую w3school.com в качестве ссылки.

+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 

Update 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.x фрагмент кода:

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

Это работает для меня. благодаря – yok2xDuran

0

Добавить Сценарий и Css В вашем проекте. Дополнительная информация Узнайте Boostrap DropDown 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 Bootstrap требует 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>

Смежные вопросы