Bootstrap 游览没有开始

Question

谁能解释为什么 Bootstrap Tour 不开始在以下代码中显示提示？我很想在我的网页上使用这个插件，但我无法让它工作：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap tour test</title>
  
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <link href="bootstrap-tour.min.css" rel="stylesheet">
  <script src="bootstrap-tour.min.js"></script>
</head>
<body>
    <div class="container">
        <div id="tour1">First div...</div>
        <div id="tour2">Second div...</div>
    </div>

    <script>
    var tour = new Tour({
      steps: [
      {
        element: "#tour1",
        title: "Step 1",
        content: "This is the first div"
      },
      {
        element: "#tour2",
        title: "Step 2",
        content: "This is the second div"
      }
    ]});
    
    tour.init();
    tour.start();
    </script>
</body>
</html>

我已阅读并遵循网络上不同来源的示例，但提示并未显示...

Answer 1

请保持CSS and JS

的顺序

boostrap.min.css（我用的是4.1.0版本）
boostrap-tour-standalone.min.css
JQuery（版本 3.2.1）
Popper.js
bootstrap.min.js（版本 4.1.0）
bootstrap-tour-standalone.min.js

.popover.tour-tour{top:80px !important;left:20px !important;}

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap tour test</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/css/bootstrap-tour-standalone.min.css" integrity="sha512-Ip/QaNzZ+ktVF+SKYnWTriTa3MY5PB1toFS0wmFUuqoHEmxhfUn8dQUse70nJdonrKvwmYYvAGByX9pjePYboA==" crossorigin="anonymous" />

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/js/bootstrap-tour-standalone.min.js" integrity="sha512-KlU17Q8b+noPYQtMWXM8BO08lReJoX3AHxYm7Zyi3UpYYkE4ch7r8d82DGitdIE3r82OW20VMQLVwsYyXo99sQ==" crossorigin="anonymous"></script>

</head>
<body>
    <div class="container">
        <div id="tour1">First div...</div>
        <div id="tour2">Second div...</div>
    </div>

    <script>
    var tour = new Tour({
      steps: [
      {
        element: "#tour1",
        title: "Step 1",
        content: "This is the first div"
      },
      {
        element: "#tour2",
        title: "Step 2",
        content: "This is the second div"
      }
    ]});
    
    tour.init();
    tour.start();
    </script>
</body>
</html>

Bootstrap 游览没有开始

Bootstrap Tour doesn't start

bootstrap-tour

bootstrap-4