Панель навигации Bootstrap, не работающая с последней версией

Перед созданием бутстрап-навигационной панели я столкнулся с простой проблемой. Я копирую последние CDN-файлы и вставляю в свой раздел. Все работает отлично, но мои подменю навигационной панели и выпадающие меню не открываются. Я не знаю, чего я пропустил, Пожалуйста, любой проводник. Полный код приведен ниже. Благодарю.Панель навигации Bootstrap, не работающая с последней версией

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

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

</head> 
<body> 
    <form id="form1" runat="server"> 
     <div> 

      <nav class="navbar navbar-inverse"> 
       <div class="container-fluid"> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
         <a class="navbar-brand" href="#">WebSiteName</a> 
        </div> 
        <div class="collapse navbar-collapse" id="myNavbar"> 
         <ul class="nav navbar-nav"> 
          <li class="active"><a href="#">Home</a></li> 
          <li class="dropdown"> 
           <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
           <ul class="dropdown-menu"> 
            <li><a href="#">Page 1-1</a></li> 
            <li><a href="#">Page 1-2</a></li> 
            <li><a href="#">Page 1-3</a></li> 
           </ul> 
          </li> 
          <li><a href="#">Page 2</a></li> 
          <li><a href="#">Page 3</a></li> 
         </ul> 
         <ul class="nav navbar-nav navbar-right"> 
          <li><a href="#"><span class="glyphicon glyphicon-user"></span>Sign Up</a></li> 
          <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Login</a></li> 
         </ul> 
        </div> 
       </div> 
      </nav> 

     </div> 
    </form> 
</body> 
</html>

источник

2016-07-30 Rauf Abid

прекрасно работает для меня –

Где ваша ссылка на jQuery? Bootstrapjs зависит от наличия функции jQuery. – vanburen

Ваш источник правильны, однако вы пропустили JQuery. Это должен быть результат вашего HTML.

<head runat="server"> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
</head> 
<body> 
<!-- Your Contents/Tags Here --> 

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

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

источник

2016-07-30 06:34:09 iMarkDesigns

Измените свой Bootstrap link и добавьте эти три. После изменения они работают для меня.

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

Вместо этих трех:

<!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

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

источник

2016-07-30 05:25:20

Спасибо за ответ, я уже это сделал, но мне нужно сделать последнюю версию, что может быть проблемой с последней версией, спасибо. –

@RaufAbid вы должны добавить jquery перед загрузкой bootstrap.js –

Спасибо всем, я пропустил файл запроса j, я включил и все работает нормально. –

Панель навигации Bootstrap, не работающая с последней версией

ответ

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