Bootstrap с выпадающим меню

Я пишу простой код, используя bootstrap для выпадающего меню, код кажется прекрасным. Тем не менее, он не расширяется, когда я нажимал на каретку. Я не уверен, что пошло не так. Может кто-то помочь мне с этим? Спасибо за помощь.Bootstrap с выпадающим меню

<!DOCTYPE html> 
 
<html lang="en"> 
 
\t <head> 
 
\t \t <title>thenewboston</title> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <meta name="viewpoint" content="width=device-width, initial-scale=1"> 
 
\t \t <!-- Latest compiled and minified CSS --> 
 
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
\t \t 
 
\t \t <!-- Optional theme --> 
 
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 
\t \t 
 
\t \t <!-- Latest compiled and minified JavaScript --> 
 
\t \t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
\t </head> 
 
\t 
 
\t <body> 
 
\t \t <nav class="navbar navbar-inverse"> 
 
\t \t \t <div class="container-fluid"> 
 
\t \t \t \t 
 
\t \t \t \t <!-- Logo --> 
 
\t \t \t \t <div class="navbar-header"> 
 
\t \t \t \t \t <a href="navbar.html" class="navbar-brand">ABE TECHNOLOGY</a> 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t <!-- Menu Items --> 
 
\t \t \t \t <div> 
 
\t \t \t \t \t <ul class="nav navbar-nav"> 
 
\t \t \t \t \t \t <li class="active"><a href="#">Home</a></li> 
 
\t \t \t \t \t \t <li><a href="#">About</a></li> 
 
\t \t \t \t \t \t <li><a href="#">Contact</a></li> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t <!-- drop down menu --> 
 
\t \t \t \t \t \t <li class="dropdown"> 
 
\t \t \t \t \t \t \t <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Profile <span class="caret"></span></a> 
 
\t \t \t \t \t \t \t <ul class="dropdown-menu"> 
 
\t \t \t \t \t \t \t \t <li><a href="#">Friends</a></li> 
 
\t \t \t \t \t \t \t \t <li><a href="#">Photos</a></li> 
 
\t \t \t \t \t \t \t \t <li><a href="#">Settings</a></li> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </nav> 
 
\t </body> 
 
</html> \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t

источник

2016-02-22 Hachiri

Вы пытались загрузить JQuery плагин, как я уже на мой ответ ниже? Если это помогло? – BigDropGR

Я добавил jQuery, но когда я запустил chrome или firefox, это не сработало. Однако, когда я запускал тот же код на jsfiddle.com, он работает отлично. – Hachiri

О, nvm. Я использовал ваш jQuery и миниатюрный код javascript, после чего он работает. – Hachiri

Это потому, что вы не загружаете плагин JQuery !!

Вам нужно загрузить этот скрипт:

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

источник

2016-02-22 09:31:49 BigDropGR

Для Bootstraps javascript components вам нужно будет использовать jQuery.

Вы должны включить jQuery до скрипты Bootstraps. Лучше всего, вы включаете оба сценария в нижней части страницы, прямо перед закрывающим тэгом как </body>:

[...your html...] 

<!-- jQuery --> 
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 

</body> 
</html>

источник

2016-02-22 12:37:35

По некоторым причинам отправленный jQuery не работает, но @BigDropGR работает нормально. Спасибо за помощь. – Hachiri

Bootstrap с выпадающим меню

ответ

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