Dropdown-Taste funktioniert wie erwartet.

Ich bin neu in HTML und Angular. Dies könnte eine einfache Grundfrage sein. Ich versuche, die grundlegende Dropdown-Taste zu verwenden. in diesem Beispiel.Dropdown-Taste funktioniert wie erwartet.

http://jsfiddle.net/xkL15guj/

Ich versuche, das gleiche Beispiel in Plunkr zu verwenden. Wenn ich jedoch versuche, die Dateien bootstrap.min.js hinzuzufügen, kann ich nichts hinzufügen. Kannst du mir helfen zu verstehen, welchen Fehler ich hier mache?

https://plnkr.co/edit/YfgD9G?

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="btn-group"> 
 
    <button type="button" class="btn btn-danger">Action</button> 
 
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> 
 
    <span class="caret"></span> 
 
    <span class="sr-only">Toggle Dropdown</span> 
 
    </button> 
 
    <ul class="dropdown-menu" role="menu"> 
 
    <li><a href="#">Action</a></li> 
 
    <li><a href="#">Another action</a></li> 
 
    <li><a href="#">Something else here</a></li> 
 
    <li class="divider"></li> 
 
    <li><a href="#">Separated link</a></li> 
 
    </ul> 
 
</div>

Danke.

Quelle

2016-04-14 Sailoosha

hinzuzufügen Bootstrap Sie benötigen jquery hinzuzufügen:

Wenn ich an Ihrer Plunker sah, die passt Sie am Anfang des Skripts gemacht müssen Anrufe (vor Winkel-):

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

und

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

ich habe ein Plunker Beispiel hier: https://plnkr.co/edit/Kpy4s0RdFFu5hqgnKm9h?p=preview

Beachten Sie auch, dass der Bootstrap-Png, den Sie referenzieren, "Blocked loading mixed active content" ist

Gemischter aktiver Inhalt ist jetzt standardmäßig in Firefox 23 blockiert!

Was ist gemischter Inhalt?

Wenn ein Benutzer eine Seite über HTTP bereitgestellt besucht, ist ihre Verbindung offen für das Abhören und Man-in-the-Middle (MITM) Attacken. Wenn ein Benutzer eine Seite besucht, die über HTTPS bedient wird, wird seine Verbindung mit dem Webserver authentifiziert und mit SSL verschlüsselt und somit vor Lauschern und MITM-Angriffen geschützt.

Wenn jedoch eine HTTPS-Seite HTTP-Inhalt enthält, kann der HTTP-Abschnitt gelesen oder von Angreifern verändert werden, auch wenn die Haupt-Seite wird HTTPS bedient über. Wenn eine HTTPS-Seite HTTP-Inhalt hat, nennen wir diesen Inhalt "gemischt". Die Webseite, die der Benutzer besucht, ist nur teilweise verschlüsselt, da ein Teil des Inhalts unverschlüsselt über HTTP abgerufen wird. Der Blockierer für gemischte Inhalte blockiert bestimmte HTTP-Anforderungen auf HTTPS-Seiten.

gemischte Inhalte blockiert deaktivieren:

das Schild-Symbol Mixed Content-Schild in der Adresse klicken:

Wenn Sie den gemischten Inhalt ermöglichen, müssen angezeigt werden, können Sie das leicht tun können bar und wählen Sie Schutz deaktivieren auf dieser Seite aus dem Dropdown-Menü.

Das Symbol in der Adressleiste wird auf ein orangefarbenes Warndreieck Warnung Identität Symbol ändern Sie daran zu erinnern, dass unsichere Inhalte angezeigt werden.

Um die vorherige Aktion (blockierten gemischten Inhalt) zurückzusetzen, laden Sie die Seite neu.

Quelle

2016-04-14 14:00:24 TonyG

Es ist, weil Sie nicht hinzugefügt bootstrap.js Datei und jquery.js in Ihre Anwendung einreichen.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
 
    <link data-require="[email protected]*" data-semver="3.2.1" rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/img/glyphicons-halflings.png" /> 
 
    <script data-require="[email protected]" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 
    <script data-require="[email protected]*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
    <script data-require="[email protected]*" data-semver="1.1.1" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-1.1.1.js"></script> 
 
    <script data-require="[email protected]*" data-semver="0.12.1" src="https://raw.githubusercontent.com/angular-ui/bootstrap-bower/0.12.1/ui-bootstrap-tpls.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <h1>Hello Plunker!</h1> 
 
    <div class="btn-group"> 
 
    <button type="button" class="btn btn-danger">Action</button> 
 
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> 
 
     <span class="caret"></span> 
 
     <span class="sr-only">Toggle Dropdown</span> 
 
    </button> 
 
    <ul class="dropdown-menu" role="menu"> 
 
     <li><a href="#">Action</a></li> 
 
     <li><a href="#">Another action</a></li> 
 
     <li><a href="#">Something else here</a></li> 
 
     <li class="divider"></li> 
 
     <li><a href="#">Separated link</a></li> 
 
    </ul> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2016-04-14 14:01:20

Dropdown-Taste funktioniert wie erwartet.

Antwort

Verwandte Themen