2016-11-14 3 views
0

설치 프로그램이있는 매우 간단한 테스트 페이지에서 부트 스트랩 투어를 테스트하고 있습니다. 콘텐츠가 표시되지만 둘러보기 기능이 어떤 이유로 든 시작되지 않습니다. 누군가 내가 뭘 잘못하고 있다고 말할 수 있습니까?부트 스트랩 투어가 작동하지 않습니다.

감사합니다 :)

있지만 둘, (자신이 bootstrap.min.css/bootstrap.min.js을 포함하는 경우) 또는 bootstrap-tour-standalone.min.css/bootstrap-tour-standalone.min.js 내 코드 당신은 중 하나bootstrap-tour.min.css/bootstrap-tour.min.js을 포함해야

<html> 

<head> 
    <meta charset="utf-8"> 
    <title> This is a testing page for bootstrap tour </title> 

    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="../bootstraptour/build/css/bootstrap-tour.min.css" rel="stylesheet"> 
    <link href="../bootstraptour/build/css/bootstrap-tour-standalone.min.css" rel="stylesheet"> 

</head> 


<!-- Bootstrap core JavaScript 
    ================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script src="../bootstrap/js/jquery.min.js"></script> 
<script src="../bootstrap/js/bootstrap.min.js"></script> 
<script src="../bootstraptour/build/js/bootstrap-tour.min.js"></script> 
<script src="../bootstraptour/build/js/bootstrap-tour-standalone.min.js"></script> 

<script> 
    var tour = new Tour(); 

    // Add your steps. Not too many, you don't really want to get your users sleepy 
    tour.addSteps([{ 
     element: "#content", // string (jQuery selector) - html element next to which the step popover should be shown 
     title: "Title of my step", // string - title of the popover 
     content: "Content of my step" // string - content of the popover 
    }, { 
     element: "#content1", 
     title: "Title of my step", 
     content: "Content of my step" 
    }]); 

    // Initialize the tour 
    tour.init(); 

    // Start the tour 
    tour.start(); 
</script> 


<body> 
    <div id="content"> 
     Hello, World! 
    </div> 
    <br> 
    <br> 
    <br> 
    <div id="content1"> 
     Another Hello, World! 
    </div> 
</body> 

</html> 
+0

어떤 버전 : 여기

는 작업 조각인가? 또한 Doctype 및 뷰포트 메타 태그가 누락되었습니다. –

+0

'bootstrap-tour.min.js'와 'bootstrap-tour-standalone.min.js'를 모두 포함하지 마십시오. 부트 스트랩을 사용하면서 'bootstrap-tour-standalone.min.js'를 포함해서는 안됩니다. – Medard

답변

1

아래에 부착을 검색 할 수 있습니다. bootstrap tour homepage에 대한 설명을 참조하십시오. 부트 스트랩의

var tour = new Tour(); 
 

 
// Add your steps. Not too many, you don't really want to get your users sleepy 
 
tour.addSteps([{ 
 
    element: "#content", // string (jQuery selector) - html element next to which the step popover should be shown 
 
    title: "Title of my step", // string - title of the popover 
 
    content: "Content of my step" // string - content of the popover 
 
}, { 
 
    element: "#content1", 
 
    title: "Title of my step", 
 
    content: "Content of my step" 
 
}]); 
 

 
// Initialize the tour 
 
tour.init(); 
 

 
// Start the tour 
 
tour.start();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/js/bootstrap-tour-standalone.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour-standalone.min.css" rel="stylesheet"/> 
 

 
<div id="content"> 
 
    Hello, World! 
 
</div> 
 
<br> 
 
<br> 
 
<br> 
 
<div id="content1"> 
 
    Another Hello, World! 
 
</div>

관련 문제