Question

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

谢谢。

Answer 1

要添加引导程序，您需要添加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>

我在这里有一个有关的例子：https://plnkr.co/edit/Kpy4s0RdFFu5hqgnKm9h?p=preview

另请注意，您引用的bootstrap png是＆＃34;阻止加载混合活动内容＆＃34;

Firefox 23中默认阻止混合活动内容！

什么是混合内容？

当用户访问通过HTTP提供的页面时，他们的连接将被打开以进行窃听和中间人（MITM）攻击。当用户访问通过HTTPS提供的页面时，他们与Web服务器的连接将通过SSL进行身份验证和加密，从而防止窃听者和MITM攻击。

但是，如果HTTPS页面包含HTTP内容，则攻击者可以读取或修改HTTP部分，即使主页面是通过HTTPS提供的。当HTTPS页面具有HTTP内容时，我们将该内容称为“混合”。用户正在访问的网页仅部分加密，因为某些内容是通过HTTP未加密检索的。混合内容阻止程序阻止HTTPS页面上的某些HTTP请求。

禁用阻止混合内容：

如果您需要允许显示混合内容，您可以轻松地执行此操作：

单击地址栏中的盾牌图标Mixed Content Shield，然后从下拉菜单中选择“禁用此页面上的保护”。

地址栏中的图标将变为橙色警告三角形警告标识图标，提醒您正在显示不安全的内容。

要恢复上一个操作（重新阻止混合内容），只需重新加载页面即可。

Answer 2

这是因为您没有将bootstrap.js文件和jQuery.js文件添加到您的应用程序中。

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <link data-require="bootstrap-glyphicons@*" data-semver="3.2.1" rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/img/glyphicons-halflings.png" />
  <script data-require="angular.js@1" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  <script data-require="jquery@*" 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="ui-bootstrap@*" 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="ui-bootstrap-tpls-0.12.0.min.js@*" 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>

下拉按钮按预期工作。

2 个答案: