下拉按鈕按預期工作。

我是HTML和Angular的新手。這可能是一個簡單的基本問題。我正在嘗試使用基本的下拉按鈕。在這個例子中。下拉按鈕按預期工作。

http://jsfiddle.net/xkL15guj/

我想在plunkr中使用相同的示例。但是，當我試圖添加文件bootstrap.min.js時，我無法添加。你能幫我理解我在這裏做了什麼錯誤嗎？

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>

謝謝。

來源

2016-04-14 Sailoosha

要添加您需要添加的jQuery引導：

當我看着你plunker的調整，你需要在你的腳本的頂部進行呼叫（前角）：

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

和

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

我這裏有一個plunker例如：https://plnkr.co/edit/Kpy4s0RdFFu5hqgnKm9h?p=preview

另請注意，您引用的引導PNG是「阻止加載混合活動內容」

混合活動內容現在在Firefox 23中默認被阻止！

什麼是混合內容？

當用戶訪問通過HTTP提供的頁面時，他們的連接對於竊聽和中間人（MITM）攻擊是開放的。當用戶訪問通過HTTPS提供的頁面時，它們與Web服務器的連接將通過SSL進行身份驗證和加密，因此可以防止竊聽者和MITM攻擊。

但是，如果HTTPS頁面包含HTTP內容，即使通過HTTPS提供主頁面，攻擊者也可以讀取或修改HTTP部分。當HTTPS頁面包含HTTP內容時，我們稱該內容爲「混合」。用戶正在訪問的網頁只是部分加密的，因爲其中一些內容是通過HTTP未加密檢索的。混合內容阻止程序會阻止HTTPS頁面上的某些HTTP請求。

要禁用禁止混合內容：

如果你需要允許要顯示的混合內容，你能做到這一點很容易：

點擊盾牌圖標混合內容盾在地址欄並從下拉菜單中選擇「在此頁面上禁用保護」。

地址欄中的圖標將更改爲橙色警告三角形警告標識圖標以提醒您正在顯示不安全的內容。

要恢復之前的操作（重新阻止混合內容），只需重新加載頁面即可。

來源

2016-04-14 14:00:24 TonyG

這是因爲您沒有將bootstrap.js文件和jQuery.js文件添加到您的應用程序中。

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

來源

2016-04-14 14:01:20

下拉按鈕按預期工作。

回答

相關問題