文章/答案/技术大牛

发布

问自举旅游没有开始
EN

Stack Overflow用户

提问于 2020-08-10 09:30:57

回答 1查看 380关注 0票数 1

有人能解释一下为什么Bootstrap旅游没有开始在下面的代码中显示提示吗？我非常有兴趣在我的网页上使用这个插件，但我无法使它工作：

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

我在网上读过并跟随过不同来源的例子，但是提示并没有显示.

bootstrap-4

bootstrap-tour

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-08-10 10:45:03

请保留订单 of 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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63337580

复制

相似问题

问自举旅游没有开始
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自举旅游没有开始EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自举旅游没有开始
EN