Bootstrap - Problems with Popovers/jQuery

Bootstrap - Problems with Popovers/jQuery

本文关键字：jQuery Popovers with Problems Bootstrap      更新时间：2023-09-26

我刚刚开始尝试引导，遇到了一些问题。任何使用 JavaScript/jQuery 的东西似乎都不起作用。我已经尝试了默认的引导程序，并且我目前正在使用的主题"黑暗"。每个问题都相同。

这是使用弹出框的页面上的代码。

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<!-- Basic
  ================================================== -->
  <meta charset="utf-8">
  <title>Amplitude Gaming</title>
  <meta name="description" content="Amplitude Gaming: Website Testing">
  <meta name="author" content="Little NEKO">
<!-- Mobile Specific Metas
  ================================================== -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
  ================================================== -->
<!-- Bootstrap  -->
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="bootstrap/css/custom.css" rel="stylesheet">
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- Favicons
  ================================================== -->
</head>
<!-- Page Start
  ================================================== -->
  <body>
  <div class="navbar navbar-default navbar-static-top">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="logo-nav"href="#"><img src="images/amplogo1.png"></a>
  </div>
  <div class="navbar-collapse collapse navbar-responsive-collapse">
    <ul class="nav navbar-nav">
      <li><a href="news.html">News</a></li>
      <li><a href="haste.html">Haste</a></li>
      <li class="active"><a href="#">Test</a></li>
    </ul>  
  </div>
</div>
</div>
<div class="jumbotron">
  <h1>Test</h1>
  <p>Testing popovers</p>
  <div class="btn-group">
  <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">Test</button>
</div>
</div>
<!-- End Document 
  ================================================== -->
  <script type="text/javascript" src="js-plugin/respond/respond.min.js"></script>
  <script type="text/javascript" src="js-plugin/jquery/1.8.3/jquery.min.js"></script>
  <script type="text/javascript" src="js-plugin/jquery-ui/jquery-ui-1.8.23.custom.min.js"></script>
  <!-- third party plugins  -->
  <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</body>
</html>

您可以在此处查看实时版本：http://www.amplitudegaming.com/test.html

你必须使用jQuery激活弹出框。

$("[data-toggle=popover]").popover();

http://www.bootply.com/127692

包含两个jQuery文件会导致问题。您已包含在标题中：

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

然后再次在页脚中包括：

<script type="text/javascript" src="js-plugin/jquery/1.8.3/jquery.min.js"></script>

只需删除两者之一即可。

相关文章：