부트 스트랩 투어는 오류가 없지만 기능이 없음

부트 스트랩 둘러보기를 구현하는 방법을 배우는 중이었습니다. 아주 단순 해 보였습니다. 나는 행동에서 볼 수있는 간단한 프로그램을 만들었습니다,하지만 난 코드를 실행하려고 할 때, 나는 다음과 같은 오류 접수 :부트 스트랩 투어는 오류가 없지만 기능이 없음

Uncaught TypeError: t(...).stop is not a function 
    at o._scrollIntoView (bootstrap-tour.min.js:22) 
    at o.<anonymous> (bootstrap-tour.min.js:22) 
    at o._callOnPromiseDone (bootstrap-tour.min.js:22) 
    at o.showStep (bootstrap-tour.min.js:22) 
    at o.init (bootstrap-tour.min.js:22) 
    at test.html:67

사람이 뭐가 잘못 됐는지 말해 줄 수 있습니까? 내가 링크를 확인하고 올바르게 참조됩니다. 여기에 내 코드가있다.

는

<head> 

    <!-- Required meta tags --> 
    <meta charset="utf-8" /> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> 
    <meta name="title" content="Test" /> 
    <meta name="description" content="Bootstrap Test Demo" /> 

    <title>Bootstrap Tour Test</title> 

    <!-- jQuery --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

    <!-- Bootstrap CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 

    <!-- Bootstrap Tour CSS --> 
    <link href="../TestFolder/bootstrap-tour/build/css/bootstrap-tour.min.css" rel="stylesheet"> 


</head> 

<body> 

    <div class="container" id="test1"> 
     Hello World! 
    </div> 

    <br> 
    <br> 
    <br> 

    <div class="container" id="test2"> 
     Another Paragraph 
    </div> 

    <!-- Bootstrap jQuery --> 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
    <!-- Bootstrap Popper.js --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
    <!-- Bootstrap JS --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 

    <!-- Boostrap Tour Javascript --> 
    <script src="../TestFolder/bootstrap-tour/build/js/bootstrap-tour.min.js"></script> 

    <script> 
     // Instance the tour 
     var tour = new Tour({ 
      steps: [ 
      { 
      element: "#test1", 
      title: "Title of my step", 
      content: "Content of my step" 
      }, 
      { 
      element: "#test2", 
      title: "Title of my step", 
      content: "Content of my step" 
      } 
     ]}); 

     // Initialize the tour 
     tour.init(); 

     // Start the tour 
     tour.start(); 

    </script> 

</body>

출처

2017-12-21 Kevin Loi

오늘까지 부트 스트랩 '투어'에 대해 들어 본 적이 없지만 사용하지 말 것을 권장합니다. [** 빌드가 실패했습니다 **] (https://github.com/sorich87/bootstrap-tour) 따라서 문제는 코드 자체와 관련이 있습니다. 대신 [** IntroJS **] (https://introjs.com)를 권하고 싶습니다. –

당신은 jquery 2 회, 사람 머리에, 또 다른 시간 직전 popper 라이브러리를 포함했다.

jquery-3.2.1.slim.min.js 라인을 제거하면 모든 것이 올바르게 작동합니다.

또한 bootstrap-tour은 bootstrap 4을 완벽하게 지원하지 않으므로 3.7.7 버전을 사용하는 것이 좋습니다.

출처

2017-12-22 13:50:15

부트 스트랩 투어는 오류가 없지만 기능이 없음

답변

관련 문제