Question

我刚开始尝试使用bootstrap，我遇到了一些问题。任何使用JavaScript / jQuery的东西似乎都不起作用。我尝试过默认的Bootstrap，我正在使用的主题是“Darkly”。每个都有相同的问题。

这是使用popover的页面上的代码。

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

Answer 1

你必须使用jQuery激活popover ..

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

http://www.bootply.com/127692

Answer 2

包含两个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>

只需删除其中一个。

Bootstrap - Popovers / jQuery的问题

2 个答案: