Bootstrap-Navigationsleiste funktioniert nicht mit der neuesten Version

Ich stehe vor einem einfachen Problem beim Erstellen der Bootstrap-Navigationsleiste. Ich habe die neuesten CDN-Dateien kopiert und in meinen Kopfbereich eingefügt. Alles funktioniert gut, aber die Untermenüs und Dropdown-Menüs meiner Navigationsleiste werden nicht geöffnet. Ich weiß nicht, was ich vermisse, bitte irgendjemanden. Der vollständige Code ist unten. Vielen Dank.Bootstrap-Navigationsleiste funktioniert nicht mit der neuesten Version

<%@ 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>

Quelle

2016-07-30 Rauf Abid

funktioniert gut für mich –

Wo ist Ihre Referenz auf jQuery? Bootstrapjs hängt vom Vorhandensein von jQuery ab, um zu funktionieren. – vanburen

Ihr Partner sind richtig, aber du bist die jQuery fehlt. Dies sollte die Ausgabe Ihres HTML sein.

<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>

Quelle

2016-07-30 06:34:09 iMarkDesigns

Ändern Sie Ihre Bootstrap link und fügen Sie diese drei hinzu. Nach dem Ändern dieser funktioniert es für mich.

<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>

Anstelle dieser drei:

<!-- 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>

Quelle

2016-07-30 05:25:20

Danke für die Antwort, ich habe es bereits getan, aber ich muss mit der neuesten Version tun, Was kann Problem mit der neuesten Version sein, danke. –

@RaufAbid müssen Sie jquery vor bootstrap.js hinzufügen –

Danke an alle, ich habe die j-Abfrage-Datei verpasst, ich habe aufgenommen und alles funktioniert gut. –

Bootstrap-Navigationsleiste funktioniert nicht mit der neuesten Version

Antwort

Verwandte Themen